How to add live chat to your website (and not regret it)

Adding live chat to your website is mechanically trivial: you paste one script tag before </body>, and a chat bubble appears. Ten minutes, maybe fifteen if your CMS fights you.

The regret comes from everything around that script tag. A chat widget is a promise — "ask us anything, right now" — and an unstaffed promise is worse than no promise at all. Visitors who message an empty chat and hear nothing don't think "they must be busy". They think "this company doesn't answer".

So this guide covers the install, but it starts where you should: with the decision about who's actually going to answer.

The decision before the install: can you staff it?

Live chat only works if someone (or something) responds fast. Industry benchmarks put good live chat first-response times at one to two minutes — and visitor patience drops off sharply after that. Before you add the widget, answer three questions honestly:

• What hours can a human actually be online? Not "we'll check it when we can" — actual coverage. If the answer is "roughly 10am to 4pm on weekdays when nobody's in a meeting", that's your real service window.
• What happens outside that window? Traffic doesn't keep office hours. For most sites, a large share of visits — often the majority, once you count evenings, weekends, and other time zones — arrives when nobody's watching the inbox.
• Who owns the queue? Chat that's everyone's job is nobody's job. Someone needs to be accountable for response time, even on a two-person team.

For years, the honest conclusion for small teams was "you can't staff it, so don't add it". AI-first chat changed that answer. A modern AI agent trained on your website and docs answers instantly, around the clock, and hands the hard conversations to you — which means the staffing question becomes "who handles the escalations?" instead of "who sits in the chat seat all day?". That's a much easier bar to clear. We've written a fuller comparison of the two models in AI chatbot vs. live chat.

If you conclude you can't cover chat at all — no humans, no AI — skip the widget and put a good contact form and a clear FAQ page up instead. That's a legitimate choice, and it beats a dead chat bubble.

Pick your staffing model first, then your tool

Your staffing model determines which tools are even candidates, so decide it before you go shopping.

Two notes on the right-hand column. First, "AI-first" doesn't mean "AI-only" — the whole model depends on a clean handoff to humans when the customer asks for one or the AI is out of its depth. Second, the quality bar is grounding: the AI should answer from your actual content and admit when it doesn't know, not improvise. An AI that guesses will generate regret faster than an empty chat seat.

If you're comparing specific tools, we've done a full roundup in best live chat software in 2026. The short version: classic live chat tools (Crisp, Tawk.to, LiveChat) are great when you have humans to seat; AI-first platforms make more sense when you don't.

Installing the widget: the script tag

Nearly every chat product installs the same way — a small JavaScript snippet pasted into your site's HTML, just before the closing </body> tag:

<!-- Example chat widget install -->
<script src="https://widget.example.com/widget.js"
        data-workspace="your-workspace-id" async></script>
</body>

Where that goes depends on your stack:

• Hand-rolled HTML / static site: paste it into your base layout or template so it appears on every page.
• WordPress: add it via your theme's footer template, a code-injection plugin, or the theme customizer's footer scripts field.
• Webflow, Framer, Squarespace, Wix: all have a "custom code" or "footer code" setting in site settings — paste it there.
• Next.js / React apps: load it with your framework's script component (e.g. Next's <Script strategy="lazyOnload">) rather than a raw tag, so it doesn't block hydration.
• Google Tag Manager: works in a pinch, but a directly embedded tag is more reliable and slightly faster.

Some platforms skip the snippet entirely with a native install. Shopify is the big one: chat products with a Shopify app (Asks included) install from the App Store like any other app — the widget is injected as an app embed, no theme editing, and it survives theme changes. If you're on a platform with a native integration, prefer it; it removes the "who edited the theme file?" class of problems.

Verify the install by loading your site in a private window and confirming the bubble appears — then send yourself a test message and confirm it lands wherever your team will actually see it.

Set up the widget so it doesn't look bolted on

The default widget config is nobody's brand. Fifteen minutes of setup makes the difference between "part of the site" and "third-party sticker":

