How to add live chat to an HTML website

Before you start

You need a free Quarito account with your website added. Create one if you haven't yet: it takes a minute and there's no card to enter.

Then copy your install code from Administration › Chat Widget › Install. It's one line that looks like this, with your own site's ID in it:

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

• Use it exactly as it is. Don't change the address or download the file: the chat updates itself from there.
• You only paste it once. Colours, messages and everything else change from the dashboard and reach your site within about a minute.

Add the code to your pages

1. Open your site's files in your code editor, or in your host's file manager.
2. Does every page include a shared footer file (like footer.html)? Open that one file. If not, open each page you want the chat on, starting with index.html.
3. Paste your install code on the line just above </body>.
4. Save, and upload the changed files to your host.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Business</title>
</head>
<body>
    …
    <footer>© My Business</footer>

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

Put it at the end of the body, not in the <head>: your page shows first, and the chat button joins it a moment later.

The chat on some pages only

Paste the code on every page, then list the pages that shouldn't show it under Chat Widget › Behavior › Pages without the chat. You can use * for a whole folder, like /members/*. That way you never edit files again to change where the chat shows.

If the chat doesn't show

• The new file isn't on the server yet. Upload it again, then reload the page with the cache skipped (Ctrl+Shift+R, or ⌘+Shift+R on a Mac).
• The code is inside a comment (<!-- … -->) or after </html>. Move it above </body>.
• The page is opened from your computer (an address starting with file://). Open it from a web server instead, even a local one.

Your pages are .php files? Follow the PHP guide instead.

Check that it works

1. Open your site in a private (incognito) window, so you see it the way a visitor does.
2. Look for the chat button in the bottom corner of the page, then send yourself a test message.
3. In the dashboard, the message appears in your Inbox as it arrives. Reply, and watch the answer reach the website.

You can also choose check the installation on the Install tab of Administration › Chat Widget: we load your home page and look for your code. No button? Go through when the chat doesn't show.

Set up the rest

The chat is on your website. A few minutes in the dashboard makes it yours:

• Customize the chat: your colour, logo, chat button and welcome message.
• Set your office hours, so visitors know when you'll answer.
• Save replies to the questions you hear most.
• Invite your team to answer chats with you.