How to add live chat to your website in 10 minutes

Adding live chat to a website is one of the few support projects where the technical part genuinely is trivial. Every provider ships the same thing: a single line of JavaScript you paste into your site, or a plugin that pastes it for you. Ten minutes is not marketing — it is roughly how long it takes to copy a snippet, put it in your layout template, and send yourself a test message.

What is not trivial is everything that decides whether the widget helps anyone. A chat bubble on a site where nobody is watching the inbox is worse than no chat bubble: you promised a fast answer and did not deliver one. So this guide covers the install first, vendor-neutrally, and then the half hour afterwards that actually matters.

Add live chat to your website: the 10-minute install

This sequence works with essentially any live chat provider, because they all distribute the widget the same way. Nothing here is specific to one vendor.

1. Create an account with your chat provider and open the install or embed screen. You will be given a snippet that contains an ID identifying your workspace or website — that ID is what ties incoming chats to your account.
2. Copy the snippet. It is normally a single script tag loaded asynchronously, which means the browser does not wait for it before rendering your page.
3. Open the template that renders on every page of your site — the shared layout, footer include, or base template. Paste the snippet immediately before the closing </body> tag. Do not paste it into individual pages one by one; you will forget one, and the widget will vanish on the page where a visitor most needed it.
4. If your site runs on a CMS with an official plugin or app, install that instead of editing templates. It does the same job and survives theme updates.
5. Save, deploy, and open your site in a private browsing window. The chat launcher should appear — usually bottom-right — within a second or two.
6. Send a test message from the site. Confirm it arrives in the agent inbox, then reply from the inbox and confirm the reply appears in the widget. This round trip is the only proof that the install worked; a visible bubble is not.
7. Set notifications. Decide who gets an email, push or desktop alert when a new chat arrives, and test that too. An unwatched inbox is the single most common way a live chat rollout fails in week one.

Script tag or plugin: which install route to pick

Both routes load exactly the same widget. The difference is who owns the code, and what happens to it during the next update or redesign.

WordPress: use the plugin, not footer.php

On WordPress the tempting move is to paste the snippet into your theme's footer template. Do not: the next theme update overwrites it, and the widget disappears without anyone noticing. Use a child theme, a header-and-footer snippet plugin, or your provider's own plugin. Ours is published on the WordPress.org plugin directory: install, paste the workspace ID, and the widget renders on the front end with no template editing at all.

If the WordPress site is a WooCommerce store, the install is the same but the setup is not — a store widget should be able to look up order status, and that connection has its own rules about identity checks and read-only access. That is covered in adding AI live chat to WooCommerce, and the connection itself in the WooCommerce integration.

What to set up before you make the widget visible

The install gives you a chat bubble. These five settings are what turn it into a support channel your team can actually sustain.

1. Something to answer from

Whether a human or an AI answers first, the quality ceiling is set by how much of your knowledge is written down. Export a month of email tickets, sort by topic, and write one short help-center article for each of the top twenty. Short and specific beats long and general — both for the agent scanning it and for an AI retrieving from it. Include the awkward topics you have been avoiding: a parcel marked delivered but never received, how long a refund really takes, what your policy is on an item that has been used.

2. Office hours and an honest offline state

Decide when the widget claims to be live, and what happens outside those hours. Two honest options exist: keep answering (an AI agent covers nights and weekends), or switch to a message form that collects the question and an email address and says plainly when you will reply. What you must not do is show an open chat window at 23:00 that nobody reads until Monday. In CustomerEagle these are workspace-level business-hours settings — start and end time, days, timezone, and the message shown when you are closed.

3. A handover rule, written down in advance

Whether the first responder is AI or a junior agent, decide now what must be escalated immediately: complaints, anything mentioning a chargeback or legal action, anything where the customer has already asked twice, and anything about money moving. Route those to a person with the full conversation attached. An early handover costs one agent reply. A confidently wrong answer to an already-annoyed customer costs the relationship.

4. Only the fields you truly need

A pre-chat form asking for name, email, company and order number before a visitor may type anything converts far worse than a blank message box. If you need an email address to reply asynchronously, ask for it at the point where it becomes necessary — when the conversation is going to outlive the session — not as a toll gate.

5. Say what the visitor is talking to

If an AI answers first, label it as an AI in the widget and make the route to a human obvious. This is both an EU transparency expectation and simply better UX: people are fine talking to a bot about a tracking number, and they resent discovering afterwards that the sympathetic reply about their broken order was automated.

How AI changes the calculus

Classic live chat was a staffing decision disguised as a software decision. The widget cost little; the coverage cost a lot. You either staffed the hours you promised, or you quietly let the median response time drift into hours and lost the point of live chat entirely. That is why so many small teams installed a widget, ran it for a month, and hid it again.

An AI-first widget inverts the order of operations. The AI answers first from your own documented content, with a citation to the article it used, and a human takes over on escalation, on sensitive topics, or on request. Coverage stops being a rota problem: the repetitive questions — shipping times, returns windows, opening hours, where an order is — get an answer at 02:00 on a Sunday, and your team sees the conversations that need judgement.

The catch is that this only works to the extent that your content covers the questions, which is why the knowledge-base step above is not optional. It is also why you should judge the result on how many conversations were resolved with zero human replies, not on how many the bot merely replied to — our definition is written out on how we measure AI resolutions, and it is a fair standard to hold any vendor to.

Common mistakes

• Launching the widget on every page at once. Start on the pages where questions actually block a purchase or a signup — pricing, checkout, a specific product category — and expand once you know the volume.
• Promising a response time you cannot keep. "Typically replies in a few minutes" is a contract. If you cannot keep it at 16:45 on a Friday, do not display it.
• Treating chat like email. A chat reply that arrives in four hours is a bad email, not a good chat. If your realistic answer time is hours, offer a message form instead and set the expectation correctly.
• Skipping the mobile check. A large share of visitors will see the widget on a phone, where a launcher that covers a sticky checkout button or a cookie banner is an actual conversion problem.
• Turning on every proactive trigger. One well-targeted invitation on a page where visitors get stuck outperforms a widget that pops open on every page load and gets dismissed on reflex.
• Never reading the transcripts. Each poor answer maps to a missing or unclear article, and fixing content is what moves the numbers. Prompt-tweaking rarely is.

The first two weeks

Give yourself a simple review loop: every morning, read yesterday's conversations — all of them, not a sample — and turn each one that went badly into either a new help-center article or a routing rule. Two weeks of that does more for your resolution share than any configuration screen. After that, the widget mostly runs itself, and the remaining work is keeping the content current as your policies change.

If you want the AI-first version of this — the widget answers from your own help center, cites what it used, and hands over to your inbox when it should — start with the live chat overview and check what each plan includes on pricing. The install is still the same ten minutes; the difference is what happens after the visitor types the first message.