Remove HubSpot chat trigger button only on smaller devices like mobile

[smartsites-comm]

We have a custom chat triggering button for smaller devices like mobile on the sticky footer. Is there a way to remove the default chat triggering button/icon (only the icon not whole HubSpot chat function). The chat window is triggering using the following code:

onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen()"

http://prntscr.com/trkkcq

Thanks in advance.

[tylerstouder]

I want to add this functionality to our site, but our dev doesn't know how.

[natsumimori]

Thank you @Kevin-C and @tjoyce ! 

@0rr3 please see the above^^^

[tjoyce]

To add to @Kevin-C and @RicardoTerzella answers which should get you there... you can also use the window event global callback to adjust things after the widget has rendered... See this post 

https://community.hubspot.com/t5/APIs-Integrations/Chatflow-embedded-through-iframe/m-p/473637#M4567...

[0rr3]

Pinging this thread!

We have a PWA built with Angular.

On mobile devices we generally want the live chat icon to be present on all pages but on one page the icon will be in the way of other important buttons in the lower screen area. We would like to hide this icon and toggle the chat programmatically via another custom button we place somewhere else.

Is there a guide in css or any Javascript API we could call to temporarly hide the icon but not disable the functionality?

[natsumimori]

@tjoyce and @Kevin-C , do you have any advice or information you can share with @0rr3 ?

[Kevin-C]

Thanks @natsumimori 

Hey @smartsites-comm 

You could use a media query on said page that would hide the button.

Somethign like:

@media (max-width:768px) {
  .the_widget_class {
    display: none;
    pointer-events: none;
  }
}

[RicardoTerzella]

I have the same necessity. Could you solve your problem?

[sharonlicari]

Hey @RicardoTerzella 

Could you please share your URL?

Thanks

Sharon

[RicardoTerzella]

Hi!

It's https://app.meuamigotemumsitio.com.br

Now I found a way to initialize the scripts but keep the widget closed using this:

    window.hsConversationsSettings = {
      loadImmediately: false
    };

Associated to this, at my open chat button:

window.HubSpotConversations.widget.load();
window.HubSpotConversations.widget.open();

And that works fine. Ther performance is not soo good, but, ok.

The real problem is that when user closes the widget, the default open button is there again.

Regards

[JustinPerkinsC]

So you talking about HubSpot live chat, and just want it not to appear on mobile devices correct? This is actually a setting for how it appears on devices. 

-Edit your chat flow

-Click the Display tab on the left

-You will have sections here you can toggle for how things appear on desktop versus mobile devices.

[smartsites-comm]

Thanks for the response. @JustinPerkinsC 

We need chat-functionality on mobile but that should be trigged with our custom button not default HubSpot chat button/icon. The default HubSpot chat button/icon should be hidden.  Hide this icon: https://prnt.sc/trkkcq

[natsumimori]

Hi @smartsites-comm ,

I will tag in some Community contributors here:

@JustinPerkinsC , @Chris-M Could you share your advice? Please feel free to tag in other members too!