Skip to main content
Answered

Is there a way to adjust the position of the messenger on mobile devices?


  • New Participant
  • 2 replies

I have a real problem because on mobile devices, my app displays a bottom navigation/tab bar. As you can see in the picture attached, the standard mobile layout that you impose means that the messenger obscures the mobile menu:

 

spacing 

Even if I adjust the bottom spacing to say, 60px, it has no effect on mobile devices.

messengerThis is a real annoyance and I can't immediately think of a way to solve it. Surely other customers have experienced this issue before?

Best answer by Daniel M15

Thanks for your response @greg h​! I understand now why this wouldn't work for you. Custom positioning on mobile is designed to be implemented through our SDKs, so while it is possible to change, it won't be possible to apply for a PWA. On mobile devices, this will always be, as you mentioned, 20px vertically and horizontally detached from the bottom-right corner of the screen.

 

This seems like a super useful feature for other users who are building an app like yours! Please drop it in our Product Wishlist Group so we can hopefully see this implemented down the line 😊 Thanks!

View original

16 replies

Daniel M15
Employee
  • Employee
  • 240 replies
  • July 22, 2022

Hey @greg h​! Daniel from Customer Support Engineering here 🔧 

 

You can adjust the position of your launcher on mobile using a custom launcher. This allows you to essentially create a unique Messenger with full customisability 🙌 You can read the docs for setting this up on iOS here and Android here.

 

Hope this helps 😁


  • Author
  • New Participant
  • 2 replies
  • July 22, 2022

Not really as I'm running a cross platform Next.js PWA. Essentially, it's a fully responsive web application that runds as a PWA on web, iOS and Android devices. Why don't you allow the user's custom positioning (padding/spacing) to get applied on mobile? It seems everyone building a PWA is going to run into this issue if they use a layout with a bottom tab bar. I might try to write a CSS override using a media query to try and override your default positioning on mobile (which appears to always be 20px vertical and 20px horizontal.


Daniel M15
Employee
  • Employee
  • 240 replies
  • Answer
  • July 22, 2022

Thanks for your response @greg h​! I understand now why this wouldn't work for you. Custom positioning on mobile is designed to be implemented through our SDKs, so while it is possible to change, it won't be possible to apply for a PWA. On mobile devices, this will always be, as you mentioned, 20px vertically and horizontally detached from the bottom-right corner of the screen.

 

This seems like a super useful feature for other users who are building an app like yours! Please drop it in our Product Wishlist Group so we can hopefully see this implemented down the line 😊 Thanks!


  • New Participant
  • 3 replies
  • July 22, 2022

Had a similar frustration with web chat --- the chat box dissolves and we have floating bubbles. These bubbles cover up buttons on our website. Users then have to exit out of the intercom chat entirely to view / use our site.


  • New Participant
  • 1 reply
  • September 16, 2022

Whoa... I am shocked that you this is "desktop first". We have the same issue on our mobile app.


  • New Participant
  • 1 reply
  • September 19, 2022

Any updates on this? Running into this issue as well for my mobile web app.


  • New Participant
  • 1 reply
  • November 2, 2022

Any updates on this? We have mobile apps but not for our landing page - where the menu is still at the bottom for us - which obviously gets accessed through mobile a lot.

@media (max-width: 1024px) {
.intercom-lightweight-app-launcher {
bottom: 72px !important;
}
 
/*localhost*/
.intercom-dfosxs {
bottom: 72px !important;
}
 
iframe[name='intercom-notifications-frame'] {
bottom: 124px !important;
}
}

... our current workaround, overwriting global CSS.

 


  • New Participant
  • 1 reply
  • November 14, 2022

We need to dynamically move the Intercom icon on our mobile site but not desktop. On mobile it materially interferes with the core functionality of the app. What is the reasoning for not allowing this?


  • New Participant
  • 3 replies
  • January 28, 2023

Y'all let's rally at the HQ steps and demand this change. Fr fr this is frustrating AF. PWA is super common for MVP with no code et al., and intercom is designed for early stage. Yelp!


  • New Participant
  • 3 replies
  • January 28, 2023

Also I added it to the product wishlist.


  • New Participant
  • 4 replies
  • September 19, 2023

Oh yeesh.. I’m hitting this issue as well and thought for sure it was an issue for us.  However, I'm shocked to read that the javascript SDK’s `vertical_padding` only works for desktop browsers?!

Like others, our mobile web view has our nav at the bottom of screen which then causes issues for intercom widget.  I hate to have to create custom CSS that overrides this since this should simply be supported in the javascript SDK settings.

Can confirm that the solution posted earlier does indeed work to target those CSS classes and the notifications iframe.


  • New Participant
  • 4 replies
  • September 19, 2023
Alexei wrote:

Any updates on this? We have mobile apps but not for our landing page - where the menu is still at the bottom for us - which obviously gets accessed through mobile a lot.

@media (max-width: 1024px) { .intercom-lightweight-app-launcher { bottom: 72px !important; }   /*localhost*/ .intercom-dfosxs { bottom: 72px !important; }   iframe[name='intercom-notifications-frame'] { bottom: 124px !important; } }

... our current workaround, overwriting global CSS.

 

Thanks for this.. super helpful. Can you tell me why you’re targeting this iframe with styling:

iframe[name='intercom-notifications-frame']

 

What does it correspond to?

 


petergray
  • New Participant
  • 2 replies
  • September 20, 2023

I was also facing the same problem at my latest android mobile. Now got the solution from your comment section. Thanks for posting😁


  • New Participant
  • 1 reply
  • January 30, 2024
petergray wrote:

I was also facing the same problem at my latest android mobile. Now got the solution from your comment section. Thanks for posting😁

Hey Peter, what solution worked for ? I can’t seem to find any in the reponses.

Thank you in advance !


  • New Participant
  • 4 replies
  • January 30, 2024
Sarah Jait wrote:
petergray wrote:

I was also facing the same problem at my latest android mobile. Now got the solution from your comment section. Thanks for posting😁

Hey Peter, what solution worked for ? I can’t seem to find any in the reponses.

Thank you in advance !


this works:

 

@media (max-width: 1024px) {
.intercom-lightweight-app-launcher {
bottom: 72px !important;
}
 
/*localhost*/
.intercom-dfosxs {
bottom: 72px !important;
}
 
iframe[name='intercom-notifications-frame'] {
bottom: 124px !important;
}
}


Justin M12
Forum|alt.badge.img
  • Connector
  • 5 replies
  • March 27, 2024
Alexei wrote:

Any updates on this? We have mobile apps but not for our landing page - where the menu is still at the bottom for us - which obviously gets accessed through mobile a lot.

@media (max-width: 1024px) { .intercom-lightweight-app-launcher { bottom: 72px !important; }   /*localhost*/ .intercom-dfosxs { bottom: 72px !important; }   iframe[name='intercom-notificpositionations-frame'] { bottom: 124px !important; } }

... our current workaround, overwriting global CSS.

 


Great workaround

Just used this to move the launcher position on a website where we have installed intercom into the head code of a third part community site (circle community)


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings