How to add free live chat to your website

To add live chat to your website, you copy a short install code from your chat tool and paste it once, just before the closing </body> tag or into your site builder's custom code box. It takes about ten minutes and no developer. The install is the easy part. The work is deciding who answers, during which hours, and what a customer sees when nobody is there.

What your website chat is for

On a shop's website, most first messages are the same five questions:

• delivery time ("If I order today, when does it arrive?");
• delivery area ("Do you deliver to Ikeja? To Kumasi?");
• payment on delivery, by transfer or by Mobile Money;
• the status of an order already placed;
• returns and exchanges.

A chat on the product page catches those questions while the customer is still deciding, instead of sending them off to find your WhatsApp number, or a competitor's. If you are weighing the two channels, we broke down what WhatsApp Business API support costs compared with website live chat.

Three ways to add a chat widget to a website

Every serious chat tool supports the first method. The other two depend on how your site is built.

Method	Best for	What you do
Paste an install code	Plain HTML sites, WordPress, Shopify, most CMSs	Paste the code before </body> in the template every page shares
Site builder code box	Wix, Squarespace and other builders with no file access	Paste the same code into the custom code field
Developer package	Sites built with React, Next.js, Vue or Nuxt	Your developer installs the tool's npm package and adds a component

Some tools also offer a WordPress plugin or a Shopify app. You don't need one: the pasted code does the same job, and it is one less thing to keep updated.

Step 1: pick a free live chat tool

Plenty of chat tools have a free tier. Before you sign up, check the five things that matter to a small team:

1. A real free plan, not a 14-day trial, and no card asked at sign-up.
2. A shared inbox, so you and your sales assistant see the same conversations and who replied.
3. Replies from your phone, because you won't always be at a laptop.
4. How you pay when you outgrow the free plan: in dollars on an international card, or in a way your business can actually pay.
5. Language: English for your customers, and French too if you sell into Cameroon, Côte d'Ivoire or Senegal.

Step 2: set your domain and copy the install code

Once your account exists, the tool asks for your website address and then shows the install code. Two mistakes come up again and again:

• The domain doesn't match. Many tools only show the chat on the domain you entered. Type it exactly as customers do, with or without "www". On Shopify, use your own domain, not the .myshopify.com address.
• The code is retyped by hand. It holds a key tied to your account, and one wrong character keeps the chat hidden. Use the copy button.

In Zean, the Install code lives under App settings, then Developers, then Getting started. It never changes, even when the chat is updated or you change its colour, so you paste it once. The guide to installing Zean's chat on a website shows every screen. The Free Plan includes every feature with no card. Paid Plans are prepaid, with no subscription and no dollar card needed: you top up a Wallet by Mobile Money or card, in FCFA first, with more currencies and payment methods coming.

Step 3: paste the code into your site

The rule is always the same: the code must load on every page, just before the closing </body> tag. Here is where it goes on the most common platforms.

Plain HTML site

Open the template or footer file that every page includes and paste the code right before </body>. If each page is its own file, paste it into each one. Upload the files to your host.

WordPress

The safest route is a plugin that inserts code into your site-wide footer, such as WPCode, free on WordPress.org: paste the code into its Footer box and save. You can also paste it into your theme's footer.php, but a theme update can wipe it unless you use a child theme.

Shopify

1. In your Shopify admin, go to Online Store, then Themes.
2. On your live theme, open the "…" menu and choose Edit code. Shopify recommends you duplicate your theme before editing its code, so you have a backup.
3. Open theme.liquid, paste the code just before </body> and save.

For Zean, both cases are covered in installing the chat on WordPress or Shopify. It is the same Install code, with nothing extra to install.

Wix

From your site dashboard, open Settings, then Custom Code. Click "+ Add Custom Code", paste the code, choose "All pages" and place it in "Body - end". Wix notes that your site must be published and have a connected domain for custom code to run.

Squarespace

Open the Code Injection panel, paste the code into the Footer field and save. Squarespace's help says code injection is only available on some plans, so check yours first.

React, Next.js, Vue or Nuxt

The pasted code works here too, but an npm package fits better: it follows page changes without a reload and lets you open the chat from your own "Contact us" button. Have your developer follow the chat tool's docs.

Step 4: set it up before you tell customers

A chat that is installed but not set up does more harm than no chat. A customer who writes and hears nothing back is likely to try someone else. Before you announce it, sort out six things:

1. Business hours, in the right time zone.
2. A welcome message that says what you can help with ("Questions about an order, delivery or payment? Write to us here.").
3. An away message: when you will reply, and what to have ready, such as the order number. A good tool sends it on its own outside your hours, as in setting business hours in Zean.
4. Who answers: invite your team, and agree who watches the chat in the morning, in the evening and at weekends.
5. Pages without the chat, such as checkout, if the button gets in the way there.
6. Look: your brand colour, your logo, and which side of the screen the button sits on.

Step 5: test it on a phone, on mobile data

Your customers often arrive on a phone, sometimes on a slow network. Test in those conditions, not just on the office laptop:

1. Turn off Wi-Fi on a phone and open your site on mobile data, in a private browsing tab.
2. Check that the chat button doesn't cover "Add to cart" or your menu.
3. Send a message as a customer would, then a photo from the camera.
4. Reply from the inbox on another device and check that the answer arrives.
5. Try again outside your business hours and read your away message.

If the chat doesn't show up

The usual causes:

• the page you are testing isn't on the domain you entered (one missing or extra "www" is enough);
• the code is incomplete, in the wrong place, or only on some pages;
• a caching plugin is still serving old copies of your pages: clear the cache;
• an ad blocker is hiding the chat: test in a private window with extensions off;
• the page is one where you chose to hide the chat.

For Zean, the chat isn't showing lists each cause and the message to look for in your browser console.

FAQ

Can I add live chat to my website for free?

Yes. Several tools have a free plan with no time limit. The limits are usually on how many people can answer or on some features, so read what is included before you sign up.

Do I need to know how to code?

No. You need to copy a piece of text and paste it in the right place. On Wix, Squarespace, or WordPress with a code plugin, you do it from the dashboard without opening a file.

Will live chat slow down my website?

A well-built chat script loads after the page content, so customers see your products first. Test your page with Google's PageSpeed Insights before and after you install it to see the real difference.

What happens when nobody is online?

Customers can still write. They get your away message, and their question waits in the inbox. If the tool asks for their email, they can hear about your reply even after they leave the site.

Website chat or a WhatsApp button?

A WhatsApp button sends the customer off your site to a number that one person often holds. A website chat keeps the conversation on the product page and shares it with the team. Many shops keep both.

To try it on your own site, you can get started free with Zean: installing it takes as long as copying a code.