Tips, Tricks & Best Practices

Chris_AU
Membro

Hide Or move hubspot chat on mobile

resolver

Hey Hubspot Community!

 

We currently deploy hubspot chat using Google Tag Manager, is it possible to stop the chat from firing on mobile devices or screen sizes that are smaller then a certain size?

 

The hubspot chat icon is hovering over our profile menu button and therefore customers cannot click on their profile to see their previous orders.

 

If there is a way to hide it or ideally, move it a bit higher up the screen that would be great.

 

I'm using the free hubspot version. 

1 Solução aceita
LMeert
Solução
Orientador(a) | Parceiro Platinum
Orientador(a) | Parceiro Platinum

Hide Or move hubspot chat on mobile

resolver

Hi @kvlschaefer and @Chris_AU,

 

So here's a pretty simple trick to hide the chat using GTM :

1. Create a javascript variable, edit the breakpoints to match yours and name it screenWidth :

function () {
  var screenWidth = window.innerWidth;
  var screenType;

// edit the breakpoints to match yours
  const mobileBreakpoint = 420;
  const tabletBreakpoint = 1024;

  if (screenWidth <= mobileBreakpoint) {
    screenType = "mobile";
  } else if (screenWidth <= tabletBreakpoint) {
    screenType = "tablet";
  } else {
    screenType = "desktop";
  }
  return screenType;
}

2. Create a specific trigger for your Hubspot chat custom HTML tag and use the previsouly created variable as a condition.

Example if you want to fire the tag on all pages for desktop only :

LMeert_0-1652524116018.png

 

If you still want to display the widget but move it up a notch, you will find the solution here.

It's pretty hacky and I would much rather hide the chat on mobile devices, but iot does work and will achieve what you want.

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

Exibir solução no post original

9 Respostas 9
aljawo
Participante

Hide Or move hubspot chat on mobile

resolver

Hi all, the GTM solution is neat but I think it's way an overkill for something that should be an embedded configuration option. Now we can choose right or left for placement but it's for all. My mobile and desktop pages don't look the same and therefore left works for one but not for the other.

 

Can we have please this as a feature request? 

kvlschaefer
Gerente da Comunidade
Gerente da Comunidade

Hide Or move hubspot chat on mobile

resolver

Hi @aljawo,

 

Thank you for the feedback!

 

Thank you for feedback.

 

I would highly recommend you to please post this product suggestion at our ideas forum.

 

Our product team, who monitors the forum regularly, can read your specific use case and understand why this would be a useful functionality or change. It also helps other customers facing the same issue to advocate for its implementation on your behalf by upvoting on the thread as well. 

 

Thank you,

Kristen


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

Hide Or move hubspot chat on mobile

resolver

Thanks. Will do. I just wanted to continue on the same thread.

 

Best,

 

kvlschaefer
Gerente da Comunidade
Gerente da Comunidade

Hide Or move hubspot chat on mobile

resolver

Hi @Chris_AU,

 

Thank you for reaching out! 

 

I wanted to refer you to this related thread. I believe you would need to deploy custom CSS (media queries) or Javascript to hide or move the chat on mobile.

 

I'll add some of our top contributors to our conversation

Hi @Teun@Kevin-C@Anton@Jake_Lett@LMeert@Oezcan - Do you have any advice for @Chris_AU

 

Thanks!

 

Best,

Kristen


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
0 Avaliação positiva
LMeert
Solução
Orientador(a) | Parceiro Platinum
Orientador(a) | Parceiro Platinum

Hide Or move hubspot chat on mobile

resolver

Hi @kvlschaefer and @Chris_AU,

 

So here's a pretty simple trick to hide the chat using GTM :

1. Create a javascript variable, edit the breakpoints to match yours and name it screenWidth :

function () {
  var screenWidth = window.innerWidth;
  var screenType;

// edit the breakpoints to match yours
  const mobileBreakpoint = 420;
  const tabletBreakpoint = 1024;

  if (screenWidth <= mobileBreakpoint) {
    screenType = "mobile";
  } else if (screenWidth <= tabletBreakpoint) {
    screenType = "tablet";
  } else {
    screenType = "desktop";
  }
  return screenType;
}

2. Create a specific trigger for your Hubspot chat custom HTML tag and use the previsouly created variable as a condition.

Example if you want to fire the tag on all pages for desktop only :

LMeert_0-1652524116018.png

 

If you still want to display the widget but move it up a notch, you will find the solution here.

It's pretty hacky and I would much rather hide the chat on mobile devices, but iot does work and will achieve what you want.

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

NCardarelli
Participante

Hide Or move hubspot chat on mobile

resolver

Hi Chris,

 

Currently, the chat on mobile has no x out feature. You can reload the page all you want, but if you click into the chat, there is no way to x out of it. Any suggestions?

0 Avaliação positiva
CBader
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Hide Or move hubspot chat on mobile

resolver

Hi @LMeert 

 

Thanks for a great solution for hiding Live Chat on mobile devices. I have a question about it.

 

Our HubSpot custom HTML tag in Google Tag Manager is a script loader tag that loads more than just Live Chat. It also loads HubSpot analytics and ads tracking.

 

So if I add this trigger it will block more than just Live Chat on mobile; it will also block HubSpot analytics and ads tracking for mobile.

 

Is there a way to implement this solution that will hide Live Chat on mobile, but not block everything else?

 

Thank you for your insight.

0 Avaliação positiva
LMeert
Orientador(a) | Parceiro Platinum
Orientador(a) | Parceiro Platinum

Hide Or move hubspot chat on mobile

resolver

Hi @CBader,

 

Indeed if you prevent the script to fire using this technique, you will also prevent all hubspot tracking scripts to run, which to me leaves only one solution : to hide the chat via CSS.

 

You should be able to target this by using this bit of css :

@media screen and (max-width: "YOUR BREAKPOINT GOES HERE") {
   #hubspot-messages-iframe-container iframe[title="chat widget"] {
      display : none !important;
   }
}

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

CBader
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Hide Or move hubspot chat on mobile

resolver

Thanks very much for the clarification and for the CSS alternative. Very helpful!

 

Now our team will need to decide whether to sacrifice HubSpot analytics on mobile for faster page loading.  It would be nice if we could just turn OFF Live Chat for mobile without turning off analytics, but that's a whole separate discussion.

 

Thanks again!

0 Avaliação positiva