How to add live chat to your website (any stack, ~5 minutes)

Adding live chat to a website used to mean a week of integration work. Today it is a copy-paste job: one script tag, one attribute, done. This guide walks through adding a chat widget to any site (plain HTML, React or Next.js, WordPress, and Shopify), plus a checklist to verify it actually works before your visitors find out it doesn't.

We'll use Chattypie for the examples. That's us, and the snippets below are our real installation code, but the structure applies to almost any modern chat widget.

Why bother with live chat at all

Three practical reasons, no inflated statistics required:

• Email creates a queue; chat creates a conversation. A visitor mid-checkout with a question will often abandon rather than write an email and wait a day. Chat catches them in the moment.
• Chat transcripts compound. Every conversation tells you what confused someone. That's a free, permanent backlog for your docs, your pricing page, and your product.
• It's the cheapest support channel to staff. One agent can hold several chat conversations at once, and an AI agent can absorb the repetitive ones entirely. Phone and email can't structurally do either.

What you need before you start

1. A chat provider account. Chattypie's free plan works for this guide: create a workspace and you'll get a workspace ID.
2. Access to your site's HTML, theme, or component code (anywhere you can add a script tag before </body>).
3. Two minutes per site.

Option 1: Plain HTML, any website

Paste this just before the closing </body> tag, replacing YOUR_WORKSPACE_ID with the ID from your dashboard's Installation page:

<div id="chattypie-widget" data-websiteuid="YOUR_WORKSPACE_ID"></div>
<script src="https://www.chattypie.com/chat-widget.min.js"></script>

That's the whole integration. The script creates a sandboxed iframe for the chat bubble, so the widget's styles and code can't interfere with your page, and your page can't accidentally break the widget.

Option 2: React and Next.js

In a component framework you want the script to load once per mount and clean up after itself:

import { useEffect } from 'react';

function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.chattypie.com/chat-widget.min.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div
      id="chattypie-widget"
      data-websiteuid="YOUR_WORKSPACE_ID"
    />
  );
}

export default ChatWidget;

In Next.js, render this component in your root layout (App Router) or _app (Pages Router) so the widget survives client-side navigation. It watches history changes on its own, so single-page navigation won't duplicate it.

Option 3: WordPress

Add this to your theme's functions.php, or to a small custom plugin, which survives theme updates:

function chattypie_widget_script() {
    echo '<div id="chattypie-widget" data-websiteuid="YOUR_WORKSPACE_ID"></div>';
    echo '<script src="https://www.chattypie.com/chat-widget.min.js"></script>';
}
add_action('wp_footer', 'chattypie_widget_script');

Option 4: Shopify

In your Shopify admin: Online Store, then Themes, then Edit code, then theme.liquid. Paste the plain-HTML snippet from Option 1 just before </body>. Save, and the widget appears storewide, including on product and checkout-adjacent pages where questions actually happen. Stores have their own playbook beyond the install (proactive triggers, order questions, sizing answers); we cover it in the Shopify live chat guide.

Verify it works: a 2-minute checklist

1. Open your site in a private/incognito window. The chat bubble should appear within a second or two of page load.
2. Send a test message as a visitor. It should appear in your inbox in real time, no refresh.
3. Reply from the inbox. The reply should stream back into the widget instantly.
4. Click through 2 or 3 pages (especially on single-page apps): the conversation should persist, not reset.
5. Check on a phone. The widget should open full-screen and the keyboard shouldn't cover the composer.

If the bubble doesn't appear: check the browser console for a blocked script (a Content-Security-Policy on your site may need to allow the widget host), and confirm data-websiteuid exactly matches your workspace ID.

After it's live: three upgrades worth doing in week one

• Write 5 to 10 help articles. A knowledge base answers the questions you're tired of typing, and it feeds your AI agent.
• Turn on an AI agent for the repetitive tier. Chattypie's AI agent answers from your help content and hands off to a human when it's unsure. It's included in paid plans rather than billed per resolution.
• Set business hours and an away message. Chat without expectations management creates frustration; "we reply within a few hours" beats silence. Speed matters more on chat than any other channel; here is how teams cut first response time without hiring.
• Save your first canned responses. The questions chat surfaces repeat quickly; these fifteen templates are a head start.

FAQ

Will a chat widget slow my site down?

A well-built one loads asynchronously after your content and lives in an iframe. The snippet above uses async loading precisely so it never blocks your page render. Test your Core Web Vitals before and after if you want proof rather than promises.

Do I need different snippets for different pages?

No. One snippet sitewide. You can hide the widget on specific pages with a display rule in the dashboard rather than maintaining separate embeds.

Can I try it without a credit card?

Yes. Chattypie's free plan doesn't expire and doesn't ask for a card. Install it, talk to a few visitors, and decide with real conversations rather than a feature list.