intercom website integration

How to Add Intercom to Your Website: Setup Guide

Add Intercom to your website the right way: pick visitor or signed-in install, place the snippet, secure logged-in users with JWTs, and fix a missing Messenger.

To add Intercom to a website, enable the Messenger for web in your Intercom settings, choose an install type, copy the snippet Intercom generates for your workspace, and place it on every page where the chat should appear. For anonymous visitors and leads, that takes a few minutes. For logged-in customers, you also need a small backend change to keep identity secure.

This guide walks through both paths, the platform shortcuts (WordPress, Google Tag Manager, Shopify), the security step people skip, and the fixes for a Messenger that does not show up. We also explain how it fits with a site or app built through WebsitePublisher.

TL;DR

Enable the Messenger for web in Intercom first. If it is off, all requests to Intercom fail and the code may not be available.
Pick your path: “Visitors & leads” is the fastest. “Signed-in users, visitors & leads” needs frontend and backend changes but gives your team customer context.
For logged-in users, sign a JSON Web Token (JWT) on your server. The signing secret never goes into browser code.
If the Messenger is missing, check the workspace ID, the placement before the closing body tag, and (with Google Tag Manager) that the tag is published.
On WebsitePublisher, your AI assistant can place the snippet, and every change is live immediately.

Choose your install type before you copy any code
How the Messenger treats visitors, leads and customers
Add Intercom for visitors and leads: step by step
Platform shortcuts: WordPress, Google Tag Manager, Shopify
Add Intercom for logged-in users
Fix a Messenger that does not appear
Where WebsitePublisher fits
Our perspective: install the simple version first
Quick checklist before you go live
FAQ
Sources

Choose your install type before you copy any code

Intercom’s new website install flow starts with one decision. Who do you want to talk to?

	Visitors & leads	Signed-in users, visitors & leads
Best for	Marketing sites, landing pages, portfolios, small stores	Customer portals, web apps, dashboards
Work required	Add the snippet and test	Snippet plus frontend and backend changes
What your team sees	A conversation with an anonymous visitor or a lead who left an email	The conversation plus the customer’s context in the Inbox
Identity security	Not needed	Required (server-signed JWT)

The documented flow has the same rhythm either way: choose the install type, install and test the Messenger, then connect and secure customer data if signed-in users are included. Intercom says the visitors and leads path is complete once your installation test passes.

If you run a public marketing site and do not have user accounts, start with visitors and leads. You can add the signed-in path later.

How the Messenger treats visitors, leads and customers

The same Messenger works on public pages and inside a logged-in product. According to Intercom, it supports conversations with logged-out visitors and leads. Logged-in users can see their context and previous conversations across devices.

A few behaviors matter when you plan your setup:

A lead can give an email address. Replies sent while they stay on the site appear in the Messenger. Later replies can go out by email.
When a lead later signs up or logs in, their conversations and activity history carry over to the user record.
Your marketing site and your authenticated product can use one Messenger, so a visitor’s early questions are not lost when they become a customer.

That last point connects chat to the rest of your funnel. If you are deciding what happens to a lead after the first message, our notes on lead capture form examples show the fields worth collecting, and the HubSpot connection guide covers sending those leads to a CRM.

Add Intercom for visitors and leads: step by step

This is the quick path for a standard website.

Enable the Messenger. In Intercom, open Settings and turn on the Messenger for web. Do this before touching your site. When it is disabled, requests fail.
Start the install. Choose Install for web, then the “Visitors & leads” type.
Select your method. Intercom’s new install flow lists nine routes: code snippet, React, Angular, Vue, Ember, WordPress, Google Tag Manager, Shopify and Segment. Pick the one that matches your stack.
Copy your snippet. It is specific to your workspace. It contains your workspace (app) ID, so do not copy one from another site.
Place it on every page. Intercom’s guidance is to put the JavaScript before the closing body tag on each page where the Messenger should appear.
Test it. Open a page in a private window, confirm the launcher appears, send a message, and check that it lands in your Inbox.

If your site is one shared template, one placement covers every page. If it is a set of separate pages, check each one.

Platform shortcuts: WordPress, Google Tag Manager, Shopify

The platform routes save you from pasting the base snippet by hand. They do not always remove the need for extra configuration, especially for logged-in identity and event tracking.

WordPress

Intercom documents a plugin-based connection. Its docs say it needs WordPress 4.2.0 or higher, and its troubleshooting page adds PHP 5.6 or higher. If the Messenger does not show, check whether your theme includes a footer, since that is where the plugin inserts the code. Without one, add the snippet to your pages directly.

Google Tag Manager

You need your workspace ID and a tag that is configured correctly and published. If the tag is saved but not published, the Messenger will not appear. If your Intercom workspace is hosted in the EU or Australia, Intercom documents different api_base values: https://api-iam.eu.intercom.io for the EU and https://api-iam.au.intercom.io for Australia, per its troubleshooting guide.

Shopify

For stores, the value is context, not just chat. Intercom’s Shopify app documentation, updated June 29, 2026, says the app adds the JavaScript snippet automatically, imports Shopify records, syncs customer data and store actions, and provides an order-status Messenger app. You need a Shopify account and permission to install apps and channels. Intercom lists availability on its Essential, Advanced and Expert plans, so check plan terms and Shopify charges directly before you commit.

