To embed a live chat widget, create an account with a live chat provider, customize the widget, then paste the provider's JavaScript snippet before the closing </body>
On WordPress, Shopify, or Google Tag Manager you can usually install a plugin or tag instead of editing code. Then decide who answers first (a human, a bot, or an AI agent), set your handoff rules, and test on desktop and mobile before you announce it.
Quick steps
- Choose your provider and decide who answers chats first.
- Customize the widget: colors, launcher, greeting, and office hours.
- Pick an install method: code snippet, plugin, tag manager, or framework package.
- Paste the snippet on every page (or install the plugin) and publish.
- Identify signed-in users so conversations carry account context, and secure it.
- Turn on your AI agent and set handoff rules to your team.
- Test on desktop and mobile, then go live.
The install takes minutes. Steps 1, 5, and 6 take thought: they decide whether customers get a good experience or your team ends up with a second inbox nobody watches.
What a live chat widget embed actually does
A chat widget is the launcher and message window on your site. Embedding it usually adds two things to your pages:
- A settings object that tells the widget which account (workspace) it belongs to and, optionally, who the current user is.
- A loader script that fetches the widget asynchronously from the provider, so it doesn't block your page from rendering.
When a visitor opens the widget, messages travel to the provider's servers and land in the inbox your team (and any AI agent) works from. The embed is the easy part. The experience depends on what's connected behind it.
New to the channel? Start with what live chat is and how it works.
Before you embed: five decisions to make
Decide five things before you paste any code: who answers first, whether you identify signed-in users, where the widget appears, what happens after hours, and where handoffs go.
| Decision | Options | Why it matters |
|---|---|---|
| Who answers first? | Humans only, a rule-based chatbot, or an AI agent with human handoff | Determines coverage outside business hours and how long customers wait. See chatbot vs live chat. |
| Visitors only, or signed-in users too? | Anonymous visitors and leads, or identified users | Identified users bring name, email, and history into the conversation; anonymous visitors are tracked by a browser cookie. |
| Where should it appear? | Whole site, specific pages, inside your app, mobile apps | Support pages and in-app help need it most; you may hide it on checkout or legal pages. |
| What happens outside business hours? | AI agent answers, offline form, expected reply time | Customers should know who's answering and when to expect a human. |
| Where do handoffs go? | Same helpdesk inbox, separate chat tool, email | A separate tool means your team watches two inboxes and context gets lost. |
How to embed a live chat widget: step by step
Step 1: Create your account and find your install code
Your provider keeps the install code in its settings, usually under a label like Install, Installation, Channels, or Chat widget. The snippet includes your unique account or workspace ID.
Step 2: Customize before you install
Set the widget's color, launcher position, greeting message, team avatars, and office hours. Most providers preview changes live, so do this before customers can see the widget.
Step 3: Choose an install method
Use a code snippet if you can edit your page templates, a plugin or app on WordPress or Shopify, a framework package for single-page apps, and an SDK for native mobile apps.
| Install method | Best for | How it works | Watch out for |
|---|---|---|---|
| HTML/JavaScript snippet | Any site where you can edit page templates | Paste the snippet before the closing tag on every page | Missing the account ID is the most common reason the widget doesn't appear |
| CMS plugin (e.g., WordPress) | Sites managed in a CMS | Install the provider's plugin and connect your account | Keep the plugin updated; check it supports your WordPress version |
| Ecommerce app (e.g., Shopify) | Online stores | Install the provider's app from its app store | Enable customer accounts if you want shoppers identified |
| Google Tag Manager | Teams that manage scripts centrally | Add the provider's tag and trigger it on all pages | Make sure consent and tag-firing rules don't block chat |
| Framework package (React, Angular, Vue, Ember) | Single-page apps | Install via npm and boot/update the widget on route changes | SPAs don't reload pages, so you must call an update on navigation |
| Mobile SDK | iOS and Android apps | Add the provider's SDK to your app | Plan for push notifications and user identity in-app |
| Site builders (Wix, Squarespace, Webflow, etc.) | No-code sites | Paste the snippet into the builder's custom-code or code-injection setting | Some builders restrict custom code on lower-tier plans |
Step 4: Add the code and publish
Paste the snippet on every page where you want chat (or set your plugin or tag to fire site-wide), then publish. Load the page in a private browser window to confirm the launcher appears.
Step 5: Identify signed-in users, and secure it
If customers log in to your site or app, pass their user ID, email, and name to the widget so your team sees who they're talking to and the conversation history follows them across devices. Then secure that identity (most providers use identity verification or signed tokens such as JWTs) so nobody can impersonate another user by editing the page.
Step 6: Turn on your AI agent and set handoff rules
Decide which conversations the AI agent should handle, what knowledge it draws on, how it should sound, and when it should hand off to a person. The handoff should go to the same inbox your team already uses, with the full transcript attached.
Step 7: Test, then go live
Run the pre-launch checklist below on desktop and mobile before you tell customers chat is live.
Example: embedding the Intercom Messenger with Fin
Live chat in Intercom runs through Messenger, "the AI-powered chat built natively into Intercom," with Fin AI Agent (Fin) answering first. The steps below follow the Intercom help center and developer documentation.
1. Open the install flow. In the new install experience, go to Settings > Channels > Messenger Live Chat > Overview, find the Website card, and select Install on website.
2. Choose your install type. There are two:
- Visitors & leads (quickest to install): conversations aren't linked to user details; you can identify signed-in users later.
- Signed-in users, visitors & leads: conversations from signed-in users include their details, which requires frontend and backend changes.
3. Pick a method. Options include a code snippet, React, Angular, Vue, or Ember, or an integration with WordPress, Google Tag Manager, Shopify, or Segment.
4. Paste the snippet. For a standard multi-page website serving anonymous visitors, the developer docs provide this snippet to place before the closing
</body>apps/===================================================
<script> const APP_ID = "Your-Workspace-ID" // IMPORTANT: Replace with your workspace ID window.intercomSettings = { api_base: "https://api-iam.intercom.io", app_id: APP_ID, };</script><script> (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){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(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
===================================================
Four details from the docs:
- The snippet defaults to the US data host. Workspaces hosted in the EU or Australia use or
https://api-iam.eu.intercom.ioas thehttps://api-iam.au.intercom.io.api_base - For signed-in users, add ,
user_id,name, andemailtocreated_at, and secure the Messenger with JSON web tokens (JWTs) generated on your server.intercomSettings - For single-page apps, boot the Messenger once and call when the view or URL changes.
window.Intercom("update") - When a user logs out, call to end the session; on shared devices, the docs also recommend clearing cookies with the
Intercom('shutdown')prefix.intercom-
5. Test the install. Click Test your installation in the install flow. Once it passes, the install flow confirms that "Visitors can now start conversations from your site," and suggests customizing Messenger's colors, launcher, and welcome message.
6. Turn on Fin. Per the Messenger connector page, you go to Fin AI Agent in your workspace, turn Fin on for the Messenger channel, then "choose which conversations Fin should handle." The live chat page sums up setup as: "Install Messenger on your website or mobile app, connect it to your help center, and set your tone of voice. Fin starts resolving live chat conversations as soon as it has content to draw on."
7. Confirm the handoff. Because Fin and your team work from the same Intercom Inbox, when Fin hands a conversation to a teammate "the whole history goes with it: what the customer said, what Fin did and why." Send a test question Fin shouldn't answer, ask for a human, and check that the conversation lands in the right team inbox with the transcript attached.
Pre-launch testing checklist
Before launch, test page coverage, mobile layout, page speed, identity, security, AI answers, the handoff, after-hours behavior, and logout.
| Check | How to test | Pass criteria |
|---|---|---|
| Widget loads on every intended page | Visit key templates (home, pricing, product, help, app) in a private window | Launcher appears; no console errors |
| Mobile experience | Test on iOS and Android browsers (and your apps, if applicable) | Widget doesn't cover key buttons; keyboard doesn't hide the input |
| Page speed | Compare page load before and after install | Widget loads asynchronously after main content |
| Identity | Log in as a test user and start a chat | Agent sees the correct name, email, and history |
| Security | Try to change user attributes from the browser console | Identity verification/JWT rejects tampering |
| AI answers | Ask five real customer questions from your inbox | Answers are accurate, cite approved content, and match your tone |
| Handoff | Ask for a human; ask something outside your content | Conversation reaches the right team with full context |
| After hours | Test outside office hours | Customer sees who's answering and when to expect a human |
| Logout | Log out and start a new chat | Previous user's history isn't visible |
Troubleshooting: why isn't my chat widget showing?
A missing widget usually comes down to one of five causes:
- The account ID is missing or wrong. The Intercom developer docs call forgetting the App ID "one of the most common issues"; there's no error message, and the Messenger simply doesn't show.
- Messenger traffic isn't enabled. The docs note that requests fail until the Messenger for web (and user traffic) is enabled in settings.
- Browser blockers. Ad blockers and private browsing can block chat scripts; the install guide lists these, along with public suffix domains, as common causes.
- Single-page app routing. If the widget appears on first load but doesn't update between pages, you need an update call on route change.
- Tag manager or consent rules. Check that your tag fires on all pages and that cookie-consent tooling isn't blocking it.
How much does it cost to add live chat?
The embed itself is free with almost every provider. You pay for the software behind it: agent seats, AI usage, and add-ons. Intercom combines seats and outcomes. The pricing page lists a free trial with no credit card required, plans from $29 per seat per month (Essential, with a new-customer price of $19 shown at the time of writing), and Fin AI Agent from $0.99 per outcome.
For published prices from other providers side by side, see live chat pricing.
Still choosing a tool? Start with the best live chat software.
Replacing one? Compare live chat alternatives.
Frequently asked questions
How do I add a live chat widget to my website?
Sign up for a live chat provider, customize the widget, then paste its JavaScript snippet before the closing
</body>Do I need to know how to code to embed live chat?
No. Most providers offer copy-paste snippets and plugins. You'll only need a developer to identify signed-in users securely, install in a single-page app, or add chat to a mobile app.
Does a live chat widget slow down my website?
A well-built widget loads asynchronously, after your main content, so the impact should be small. Measure page speed before and after you install, and only load the widget where it's useful.
How do I add live chat to WordPress or Shopify?
Install the provider's WordPress plugin or Shopify app and connect your account. The Intercom developer docs list WordPress (v4.2.0 or higher), Shopify, Google Tag Manager, and Segment as supported install methods.
What's the difference between a chat widget and a chatbot?
The widget is the chat window on your site. A chatbot is automation that replies inside it. An AI agent goes further and resolves questions from your knowledge, then hands off to a person. See chatbot vs live chat.
Can I embed live chat in an iframe?
Some providers support it, but most recommend the standard snippet so the widget can float over your page, track navigation, and identify users. Check your provider's documentation before using an iframe.
Can I add live chat to my website for free?
Usually, yes. Several providers offer free plans or free trials. Free plans typically limit seats, history, AI, or branding.