How to Add Live Chat to a Website

Adding live chat to a website takes about five minutes. Deciding who answers once somebody 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 reads.

First: live chat, an AI chatbot, or both?

The terms live chat and chatbot get used interchangeably even though they describe different things, and the difference comes down to who answers. You don’t necessarily have to choose between them.

Human live chat is excellent when somebody is genuinely there to answer, and it is warmer than any bot. The difficulty is that website questions don’t restrict themselves to office hours, and a chat box with nobody behind it advertises an availability you don’t have.

That doesn’t mean you have to replace live chat with AI. A setup that suits a lot of businesses is to run a live chat service such as Crisp while the team is working, then let an AI assistant take over outside those hours, so visitors can still ask something on a Sunday afternoon without your widget suggesting that a member of staff is sitting there waiting to reply.

Holp can be configured around operating hours, so it can form the out-of-hours part of that setup. It doesn’t provide human live chat itself; instead it answers questions using the knowledge you give it and, when somebody needs a person, collects their details and passes the enquiry to your team by email.

Can you use live chat and an AI chatbot together?

Yes, and for a lot of small teams it is the arrangement that makes the most sense, because it keeps the human conversations you are already good at while covering the hours you can’t staff.

• During your staffed hours, the visitor reaches your live chat service and a person replies.
• Outside those hours, an AI assistant answers the factual questions straight away and passes anything needing a person to your team by email.

Two things decide whether it works. The first is that only one widget should be visible at a time, since two bubbles in the same corner confuse visitors and split conversations across two systems. The second is the handover, because whatever the AI can’t answer has to arrive somewhere a person actually looks, with enough of the conversation attached that your reply doesn’t start from nothing.

If you are already running Crisp, Intercom or something similar and it works well during the day, there is no reason to replace it. The gap worth filling is the one that opens when your team goes home.

How to add live chat to your website, by platform

Copy the installation code from your chat provider and add it using the method that provider recommends, which is usually a site-wide custom code area, a plugin or an app integration. Placement isn’t the same everywhere: some providers ask for their script in the <head> and others in the footer, so follow their current instructions rather than a rule of thumb.

WordPress

Use the provider’s own plugin if it publishes one. Failing that, add the snippet through a plugin that inserts site-wide code, or through a child theme, so a theme update doesn’t remove it; what you want to avoid is editing a parent theme directly. Full detail in AI chatbot for WordPress.

Shopify

Use the provider’s Shopify app or app embed where one exists, since that survives a theme change. If manual installation is the only route, follow the provider’s current instructions for theme.liquid and check the widget again after switching or updating a theme. See AI chatbot for Shopify.

Squarespace

Settings → Advanced → Code Injection, then add the script to whichever site-wide field your provider asks for. Code Injection is currently available on the Core, Plus and Advanced plans, along with some legacy billing plans, so check Squarespace’s current plan requirements before you subscribe to a chat provider. See AI chatbot for Squarespace.

Wix

Settings → Custom Code, under Development & integrations. Wix currently requires a published site with a connected domain before custom code will run. See AI chatbot for Wix.

Webflow

Site settings → Custom code, which gives you both a head and a footer area, so use whichever your provider recommends. Publish the site afterwards, because custom code doesn’t take effect until you do.

A hand-built or custom site

Add the snippet to your shared layout or footer template so it appears on every page, in the position the provider asks for rather than always at the end of the body. On a framework, that means the root layout instead of each individual page.

Ghost, HubSpot CMS and others

Nearly all of them have a code injection or custom scripts area in site settings, usually with separate head and footer fields. What carries across is that the code goes in site-wide, in the place the provider names.

Test it properly

Four checks, and the last one is what separates a widget that looks installed from one that works.

1. Logged out, in a private window. Several platforms hide injected code while you are editing, so testing while logged in tells you nothing.
2. On a real phone. Not a narrow desktop window. Check that the bubble doesn’t sit on top of your “Buy”, “Book” or “Call” button, and that it doesn’t collide with your cookie banner.
3. On more than one page type. Home, a product or service page, and checkout or contact, since templates differ.
4. Send a real message and verify the whole journey. Don’t stop when you see the chat bubble. Send a question, confirm it reaches the human inbox or the AI assistant, test what happens outside your opening hours, and check what the widget does when the conversation needs escalating to a person.

