Skip to main content
Answered

Capability to make the Intercom icon draggable for user-customized positioning.

  • May 22, 2024
  • 1 reply
  • 411 views

Our users are experiencing issues with page components being blocked due to the fixed position of the Intercom chat icon. Could we make the chat icon draggable so users can reposition it as needed?

 

 

 

 

Best answer by Jennifer K

Hi @Kanchan Singh 

Jennifer here from Intercom

You can set up a draggable launcher to move around the screen by using a Custom Launcher attached to an HTML element:

 

1. Pass the ID of the element you're using as a custom launcher to open the Messenger (e.g., "#my_custom_link"). Or you can specify multiple links by passing a class instead (e.g., ".my_custom_class_name").

2. Add the ID or class to the HTML element that you want the Messenger to open when clicked. For example, if you want the Messenger to open if someone clicks a link to your support email address:

​ `Support` mailto:HELP@YOUR-APP.COM

3. Add this line to your IntercomSettings snippet:

​​ `<br> custom_launcher_selector:'#my_custom_link'<br>`

Here's an example of what it should look like:

​ `<br> window.intercomSettings = {<br> app_id: "YOUR_APP_ID",<br> custom_launcher_selector:'#my_custom_link'<br> };<br>`

 

Important: You can choose to disable the standard launcher so that only your custom launcher appears.

Heres an article on how to create a Custom Launcher: https://www.intercom.com/help/en/articles/2894-create-a-custom-launcher 

 

Hope this helps 🤞

View original
Did this topic help you find an answer to your question?

1 reply

Jennifer K
Intercom Team
Forum|alt.badge.img+3
  • Intercom Team
  • 984 replies
  • Answer
  • June 6, 2024

Hi @Kanchan Singh 

Jennifer here from Intercom

You can set up a draggable launcher to move around the screen by using a Custom Launcher attached to an HTML element:

 

1. Pass the ID of the element you're using as a custom launcher to open the Messenger (e.g., "#my_custom_link"). Or you can specify multiple links by passing a class instead (e.g., ".my_custom_class_name").

2. Add the ID or class to the HTML element that you want the Messenger to open when clicked. For example, if you want the Messenger to open if someone clicks a link to your support email address:

​ `Support` mailto:HELP@YOUR-APP.COM

3. Add this line to your IntercomSettings snippet:

​​ `<br> custom_launcher_selector:'#my_custom_link'<br>`

Here's an example of what it should look like:

​ `<br> window.intercomSettings = {<br> app_id: "YOUR_APP_ID",<br> custom_launcher_selector:'#my_custom_link'<br> };<br>`

 

Important: You can choose to disable the standard launcher so that only your custom launcher appears.

Heres an article on how to create a Custom Launcher: https://www.intercom.com/help/en/articles/2894-create-a-custom-launcher 

 

Hope this helps 🤞


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