Integrate Intercom in a single page app
Mel Spath avatar
Written by Mel Spath
Updated over a week ago

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;
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

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: '[email protected]',
   user_id: 'abc123',
   created_at: 1234567890,
   widget: {
      activator: '#IntercomDefaultWidget'

If you have Intercom Acquire, an example of this for logged out users would be:

window.Intercom('boot', {
 app_id: 'abc12345',
 widget: {
 activator: '#IntercomDefaultWidget'

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: '[email protected]', apples: 1});

  • If the user suddenly has two apples, you would call: window.Intercom('update', {email: '[email protected]', apples: 2});

  • But if a user has just caused a “page" change, you would call: window.Intercom('update');

How to end a session

Intercom Acquire 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.

If you use Intercom Acquire combined with another product like Support, Learn or Engage, 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 Acquire session.

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

Enabling secure mode in a single page app

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

Did this answer your question?