For logged-in shoppers, you still have to enable the relevant Shopify install option and test while signed in to a customer account.

Single-page apps

Route changes in a single-page app do not reload the page, so the standard snippet is not enough. Intercom has a separate single-page app installation approach. Use it if your front end is React, Vue or similar.

Add Intercom for logged-in users

This path gives your team the customer’s identity and history next to each conversation. It also adds responsibility, because browser-visible identity fields can be manipulated.

Intercom’s current instructions describe the secure pattern:

Your server generates a JWT using HS256, signed with your workspace secret.
The token carries fields such as user_id and email, plus an expiration.
Your frontend passes the token to the Messenger as intercom_user_jwt.
The secret stays on the server. It never appears in frontend code.

Rules that prevent the most common mistakes, based on Intercom’s guide to installing for logged-in users:

Generate identity data per session. Never hardcode or cache one user’s email, user_id or user_hash in browser code.
Call the shutdown function on logout. On a shared browser, the next person should not see the previous user’s conversations.
Treat this as part of the install, not an optional upgrade. Intercom lists identity verification as a separate step, which makes it easy to skip.

The tradeoff is simple. Anonymous mode is fastest to launch. Signed-in mode takes backend work and returns personalized support and richer Inbox context.

Fix a Messenger that does not appear

Work through this list in order. It follows Intercom’s troubleshooting steps.

Confirm the Messenger is enabled in Intercom settings.
Check the workspace ID in your snippet against the one in your workspace.
Check placement. The script should sit before the closing body tag.
Check the console. Open your browser’s developer tools and confirm Intercom responds.
Google Tag Manager: confirm the tag is published, not just saved. For EU or Australian workspaces, confirm the regional api_base.
WordPress: confirm the plugin requirements and that the theme loads a footer.
Single-page app: use the SPA-specific installation, not the plain snippet.

If you tested with a content blocker turned on, switch it off for the test. Blockers can hide chat widgets in general.

Where WebsitePublisher fits

WebsitePublisher is the AI web platform. Your AI assistant (ChatGPT, Claude, Gemini and others) builds and publishes websites and apps through the WebsitePublisher connector. You describe what you want in plain language, and the assistant does the building.

For Intercom, that means the work is a short request rather than a theme edit. A typical flow:

Enable the Messenger in Intercom and copy your workspace snippet.
Tell your assistant where the Messenger should appear and give it the snippet.
Open the page and run the same test you would run anywhere else.

Every change on WebsitePublisher is live immediately. There is no separate deploy or publish step, so you can test the Messenger right after the change. If it needs adjusting, you ask again or edit in the browser, without regenerating the whole page.

If you are still comparing chat options for a small site, our guide to adding an AI chatbot to a small website covers embedding first and layering on from there. If you track conversions, the Google Analytics install guide explains how to verify before you trust the numbers. And if you want chat events to trigger other systems, our webhook setup guide is the place to start.

Want to try it? See the plans, including a free one, or see how the AI web platform builds websites and apps from a conversation.

Our perspective: install the simple version first

We build a platform where an AI assistant makes the change and the change is live at once. That shapes how we think about third-party tools like Intercom.

First, start with the smallest install that works. Visitors and leads is the right first step for most portfolios, landing pages and small business sites. You learn whether people actually use chat before you invest in backend work.

Second, do not skip testing because a change feels easy. When a change is instant, a mistake is also instant. Test the launcher in a private window every time.

Third, treat identity as a security feature. If your site has accounts, the signed-in path is not a nice-to-have. Keep the signing secret on the server and let the assistant handle only the public parts of the code.

Server keeps signing secret from browser

Finally, keep your content and design editable. You should be able to move the Messenger, change a page or switch AI tools without losing the project. That is how we designed WebsitePublisher: the work is not locked inside one AI session.

Quick checklist before you go live

✓ Messenger for web enabled in Intercom

✓ Install type chosen (visitors and leads, or signed-in)

✓ Snippet copied from your own workspace

✓ Code placed before the closing body tag on each target page

✓ Tested in a private browser window

✓ For signed-in users: JWT signed on the server, secret never in the browser, shutdown on logout

✓ For Google Tag Manager: tag published, regional api_base set if needed

FAQ

Do I need a developer to add Intercom to my website?

Not for the visitors and leads path. You copy the snippet from Intercom and place it on your pages. For logged-in users you need backend changes, because your server has to generate a signed JWT. That part usually needs a developer.

Can I add Intercom to a WordPress site without code?

Yes. Intercom documents a plugin-based connection for WordPress. It requires WordPress 4.2.0 or higher, and PHP 5.6 or higher according to Intercom’s troubleshooting page. Logged-in identity may still need extra configuration.

Why is my Intercom Messenger not showing?

The usual causes are a disabled Messenger setting, a wrong workspace ID, code placed outside the page body, or an unpublished Google Tag Manager tag. Check these first, then look at the browser console. Regional EU and Australian workspaces need the correct api_base when you use Google Tag Manager.

Is it safe to pass user emails to the Messenger?

Only with identity verification. Without it, browser-visible fields can be altered. Use a server-signed JWT, keep the secret on the server, and shut down the Messenger on logout so shared browsers do not expose another person’s conversations.