How to make the intercom draggable? | Community
Skip to main content

In desktop screen, the intercom looks good but in mobile screen, it blocks the important button like button, text…
How can I fix it?

 

Hey there ​@Roland Pak, Emily here from Support Engineering at Intercom 👋🏼

On mobile devices, the position of the Messenger launcher is fixed and cannot be changed; it will always appear on the bottom right on mobile web. The settings for alignment, horizontal_padding, and vertical_padding are ignored on mobile devices. However, you can create a custom launcher for more flexibility in positioning the Messenger within your mobile app. For iOS, you can set the bottom padding for the Messenger, which dictates how far from the bottom of the screen the default launcher and in-app messages will appear, by calling [Intercom setBottomPadding: bottomPadding];. For Android, you can use Intercom.client().setBottomPadding(bottomPadding) to achieve the same effect. If you need further assistance with creating a custom launcher, you can refer to the documentation for Android, iOS, and React Native.

It may be worth implementing a custom launcher to ensure the messenger isn’t blocking anything important in your app 😁


To make the Intercom widget draggable and avoid blocking important buttons on mobile, you can use some custom JavaScript along with CSS. Wrap the Intercom launcher inside a container div and apply a draggable script that works on touch devices too. You can also add media queries in your CSS to reposition or shrink the widget on smaller screens. If you're using Intercom’s default code, try using their window.Intercom('update', { alignment: 'left' }) or similar options to shift its position based on screen size. This way, it stays user-friendly on both desktop and mobile.