Choose how your users can open the Messenger, move the Messenger's position on your site and more. Here are some technical tips for customizing the Messenger so that it feels completely at home on your product, site or mobile app. 

Not what you’re looking for? 

If you haven’t already, we recommend taking these essential steps for customizing the Messenger in your settings. 

Choose how the Messenger opens for your users 

By default, your web customers will see the launcher on the bottom right of their screen, like this: 

Note: Here’s how to show the standard launcher on your iOS or Android app. 

However, if you’d like the Messenger to open from a specific button, link or element in your app, site or mobile app you can create a custom launcher. For example, you can trigger the Messenger to open when a customer clicks on your ‘Talk to us’ button or chat icon. 

Note: Add as many custom launchers to your app, website or mobile app as you wish. 

Create a custom launcher on your web app or site 

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:

<a id="my_custom_link" href="mailto:HELP@YOUR-APP.COM">Support</a>
Note:
Including your support address as the link destination works well as a fallback, so if a visitor doesn't have JavaScript enabled in their browser, they can email your team.

3. Add this line to your IntercomSettings snippet:

custom_launcher_selector:'#my_custom_link'

Like this: 

window.intercomSettings = {
  app_id: "YOUR_APP_ID",
  custom_launcher_selector:'#my_custom_link'
};

Important: 

  • You can choose to disable the standard launcher so that only your custom launcher appears. 
  • If you use a custom launcher and also want to use the 'badge' delivery option, we recommend that you use the onUnreadCountChange method in our JavaScript API to show a badge on your custom launcher. If you use a custom launcher without a badge, you shouldn't use the badge delivery option.

Create a custom launcher on your mobile app 

Here’s how to create a custom launcher on your iOS or Android app and how to show your users’ unread conversations count. 

Move the Messenger's position on your site

By default when you install the Messenger, it will sit in the bottom right corner of your product or site. 

To move the Messenger’s position, add any of the following lines to the Messenger installation script:

alignment: 'left',     
horizontal_padding: 20,
vertical_padding: 20 

Like this:

window.intercomSettings = {
app_id: ‘YOUR_APP_ID’,
alignment: 'left',    
horizontal_padding: 20,
vertical_padding: 20
};

Note: You can set your horizontal and vertical padding to 20 or higher. The Messenger will revert to the default padding setting (20 / 20) on mobile.

The Messenger will now appear on the left-hand side for both web and mobile. 

Note: You can only set the Messenger to one position on your site, i.e., it can’t appear in multiple positions across the same site.

You can change the Messenger’s position if you installed it on your website via JavaScript. For example, you can’t change its position if you installed it using Rails, iOS or Android, or through the WordPress integration.

What’s next? 

Did this answer your question?