Tips, Tricks & Best Practices

Chris_AU
Member

Hide Or move hubspot chat on mobile

SOLVE

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. 

0 Upvotes
1 Accepted solution
LMeert
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Hide Or move hubspot chat on mobile

SOLVE

Hi @kvonloesecke 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 !

View solution in original post

2 Replies 2
kvonloesecke
Community Manager
Community Manager

Hide Or move hubspot chat on mobile

SOLVE

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@BootstrapC@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 Upvotes
LMeert
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Hide Or move hubspot chat on mobile

SOLVE

Hi @kvonloesecke 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 !