It only takes a few minutes to install the Messenger on your website. Once installed, you’ll be able to welcome, onboard, and support customers as they become loyal users of your app.
The two steps required for a full and secure Messenger install are:
You'll need an Intercom trial or subscription to install the Messenger.
Initial Messenger install for users on web
First go to Settings > Channels > Messenger > Install and choose Install for web.
Choose how to install the Messenger
Select how you want to install by choosing one of the following methods:
Code snippet
React
Angular
Vue
Ember
WordPress
Google Tag Manager
Shopify
Segment
Each method provides specific steps when selected. Many of these methods offer a node package manager (NPM) install to make it easier for you.
Ask your developer to help (optional)
If needed, you can ask a teammate (like an engineer) to complete the installation. Simply click Invite teammate.
Once you input their email address, an email invite will be sent which allows them to join your team's workspace.
The invited teammate will be given a lite seat on Advanced / Expert plans and given a full seat on Essential plans. They'll have the minimum permissions required to install the Messenger:
Can manage general and security settings
Can manage Messenger settings
Can manage workspace data
Install yourself
If you selected Code snippet, React, Angular, Vue, Ember or Shopify as the installation method, you'll have the choice of whether to complete the installation for:
Users with logins - Install the Messenger for logged-in users. The messenger will show information like customer names and previous conversations across devices.
For website visitors without logins - Install the Messenger for anonymous website visitors who aren’t logged in. Conversations will be saved in the browser via a cookie.
We recommend installing the Messenger for users and visitors.
You must then "Enable user traffic for messenger".
If this is disabled, all requests to Intercom will fail.
Install Intercom via your chosen method
Now follow the instructions given for the method you selected. For example, if you selected WordPress you'll see the instructions below for this method.
If you selected the Code snippet, React, Angular, Vue, or Ember method, you'll be provided with an NPM package containing a code snippet to copy and paste into the codebase of your own app. This snippet is pre-populated with your unique workspace ID, so it's ready to go.
You can also find the package directly on the NPM site.
There are several other templates available such as including the code snippet in a Node.js/Rails (Ruby)/Django (Python 3), or PHP app. You can also include the code snippet in a single-page app or use the rails gem to install the snippet.
Click Copy code and paste it before the </body> tag on every page you want the Messenger to appear on your app.
Then edit the code to send Intercom the email address or user_id and signed-up date of the user who is currently logged in.
After adding the code, open your app and the Messenger will appear.
Shut down your user sessions on user logout
Ensure that you also call the Intercom shutdown method to clear your customers’ conversations when they log out of your app.
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).
Important:
You can identify users with either a user_id or email address.
If you send a user_id and an email address, the user_id will take priority when identifying your users.
If you choose to use user_id, email address can still be used to identify your users in Intercom, so we recommend enabling identity verification.
You can also send Intercom Custom attributes about your users.
If you're using the
zoomCSS on your webpage, make sure that Intercom's widgets are not receiving it.
Look and feel options
The first option allows you to choose if you want to show or hide the messenger for your website’s audience prior to launching. Otherwise, it defaults to showing the messenger.
The second option links to the Messenger Settings, where you can change the colors and theme of the messenger.
Check the installation
You can check the installation was successful by clicking on Check installation. This button offers a success notification if the Messenger has been successfully found or indicates whether something has gone wrong.
If you’ve installed the Intercom Messenger and it’s not appearing correctly, here are a few common ways to fix it.
Now continue on to the next step in the installation process and secure your messenger with Identity verification.
Learn how to:
Installing Intercom for a client
If you don't have access to the Intercom workspace, you can grab the JavaScript code here 👇 You will need to manually replace WORKSPACE_ID with the unique workspace ID for your Intercom account.
<script>
var APP_ID = "WORKSPACE_ID"; // Replace this with your workspace ID
window.intercomSettings = {
app_id: APP_ID,
name: "Jane Doe", // Full name
email: "customer@example.com", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){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);}}})();</script>
The value for created_at should be the date that a customer signed up for your app, site or service, sent as a Unix timestamp.
Installing Intercom for a EU and AU hosted workspaces
To install Intercom if you're using our EU or AU hosting, you will need to provide an additional api_base parameter. The values for this are listed in the table below.
Data hosting region |
|
United States (US) | |
European Union (EU) | |
Australia (AU) |
Install Intercom in a desktop environment
It is technically possible to include Intercom in a desktop application, however, we do not officially support desktop environments. The Intercom Messenger has been designed and developed to run in a web environment (list of supported browsers). These web environments support specific web functionality that our Messenger depends on (e.g. Javascript and CSS).
Electron and similar technology enables you to build desktop applications using web technology, and it is possible to install Intercom in these types of applications - there are even community libraries to help install Intercom in Electron environments, however, it's not something we officially support.
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts