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 😁

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.

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!

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.

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

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

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.

... our current workaround, overwriting global CSS.

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?

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!

Also I added it to the product wishlist.

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.

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

iframefname='intercom-notifications-frame']

What does it correspond to?

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;
}
}

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)