If your app is characterized by very few page refreshes (ie., content is swapped out on the client side but no page refresh happens) and lots of asynchronous JS, you'll need to integrate Intercom in a slightly different way. Here is what we suggest:

First, include the intercom JS library file in your HTML head element.

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;
s.src='https://widget.intercom.io/widget/{app_id}';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

Important: Make sure to change your app_id.

Next, once you have a logged in user on your site (after they have authenticated and you have their details available) you call window.Intercom('boot', {user_data}), where user_data is all the data about the user. Please make sure to send the user_id and/or email on every call to update your users. This will send the logged in user's details to Intercom and will check for new messages that should be shown to the user. If you want to use a contact link in your application to allow your users to send you messages, you should also send the widget key (the one with the activator key nested inside) to tell Intercom if you're either the default link (specified with #IntercomDefaultWidget) or a custom one (called with an id or class of your own).

So an example of this for logged in users would be:

window.Intercom('boot', {
   app_id: 'abc12345',
   email: 'example@example.com',
   user_id: 'abc123',
   created_at: 1234567890,
   custom_launcher_selector: '#my_custom_link'
});

Important: Make sure to change your app_id.

An example of this for logged out users would be:

window.Intercom('boot', {
   app_id: 'abc12345',
   custom_launcher_selector: '#my_custom_link'
});

Important: Make sure to change your app_id. 

Tell Intercom when your data or URL changes

There are two further calls that you may need to use in your app. 

If your user's data changes, or if you change the URL in some way without a page load, you should call window.Intercom('update', {user_data}), where user_data is an (optional) set of changes to your user data. An update call simulates a page refresh, causing Intercom to check for any new messages we should deliver to the user. You only need to include whatever has changed—you don't need to include all user data in each update. You should, however, still send the user_id and/or email.

You use the update function like this:

  • You boot the user as normal: window.Intercom('boot', {app_id: APP_ID, email: 'someuser@example.com', apples: 1});
  • If the user suddenly has two apples, you would call: window.Intercom('update', {email: 'someuser@example.com', apples: 2});
  • But if a user has just caused a “page" change, you would call: window.Intercom('update');

Important: Make sure to change your app_id. 

For single paged apps or pages where the URL changes without a full page reload, the Intercom Messenger does not automatically send URL changes to Intercom to match messages based on URLs. You will need to call Intercom("update") in order to initiate a "ping" every time a URL changes. 

How to end a session

Intercom Respond allows you to put the Intercom Messenger on any public facing site that you own (your marketing site, your docs site, your developer hub, etc). In order to maintain continuity of conversations across all of these potentially different subdomains while your users are logged in, we set a cookie in your user’s browser. This cookie expires after one week.

Any user that uses a shared computer and browser with someone else will be able to see the most recently logged in user’s conversation history until the cookie expires. Because of this, it’s very important to properly shutdown Intercom when a user’s session on your app ends (via manually or automatically logging out). 

Here’s how to shutdown Intercom:

  1. You will have already begun tracking your user via the Intercom JS snippet or the “boot” method.
  2. When your user logs out of Intercom (or is automatically logged out by your app), call Intercom('shutdown');  from our JavaScript API, to end the Intercom session and clear the cookie.
  3. If applicable, call Intercom('boot', {app_id: 'YOUR_APP_ID'}) to start a fresh session.

Important: Make sure to change your app_id. 

The Intercom('shutdown');method will automatically reset Intercom to a clean state for logging in another user or booting Intercom for logged-out areas of your application.

Enabling identity verification in a single page app

To enable identity verification on your single page app, you should add the user_hash attribute to your boot call. More details can be found here.

What’s next?

Did this answer your question?