Configuration

Once you have installed Intercom on your site you should see the Messenger in the bottom right of your screen. You may now want to tailor how the Messenger appears on your site. You have some options open to you here and we will go through them here. If you are happy with the way the Messenger is currently displayed then you can can skip this section and move onto learning more about how you can interact with your users.

Choosing the Messenger display options

How you want to display the Intercom Messenger will depend on your own use case. You may even have difference use cases for different pages on you website. In each case you can choose a display that suits your own needs.

Messenger alignment

By default the Messenger will appear on the bottom right corner of you site, but you can change its position if you like. To do this simply add the extra lines below to you installation script:

JavaScript

window.intercomSettings = {
    app_id: ‘abc123’,
    alignment: 'left',			# Customize left or right position of messenger
    horizontal_padding: 20,		# Customize horizontal padding
    vertical_padding: 20		# Customize vertical padding
  };

For more examples of how you can customize the Intercom messenger please see our product documentation page here

Intercom('show')

This will show the Messenger. If there are no conversations it will open with the new message view, if there are it will open with the message list. It will also return you to the last message state. If you had a conversation open then this will re-open on this conversation.

Show Intercom Messenger

Intercom('show');

Intercom('showMessages')

To open the message window with the message list you can call 'showMessages'. This will show the list of messages regardless of the previous state. If you had a conversation open and you use this method then it will return to the list and not the previous state.

Open With Message List

Intercom('showMessages');

Intercom('showNewMessage')

To open the message window with the new message view you can call 'showNewMessage'. This will open a new user initiated message. This will drop the user into the body of their new message so they can start typing immediately.

Open For New Messages

Intercom('showNewMessage');

📘

Pre-Populate Messages

This function takes an optional second parameter that can be used to pre-populate the message composer as shown below.

Pre-Populate Messages

Intercom('showNewMessage', 'pre-populated content');

Example Usage of Pre-Populating a Message

You can add a link anywhere on your site to open the new message screen with default content:

Link To Message

Send us <a href="#" onclick="Intercom('showNewMessage', 'Feedback on the new reports feature:')">your feedback on the reports feature</a>

🚧

Respond product

Please note that this call is only available with our Respond products.

Intercom('onShow')

Gives you the ability to hook into the show event. Requires a function argument.

Show Action

Intercom('onShow', function() { // Do stuff });

Intercom('onUnreadCountChange')

This method allows you to register a function that will be called when the current number of unread messages changes.

Read Notification

Intercom('onUnreadCountChange', function(unreadCount) {
  // Do stuff...
});

📘

Custom Launcher?

If you use a custom launcher and also want to use the 'badge' delivery option, we recommend that you use the onUnreadCountChangemethod 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.

Intercom('hide')

This will hide the Messenger.

Hide the Message Window

Intercom('hide');

Intercom('onHide')

Gives you the ability to hook into the hide event. Requires a function argument.

Hide Action

Intercom('onHide', function() { // Do stuff });

Interactive Configuration Example

Intercom Configure Example

The above link is to a Codepen where you can test the different configuration options outlined here. Codepen allows you to copy and paste code into an JS (or HTML and CSS) editor where you see the results immediately. You can use your own App ID if you have one or your can user our test example App ID, whatever you find easier. For more info on Codepen and how to use it with Intercom please see this page