Tickets & Conversations

smartsites-comm
Member | Partner
Member | Partner

Remove HubSpot chat trigger button only on smaller devices like mobile

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.

0 Upvotes
12 Replies 12
tylerstouder
Contributor

Remove HubSpot chat trigger button only on smaller devices like mobile

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

0 Upvotes
natsumimori
Community Manager
Community Manager

Remove HubSpot chat trigger button only on smaller devices like mobile

Thank you @Kevin-C and @tjoyce ! 

@0rr3 please see the above^^^

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

Remove HubSpot chat trigger button only on smaller devices like mobile

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
Participant

Remove HubSpot chat trigger button only on smaller devices like mobile

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?

0 Upvotes
natsumimori
Community Manager
Community Manager

Remove HubSpot chat trigger button only on smaller devices like mobile

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

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Remove HubSpot chat trigger button only on smaller devices like mobile

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
Participant

Remove HubSpot chat trigger button only on smaller devices like mobile

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

0 Upvotes
sharonlicari
Community Manager
Community Manager

Remove HubSpot chat trigger button only on smaller devices like mobile

Hey @RicardoTerzella 

 

Could you please share your URL?

 

Thanks

Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
RicardoTerzella
Participant

Remove HubSpot chat trigger button only on smaller devices like mobile

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
Top Contributor

Remove HubSpot chat trigger button only on smaller devices like mobile

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.

Justin Perkins
Solutions Engineer
JPerkins@contractlogix.com
Contract LogixLinkedin
smartsites-comm
Member | Partner
Member | Partner

Remove HubSpot chat trigger button only on smaller devices like mobile

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
Community Manager
Community Manager

Remove HubSpot chat trigger button only on smaller devices like mobile

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!