Skip to main content

New Messenger install experience on your website

Learn how to install the Intercom Messenger on your website in a few minutes — choose your install type, add the code, connect your customer data, and go live.

Written by Dawn Perrott

Use this article to install the Intercom Messenger on your website, connect your customer data securely, and test that everything is working. Once installed, you'll be able to welcome, onboard, and support customers as they become loyal users of your app.

The steps for a full and secure Messenger install are:

  1. Choose your install type.

  2. Install and test the Messenger.

  3. Connect your customer data and secure the Messenger (skip this if you chose Visitors & leads only).

Note: This is the new Messenger install experience, it is rolling out gradually. If your workspace hasn't been switched over yet, use Install Intercom for visitors and leads on web or Install Intercom for users on web instead.


Choose your install type

Go to Settings > Channels > Messenger Live Chat > Overview, find the Website card and select Install on website.

Intercom Settings showing the Messenger Live Chat Overview page, with the Website card highlighted and the Install on website button selected.

Select your install type

You'll be asked "What information does your team need in your inbox?" and shown two options:

The Website Messenger installation dialog showing two install type options: Visitors & leads (marked as quickest to install) and Signed-in users, visitors & leads, each with a preview of what teammate will see in the Inbox.

  • Visitors & leads (quickest to install) — Conversations aren't linked to user details. You can complete the additional setup later to identify signed-in users.

  • Signed-in users, visitors & leads — Conversations from signed-in users include relevant details, giving your team the context they need to provide personalized support. Requires frontend and backend changes.

Each card shows a preview of what your team will see in the Inbox for that option, so you can compare before you commit. Select the option that fits your business, then click Continue.

Tip: Visitors & leads gets you set up fastest. You can always come back later and complete the Signed-in users, visitors & leads setup whenever your team's ready.

Ask a developer to help (optional)

If needed, you can ask a teammate — like an engineer — to complete the installation. Click Invite teammate, enter their email address, and an invite will be sent allowing them to join your workspace with the minimum permissions required to install the Messenger:

  • Can manage general and security settings

  • Can manage Messenger settings

  • Can manage workspace data


Choose how to install the Messenger

Select how you want to install by choosing one of the following methods:

The Install for visitors & leads step showing the Select install method dropdown expanded, with custom code options including Code snippet, React, Angular, Ember, and Vue, and platform options including Shopify, WordPress, Google Tag Manager, and Segment.
  • Using custom code

    • Code snippet

    • React

    • Angular

    • Vue

    • Ember

  • Or through one of the following integrations

    • WordPress

    • Google Tag Manager

    • Shopify

    • Segment

Clicking one of these options selects it and reveals the specific steps for that method. Many of these methods offer a Node.js Package Manager (NPM) install to make it easier.

Note: For Single-Page Applications (SPAs), the standard snippet approach needs adjustment. Follow Intercom's SPA installation guide to handle dynamic page changes correctly.

Install Intercom via your chosen method

Now follow the instructions given for the method you selected. If you selected the Code snippet, React, Angular, Vue, or Ember, you'll be provided with a code snippet referencing an NPM package. This snippet is pre-populated with your unique workspace ID, so it's ready to go.

Click Copy code and paste it before the </body> tag on every page you want the Messenger to appear on.

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:

var APP_ID = "your_app_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
};

After adding the code, open your app and the Messenger will appear.

Important: Keep the following in mind when identifying users:

  • 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.

  • Always pass user_id, email, and user_hash dynamically from your server for the currently logged-in user — never hardcode or cache a single user's identity in the snippet.


Test your installation

Click Test your installation to confirm the Messenger is working as expected.

Once it passes, you'll see a "Messenger is installed" confirmation.

For the Visitors & leads path, it reads: "Visitors can now start conversations from your site. They'll appear in your Inbox with a randomized name until they share their details. Next, make Messenger your own. Customize its colors, launcher, and welcome message to match your brand."

For the Signed-in users, visitors & leads path, continue to the Connect your customer data section below to finish the install.

From here you can click I'll do this later or Customize your Messenger to jump straight into styling it.


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:

Intercom('shutdown');

Tip: Call Intercom('shutdown') inside your logout event handler or equivalent — wherev

er your app ends a user's session. This clears the Intercom cookie immediately so the next visitor starts a fresh, anonymous session.

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, so it's important to call this on every logout.


Connect your customer data

Skip this section if you chose Visitors & leads only — your install is already complete once you've tested it above. If you chose Signed-in users, visitors & leads, continue below to finish connecting your user data attributes.

Note: The Signed-in users, visitors & leads path requires changes to both your frontend and backend code. You'll need developer access to complete this section.

Generate a token for each customer to ensure your customer data is secure

On your server, generate a signed JSON Web Token (JWT) for each logged-in user. For example, in Node:

const jwt = require('jsonwebtoken');

const token = jwt.sign(
  { user_id: user.id, email: user.email },
  process.env.INTERCOM_SECRET_KEY,
  { algorithm: 'HS256', expiresIn: '1h' },
);

You'll need your workspace's secret key for this step — it's shown (masked) on screen. Keep this key on your server. Never include it in browser or app code.

Note: Keys are scoped to platforms, and your workspace can have more than one. You can create, rotate, or decode a key from your Messenger security settings.

Add the updated snippet to your website

Add one line to the snippet you already installed. The email is extracted from the token, and used to securely represent the identity of the messenger.

Intercom({
  app_id: 'your_app_id',
  intercom_user_jwt: token,
});

This applies wherever you deploy the change, so any location sharing this codebase will connect too.

Test your installation

Click Test installation to confirm the Messenger is working as expected.

💡 Tip: Need more help? Get support from our Community Forum. Find answers and get help from Intercom Support and Community Experts.


Related Articles


💡Tip

Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts


Did this answer your question?