How to Add Live Chat to a Website (and What to Decide First)
Adding live chat to a website takes about five minutes. Deciding what happens after someone types into it takes rather longer, and that is the part that determines whether it works. This page covers both: the install on every common platform, and the decisions that stop a chat widget becoming a box that quietly collects messages nobody answers.
The short version
- Decide whether you want live chat (a person replies) or an AI chatbot (it answers on its own). They are different products.
- Pick a tool and get its JavaScript snippet.
- Paste the snippet before the closing
</body>tag, or into your platform’s code injection area. - Test on a phone, logged out.
- Decide your out-of-hours behaviour before you go live, not after.
First: live chat or a chatbot?
The words get used interchangeably and they should not be. The difference is who answers.
| Live chat | AI chatbot | |
|---|---|---|
| Who replies | A person, in real time | The software, from your site content |
| Available | When someone is at a desk | Always |
| Cost driver | Your time, or an agent seat | A subscription |
| Handles | Anything, including judgement calls | Repetitive, factual questions |
| Fails when | Nobody is available | The answer is not published anywhere |
| Realistic for a small team | Only in working hours | Yes, that is the point |
Most small businesses ask for live chat and want a chatbot. The reason is in the second row: the questions arrive at eight in the evening and on Sunday afternoon, which is precisely when nobody is going to reply. A live chat widget with nobody behind it is worse than no widget, because it advertises availability you do not have.
If you have a team who can genuinely watch an inbox during the day, live chat is excellent and warmer than any bot. If you are three people and a phone, an AI chatbot that answers from your site content is the honest option.
How to add it, by platform
Nearly every chat tool gives you one line of JavaScript. Where you paste it is the only thing that changes.
WordPress
Either use a plugin that adds custom code to your header or footer, or add the snippet to your theme via a child theme so a theme update does not remove it. Some tools also publish a WordPress plugin. Full detail in AI chatbot for WordPress.
Shopify
Online Store → Themes → Edit code → theme.liquid, and paste before </body>. Re-add it if you switch or update themes. See AI chatbot for Shopify.
Squarespace
Settings → Advanced → Code Injection → Footer. Needs a Business plan or higher. See AI chatbot for Squarespace.
Wix
Settings → Custom Code, under Development & integrations. Needs a published site with a connected domain. See AI chatbot for Wix.
A hand-built or custom site
Paste the snippet immediately before the closing </body> tag in your site’s shared layout or footer template, so it appears on every page. If you are on a framework, put it in the root layout rather than in each page.
Webflow, Ghost, HubSpot CMS and others
All have a custom code or footer scripts area in site settings. The rule is the same: site-wide, before the closing body tag.
Test it properly
Three checks, and the second is the one people skip.
- Logged out, in a private window. Several platforms hide injected code while you are editing, so testing while logged in tells you nothing.
- On a real phone. Not a narrow desktop window. Check the bubble does not sit on top of your “Buy”, “Book” or “Call” button, and that it does not collide with your cookie banner.
- On more than one page type. Home, a product or service page, and checkout or contact. Templates differ.
The decisions that actually matter
Installing is trivial. These are not.
What happens out of hours
Pick one and be honest about it. Either the widget disappears outside working hours, or it says plainly when you will reply, or an AI answers. What you must not do is show a live chat box at midnight that implies someone is there.
Whether it opens by itself
Proactive messages lift engagement and irritate people. If you use them: delay by at least twenty or thirty seconds, trigger on a signal of intent rather than on arrival, and never on mobile where the popup covers the screen. If in doubt, do not.
What you collect, and why
Asking for an email before answering a question loses most people. Asking after you have helped them converts much better. And under UK GDPR, anything you collect is personal data: you need a lawful basis, a privacy notice that mentions chat, a retention position and a processor agreement with your chat provider. The ICO’s guidance is the source to read rather than a vendor’s summary of it.
Whether it is usable by everyone
A chat widget should be reachable by keyboard, announce itself to a screen reader, and not trap focus once opened. Under UK equality law this is not optional, and for public sector sites the accessibility regulations apply directly. Test it with the tab key before you go live — if you cannot reach and close it without a mouse, neither can a lot of your visitors.
What happens when it cannot help
Every chat, human or AI, hits a question it cannot answer. Decide the exit now: a contact form, a phone number, a promise to email back. An unanswered question that ends in silence is the single worst outcome, and it is the default if you do not choose otherwise.
Getting the answers right, before the tool
If you go the AI route, the tool is not the variable. Your content is. An AI chatbot answering from your website can only tell people what your website says — so the delivery page you never wrote is a question your bot will never answer.
Two things to do first, both free:
- Run our answerability check on your site. It reads your public pages and reports which common customer questions you have actually covered.
- Check a crawler can find those pages at all, using the sitemap extractor. A page missing from your sitemap is a page the AI has never read. See how to check a sitemap.
An hour spent writing the delivery, returns and pricing pages properly will do more for your chat results than any amount of tuning inside a tool.
What it costs
Free tiers exist and work at low volume, usually with the provider’s branding on the widget. Paid tools for a small business generally land between £20 and £100 a month. Enterprise suites price per agent seat plus per resolution and get expensive quickly.
The pricing model matters more than the headline number. Per-seat pricing is predictable. Per-resolution pricing scales with your traffic, which is fine until a good month. We compare the models in what a chatbot actually costs.
Holp is website chat that answers from your own content, installs by snippet, and starts at £25 a month. See pricing.
Frequently asked questions
Where exactly does the chat code go?
Immediately before the closing </body> tag, site-wide. On hosted platforms, use the footer or body-end option in the custom code area rather than the header.
Will live chat slow my website down?
A well-built widget loads asynchronously and has little effect on the page a visitor sees. Measure your speed before and after so you have a number rather than an impression.
Do I need to be online for live chat to work?
For live chat, yes — that is the definition. If you cannot staff it, use an AI chatbot, or set the widget to hide outside your hours.
Can I add live chat to a free website plan?
Often not. Squarespace requires a Business plan for code injection, and Wix requires a connected domain. Check your plan before subscribing to a chat tool.
Does live chat need a cookie banner update?
If the widget sets cookies beyond what is strictly necessary, it belongs in your cookie notice and, depending on purpose, behind consent. Check what your provider sets rather than assuming.
How many chat widgets should a site have?
One. If your platform has a built-in chat and you add another, turn the built-in one off — two bubbles in the same corner splits your conversations across two inboxes.