With an AI assistant such as Holp, that last check is worth doing twice. Ask something it should know and confirm the answer matches your own information, then ask something it can’t know and watch what happens: it should admit that it doesn’t know, offer to put you through to a person, take your details, and land an email in front of your team.

The decisions that actually matter

Installing is trivial. These are not.

What happens out of hours

Pick one and be honest about it, whether that means hiding the widget outside working hours, saying plainly when you will reply, or letting an AI assistant answer. What you must not do is show a live chat box at midnight that implies somebody is there.

Whether it opens by itself

Proactive messages can increase engagement, but they can also become intrusive, particularly on smaller screens where the panel covers most of the page. If you use them, delay by at least twenty or thirty seconds and trigger on a signal of intent rather than on arrival, and think carefully before running them on mobile at all.

What you collect, and why

Asking for contact details before somebody can ask a question adds friction, so unless capturing every visitor is essential, it is usually better to let them ask first and request their details at the point they need further help. Whatever you do collect is personal data under UK GDPR, which means 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, manage focus sensibly and close without a mouse. UK service providers have a duty to make reasonable adjustments for disabled people under the Equality Act 2010, while public sector websites are also subject to specific accessibility regulations. Either way, an inaccessible chat widget can make an otherwise accessible website difficult or impossible to use, so test it with the tab key before you go live.

What happens when it cannot help

Every chat, human or AI, eventually meets a question it can’t answer, so decide the exit now: a contact form, a phone number, or a promise to email back. An unanswered question that ends in silence is the worst outcome available, and it is the default if you don’t choose otherwise.

Getting the answers right, before the tool

If you use AI, the quality of the information you give it matters enormously. A good assistant shouldn’t invent what it hasn’t been told, so where your delivery policy, accessibility information, opening hours or pricing are unclear, it either has to admit that it doesn’t know or risks giving an incomplete answer.

That information doesn’t all have to live on your public website, since tools such as Holp let you add knowledge directly as well as importing pages from your site. Improving the underlying content is still worth the hour, because it helps your visitors and your assistant at the same time.

Two things to do first, both free:

1. Run our answerability check on your site. It reads your public pages and reports which common customer questions you have actually covered.
2. Check that a crawler can find those pages, using the sitemap extractor, since anything imported from your website depends on being able to reach it in the first place. 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, while enterprise suites price per agent seat plus per resolution and get expensive quickly.

The pricing model matters more than the headline number, because per-seat pricing is predictable whereas per-resolution pricing scales with your traffic, which is fine right up until a good month. We compare the models in what a chatbot actually costs.

Holp is an AI customer service agent rather than a staffed live chat service. It adds a chat widget to your website and answers questions using the knowledge you give it, whether that is pages imported from your site or entries you write yourself. You can run Holp around the clock, or alongside a human live chat platform so that visitors reach your team while you are available and Holp outside those hours, and when somebody needs a person it collects their details and passes the enquiry on by email. Plans currently start at £25 a month, and human live chat inside Holp is coming soon. See pricing.

Frequently asked questions

Where exactly does the chat code go?

Wherever your provider says. Most hosted platforms give you a site-wide custom code area with separate head and footer fields, and providers differ on which one they want, so use the current instruction from the tool rather than a general rule.

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 human live chat, yes, since that is the definition. If you can’t staff it, either hide the widget outside your hours or put an AI assistant behind it so questions still get answered.

Can I add live chat to a free website plan?

Often not. Squarespace’s Code Injection needs a Core, Plus or Advanced plan, or one of some legacy plans, and Wix needs a published site with a connected domain, so check what your plan allows 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.

Can I use more than one chat widget?

Yes, but normally only one should be visible at a time. You might show a human live chat service such as Crisp during your staffed business hours and switch to an AI assistant such as Holp outside them. What to avoid is displaying two competing chat buttons at once, since that confuses visitors and can leave conversations split between different systems.

Related reading

• What is customer chat support?, the full guide
• The best AI agents for customer service in 2026
• What does a chatbot cost?