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

How to make the intercom draggable?

  • January 27, 2025
  • 2 replies
  • 419 views
R

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

 

Best answer by letapatton2

According to me you can try Intercom’s built-in alignment and hide_default_launcher options along with custom CSS or JavaScript. One common approach is to hide the default fixed launcher on mobile (window.Intercom('update', { hide_default_launcher: true })) and create a small custom floating button that opens Intercom when tapped, which you can make draggable using a simple touch/mouse drag script. This way, users can move the Intercom widget around on smaller screens, ensuring it doesn’t cover important UI elements.

    2 replies

    Emilygav
    Intercom Team
    Forum|alt.badge.img+6
    • EmilygavIntercom Team
    • Intercom Team
    • January 31, 2025

    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 😁

    L
    • letapatton2
    • New Participant
    • Answer
    • November 11, 2025

    According to me you can try Intercom’s built-in alignment and hide_default_launcher options along with custom CSS or JavaScript. One common approach is to hide the default fixed launcher on mobile (window.Intercom('update', { hide_default_launcher: true })) and create a small custom floating button that opens Intercom when tapped, which you can make draggable using a simple touch/mouse drag script. This way, users can move the Intercom widget around on smaller screens, ensuring it doesn’t cover important UI elements.

    Terms & ConditionsAccessibility statement