How to add live chat to your website: a simple guide for small businesses

Someone is on your website right now with a question. Maybe it's about your prices, or whether you work in their area, or how soon you could start. If the only way to ask is a contact form or a phone number, many of them simply leave.

Live chat gives them a third way: a small button in the corner that opens a conversation with a real person on your team. This guide walks through adding it to your website, from nothing to your first answered chat, and what to set up so it keeps working for you.

What you need

• A live chat tool. It gives you the chat button for your website and an inbox where you and your team read and answer messages. Many have a free plan; here's what to check before you pick one.
• A way to add one line of code to your website. Every common website builder has a box for this, and you don't need to know how to code to use it.
• About fifteen minutes. Most of it is choosing your colours and writing your welcome message.

Step 1: Create an account and add your website

Sign up with your chat tool and add your website's address. With Quarito, that's a name and an address, then you're on the install page. The tool gives you an install code: a single line that loads the chat on your pages. It looks something like this:

<script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>

Your real code has your own site's ID in it, so copy it from your dashboard, not from here.

Step 2: Paste the code into your website

The code goes in one place that every page of your website shares, just before the closing </body> tag. Paste it once there, and every page gets the chat. Where that place is depends on how your site is built:

• WordPress: a free footer-code plugin, or your child theme. WordPress guide
• Wix: Settings › Custom Code, placed in Body – end. Wix guide
• Squarespace: Code Injection, in the Footer box. Squarespace guide
• Shopify: your theme's theme.liquid file. Shopify guide
• Webflow and Framer: the site's custom code settings. Webflow guide, Framer guide
• Your own code: the shared footer or layout file. HTML guide, PHP guide, React, Next.js and other apps

If an AI tool built your website, you can hand it the job: copy a ready-made prompt that tells it exactly where the code goes.

Tip: paste the code once. Two copies on the same page can show two chat buttons, or none.

Step 3: Make it look like your business

A chat that looks like it belongs to your website feels safer to use than one covered in someone else's logo. Before you tell anyone it's there, set:

• Your brand colour, for the chat button and the header.
• Your logo, or your team's photos. Faces work well for small teams: people like knowing who they're talking to.
• A welcome message that says what people can ask about. "Hi! Questions about prices or booking? Ask away." beats "How can I help you?".
• A greeting bubble, if you'd like one: a short line beside the chat button that invites people in. Keep it friendly, and don't make it pop up on every page.

With Quarito, these are all in Chat Widget, with a live preview, and changes reach your website by themselves. You never paste the code again.

Step 4: Decide when you'll answer

Live chat doesn't mean being online around the clock. It means being clear about when you are. Set your office hours, so the chat tells visitors when you'll be back, and choose what happens when nobody's online: keep taking messages for later, or hide the chat until you return.

We wrote a whole post about this: live chat when nobody's online.

Step 5: Prepare your answers

You already know the ten questions you hear most. Write a good answer to each one and save it as a saved reply, so anyone on your team can drop it into a chat with a shortcut. Need a head start? Take what you like from our 40 live chat message templates.

The same answers make a good start for a help center, which visitors can read without waiting for anyone.

Step 6: Test it like a visitor

1. Open your website in a private (incognito) window.
2. Find the chat button, open it, and send a message.
3. Answer it from your inbox, and check the reply arrives on the website.
4. Try it on your phone too.

No button? Usually the change isn't published yet, or a cache is still showing the old page. Our troubleshooting list covers the rest.

Your first week with live chat

• Answer quickly while someone's still there. A visitor who asks a question is often deciding right now. A reply in the first minute or two usually keeps the conversation going.
• Turn on notifications. Sounds and desktop alerts mean you don't have to watch the inbox to catch new chats.
• Write like a person. Short sentences, their name if they gave it, and your own name. It's a conversation, not a ticket.
• Note what people ask. If three people ask the same thing this week, the answer belongs on your website, in your help center or in a saved reply.
• Close the loop. If you promised to check something, come back with the answer, even if it's "no".

Mistakes to avoid

• Promising answers you can't give. "We reply instantly, 24/7" sets you up to disappoint. Say when you're around.
• A pushy greeting on every page. One friendly bubble, shown when it helps, works better than a chat that jumps open.
• Pasting the code in the wrong place. In the <head>, inside a page section that only some pages use, or twice. Once, before </body>, in a shared file.
• Forgetting the people who can't chat now. Ask for an email when you're away, so you can reply later.

Start today

You can have live chat on your website before your next coffee. Quarito is free for one agent and one website, with every feature and no Quarito branding in your chat. Create your free account, paste one line, and say hello to your next customer.