Single page app layout
If your app is characterized by very few page refreshes (i.e., 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:
Include Intercom JS Library
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);}}})()
Logged In Users
When 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.
Contact Link
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).
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,
custom_launcher_selector: '#my_custom_link',
company: {
id: 'company1',
name: 'Fake Company',
plan: 'plan1'
}
});
Logged Out User
If you have Intercom Inbox, an example of this for logged out users would be:
window.Intercom('boot', {
app_id: 'abc12345',
custom_launcher_selector: '#my_custom_link'
});
Update Without Page Load
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.
Always Send user_id and/or email.
Whether you are updating or creating a new user you should always send user_id and/or email.
Example Update Flow
So an example update flow for you user might look something like this:
You boot the user as normal
window.Intercom('boot', {app_id: APP_ID, email: '[email protected]', apples: 1});
User Data Changes (Without Page Load)
Now lets suppose your users data changed without a page load and you need to perform an update
window.Intercom('update', {email: '[email protected]', apples: 2});
User Data Changes (With A Page Load)
If, instead, your users data changed but this occurred with a page load. Then you would only need to call:
window.Intercom('update');
How to end a session
Intercom Inbox 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 Inbox combined with another product like Articles or Messages, 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).
Shared Conversations
If users share a computer then they could see each others private conversations unless you properly shutdown Intercom when a users session ends
Deleting Cookies
Note: If you need to delete cookies created by the Messenger but are unable to use this method (e.g. because our JavaScript hasn’t been loaded), all cookies are prefixed with ‘intercom-’ and are created on your domain.
End Of Session Flow
To properly end a session you need to follow the follow steps:
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 the following method from our JavaScript API to end the Intercom session and clear the cookie:
Intercom('shutdown');
3/ If applicable, call the following method to start a fresh session:
Intercom('boot', {app_id: 'YOUR_APP_ID'})
Clean Slate
The Intercom('shutdown'); method will automatically reset Intercom to a clean state for logging in another user or booting Inbox 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:
developers.intercom.ioUpdated over 6 years ago