• Theme and color. Match your brand's palette — most widgets let you set an accent color, and the good ones handle light/dark themes properly. (Asks auto-detects your brand theme from your site during onboarding, which is one less thing to fiddle with.) Whatever tool you use, check contrast: a launcher that vanishes into your background helps no one.
• Position and offset. Bottom-right is the convention and conventions are good UX. The exception: if your site has a sticky element there (cookie banner, cart button, "back to top"), move the widget or adjust its offset. On mobile, check that the launcher doesn't cover your primary CTA.
• Greeting. Write it like a person: "Hi — ask us anything about sizing, shipping, or returns" beats "Welcome! How may we assist you today?". A greeting that names what you're good at answering also quietly sets scope.
• Expectation-setting. If humans reply only during business hours, say so in the widget. If an AI answers first, most jurisdictions' consumer-protection norms (and basic decency) say don't pretend it's a person — label it, and make the path to a human obvious.
• Pre-chat friction: less is more. Requiring name + email + department + order number before anyone can type is how you turn chat volume into bounce rate. Collect details in the conversation, not as a toll gate. AI agents are good at this — asking for an email conversationally when it's actually needed.

Don't tank your Core Web Vitals

Chat widgets are famous for hurting page performance — some popular ones ship hundreds of kilobytes of JavaScript before the visitor has typed anything. Since Google uses Core Web Vitals as a ranking signal, a careless install can quietly cost you the organic traffic the chat was supposed to convert.

The checklist:

• Load the script async or deferred so it never blocks page rendering. Every reputable widget's snippet does this by default — but verify, especially if someone pasted a modified version years ago.
• Check the payload. Run your page through PageSpeed Insights before and after installing. If the widget adds more than a couple hundred milliseconds to load metrics, consider a tool with a lighter embed, or lazy-load the widget on first scroll or interaction.
• Watch layout shift. The launcher should render in a fixed position without pushing content around. If installing chat moved your CLS score, something's wrong with how it mounts.
• One widget, ever. Old chat snippets have a way of surviving in theme files and tag managers. Two chat bubbles on one page happens more often than anyone would like to admit.

Measure whether it's actually working

A chat widget isn't a success because it exists. Decide up front what it's for — usually some mix of "answer support questions faster" and "catch buyers before they bounce" — and measure against that:

• First response time and resolution time. The core service metrics. If humans staff chat, watch these weekly; if AI answers first, first-response time should be near zero and the interesting number moves to resolution.
• Automation rate (if AI-first): the share of conversations resolved without a human. Track it alongside customer ratings, not instead of them — a high automation rate with unhappy customers is a bug, not a win.
• Coverage: what share of conversations arrive outside business hours, and what happens to them. This number is usually the single best justification for the AI-first model.
• Conversation topics: what people actually ask. Repetitive questions are content gaps — fix the FAQ, the product page, or the AI's knowledge base and watch the volume drop.
• Missed chats: if humans-only, count conversations that got no reply in time. If that number is meaningful, revisit the staffing decision above.

Most chat platforms report these out of the box; the discipline is looking at them. A monthly fifteen-minute review is plenty. And chat metrics feed a bigger picture — see customer service automation for how teams decide what to automate versus keep human.

The short version

Adding live chat to your website: decide who answers (for small teams, AI-first with human handoff is usually the only honest way to promise fast replies), pick a tool that fits that model, paste the snippet before </body> or use a native install like a Shopify app, spend fifteen minutes on theme, position, and greeting, load it async so your Core Web Vitals survive, and review the numbers monthly.

If the AI-first route is where you land, that's the model Asks was built for: an AI agent trained on your website and docs that answers instantly in a widget matched to your brand, with your team picking up escalations in one inbox. There's a 7-day free trial if you want to see it on your own site.

Frequently asked questions

How do I add live chat to my website for free?

Several live chat tools have free tiers (Tawk.to is entirely free; Crisp and Tidio have free plans with limits), and installation is the same one-script-tag process. The catch is never the software — it's staffing. A free widget with nobody answering it hurts more than it helps, so budget the human time before the tool.

Where do I paste the live chat code on my website?

Just before the closing </body> tag, so it loads after your page content. On website builders (WordPress, Webflow, Squarespace, Wix, Shopify), look for a "custom code", "footer scripts", or app-embed setting instead of editing HTML directly. Make sure it's added site-wide, not to a single page.

Does a chat widget slow down your website?

It can — some widgets ship heavy JavaScript bundles. Loaded properly (async, non-blocking), a well-built widget adds little to perceived load time. Test your Core Web Vitals with PageSpeed Insights before and after installing, and prefer widgets with lightweight embeds if the difference is measurable.

Should the chatbot or a human answer first?

For most small teams, AI answers first and humans handle escalations. The AI resolves routine questions instantly at any hour; conversations that need judgment get handed to your team with full context. Humans-first only makes sense when volume is low and conversations are consistently high-stakes — five-figure B2B deals, not "where is my order?".