How to Add Live Chat to Your Website (2026 Guide)

Adding live chat to a website in 2026 is genuinely a 5-minute job. The hard part is picking the right tool.

This is a practical 2026 guide. It covers picking a chat tool, installing the snippet, configuring availability, the specific install steps for the four most common site types (WordPress, Webflow, Shopify, custom HTML), and how to verify it's actually working.

Pick a live chat tool

The market has roughly three tiers right now:

Free / freemium: Tawk.to (free forever, branded), HubSpot Chat (free with their CRM), Tidio Free (capped), Agentbot beta (free, no caps during beta). Right pick for SMBs, startups, solo founders.
Mid-market: Tidio paid, Crisp, Olark. Solid products, $25–$50/seat/month, AI usually gated to higher tiers.
Enterprise: Intercom, Drift (now Salesloft), LiveChat. $99+/seat or sales-assisted pricing. Right pick for 50+ person CS orgs.

For 95% of small teams, free or freemium covers what you need. Picking criteria worth caring about:

Does the AI ship in the free tier, or is it a separate paid feature? Tools where AI is a Pro-tier upsell mean you're paying or getting no AI.
Is there per-seat or per-resolution billing? Both punish growth — the bill goes up as you scale.
What's the install pattern? A single <script> tag is the gold standard. Anything requiring an SDK install, plugin, or app marketplace approval is friction.
How does it handle webhooks? If you want to pipe chats into Slack / Notion / your CRM, signed webhooks with a documented payload are the answer. Vendor-specific integration libraries are a red flag.

Once you've picked, the install is identical: paste one line of HTML into your site head.

Paste the snippet

Every modern live chat tool gives you a single <script> tag. Looks roughly like this:

<script src="https://your-chat-tool.com/widget/YOUR_SITE_KEY" defer></script>

The defer attribute is important — it tells the browser to load the script after the page renders, so chat install doesn't slow your site down. If your tool doesn't ship the snippet with defer, add it.

Paste the snippet inside the <head> of your site (or just before </body>). Where exactly that lives depends on your platform — see the next section.

Install on common CMSs

WordPress

Easiest path: the free WPCode plugin (formerly Insert Headers and Footers).

Install WPCode from the WordPress plugin directory.
Settings → WPCode → Header & Footer.
Paste your snippet into the Header box.
Save.

That's it. The snippet now loads on every page, including custom post types. Works on any theme.

If you'd rather not install a plugin, edit your child theme's functions.php:

add_action('wp_head', function() {
  echo '<script src="..." defer></script>';
});

Don't edit a parent theme — theme updates will wipe your change. Always use a child theme.

Webflow

Webflow has native support, no plugin needed.

Project Settings → Custom Code.
Paste your snippet into the Footer Code box.
Save Changes.
Publish your site.

The snippet loads on every Webflow page automatically. If you only want it on specific pages, use page-level Custom Code instead of project-level.

We have a dedicated Webflow integration guide with screenshots.

Shopify

Edit your active theme's theme.liquid.

Shopify Admin → Online Store → Themes → Actions → Edit code.
Open Layout → theme.liquid.
Find the closing </head> tag.
Paste your snippet just before </head>.
Save.

The widget appears on every storefront page. Shopify's checkout pages (Shop Pay etc.) don't load theme.liquid scripts — that's intentional, you don't want chat in checkout anyway.

Shopify integration guide covers the full install + common edge cases.

Custom HTML / static sites / framework apps

Just paste the snippet in your <head>. Whether that's a hand-coded HTML file, an Astro layout, a Next.js layout component, an Eleventy template — same pattern.

For Next.js specifically:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://your-chat-tool.com/widget/YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

strategy="afterInteractive" is Next's equivalent of defer — loads after the page is interactive.

Configure availability

After install, the next decision is what to show visitors when nobody's around.

Three options, roughly:

Always-on AI. The AI is the first responder regardless of time. Human handoffs flag a ticket. Best for solo founders / small teams that can't staff a chat inbox.
Scheduled availability. "Online" during business hours, "offline" otherwise. AI still responds; the badge reflects human presence.
Realtime presence. "Online" only when an agent is actually logged in. AI optional.

For SMBs and small teams, scheduled or always-on is almost always right. Realtime is a remnant from when chat was a human-only channel; it sets visitor expectation that a human is on the other end, which you can't always deliver.

Add it to common CMSs (and verify)

Whichever platform you're on, after pasting the snippet:

Open a new incognito window and visit your site. The widget bubble should appear bottom-right within 1–2 seconds.
Open DevTools → Network and confirm the bootstrap script loads with a 200 status.
Send a test message. It should land in your chat tool's dashboard immediately.
Test the AI. Ask one of the top-5 questions you uploaded to the knowledge base. The reply should reference the right doc.

If the widget doesn't appear:

Check for a Content Security Policy header blocking the script.
Confirm the snippet isn't inside a <noscript> block or commented out.
Check the browser console for CORS / CSP errors.
If you have another chat tool installed (Tawk, Intercom, etc.), disable that one — two widgets fighting for the corner is a known failure mode.

Once it's verified, you're done. The AI handles the volume; humans pick up the residual. Five minutes of work that compounds for as long as the site is live.

If you're looking for a specific recommendation: try Agentbot free during the beta. Same install pattern as everything else above, AI is the first responder by default, no per-seat tax. Full pricing here.