Choose how your users can open the Messenger, make the Messenger only available for selected users and more. Here’s 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 wish to open the message window from (e.g., "#my_custom_link" ). Or you can specify multiple links by passing a class instead (e.g., ".my_custom_class_name")

2. Add a link to your product (you'll find your Intercom mailto address in Settings > App Settings > Inbound Email address

<a id="my_custom_link" href="mailto:YOUR_APP_ID@intercom-mail.com">Support</a>

3. Add this new code to your Intercom Settings, like this: 

window.intercomSettings = {
  email: "example@example.com",
  name: "John Doe",
  user_id: "123",
  created_at: 1234567890,
  app_id: "YOUR_APP_ID",
  custom_launcher_selector: '#my_custom_link'
};

Note: You can get your app ID under Settings: Installation. It is also in your incoming email address.

Important: 

  • You can choose to disable the standard launcher so that only your custom launcher appears. The above instructions only apply to the new Messenger, please contact us if you're using an older version and would like to create a custom launcher.
  • If you use a custom launcher and also want to use the 'badge' delivery option, we recommend that you use the onUnreadCountChangemethod 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, replace the Javascript snippet in the Messenger installation script with this:

window.intercomSettings = {
app_id: ‘abc123’,
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?