It only takes a few minutes to install the Messenger on your website. Once installed, you’ll be able to greet, chat with, and convert your visitors and leads to customers.
Visitors/Leads vs. Users
Website visitors become leads when they communicate via the Messenger, whereas users are logged in to your website or app. The main difference is the amount of information you know about them. If you're installing Intercom for logged-in users, use this guide.
You'll need an Intercom trial or subscription to install the Messenger.
Initial Messenger install for visitors and leads on web
First go to Settings > 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 select Code snippet, React, Angular, Vue, Ember or Shopify as the installation method, you'll have the choice of installing Intercom for website visitors without logins.
We recommend installing the Messenger for users and visitors.
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 steps required for this installation 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 Basic JavaScript or Single-page app, or you can also 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.
After adding the code, view your website as a visitor and the Messenger will appear.
If you're using the zoom CSS 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 your 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.
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
};
</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>
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) |
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts