How to Set Up Live Chat on Your Website
Live Chat puts a chat widget on your website so visitors can message you instead of calling. This guide covers turning it on, styling the widget and choosing its language, and the two alternative ways to install it — including the mistake that loads the widget twice.
What Live Chat does
Live Chat puts a chat widget on your website so visitors can message you without picking up the phone. You control how it looks, what it says and which language it speaks.
Set it up
- Log in to your Zonitel Office Portal.
- In the left sidebar, expand Settings and click Live Chat.
- On the Settings tab, turn on Integration enabled. The widget only loads on your site while this is on.
Appearance
- Chat title and Chat subtitle — what visitors see at the top of the widget.
- Primary color — used for the header, the send button and your visitors' message bubbles. Match your website so it does not look bolted on.
- Agent avatar — optional, up to 3 MB. A real face gets more replies than a generic icon.
- Welcome message — the first thing a visitor sees when the chat opens.
- Button text — the wording on the launcher button.
Business
- Business URL — the site where the widget is installed.
- Phone number — optional contact number.
- Language — English, Spanish, French or German.
A Live preview beside the form shows your changes as you make them. Click Save settings when it looks right.
Install the widget on your site
Open the Widget tab. Your Widget ID is shown at the top — that is what ties the code to your account.
There are two ways to install, and they are alternatives, not steps.
Option A: add it to a website you already have
This is the usual case. Copy two snippets into your site:
- Inside <head> — loads the widget's styles and script.
- Just before </body> — starts the widget with your ID.
Add them to every page where the chat should appear. If your site uses a shared layout or template, putting them there once covers the whole site.
Option B: start from a complete page
If you do not have a site yet, the portal gives you a full page template that already contains both snippets from Option A.
Do not use both options. Option B already includes Option A's code, so pasting both loads the widget twice.
Where the conversations arrive
When a visitor writes to you, the conversation lands in Conversations > Inbox, in the same place as your text messages. Whoever is working the inbox can reply from the portal or the mobile app, and the thread stays with the rest of that customer’s history.
That also means your existing habits carry over — saved contacts show a name instead of a stranger, and message templates work here too. See How to Create and Use Message Templates.
Before you go live
- Open your site in a private window and check the widget appears where you expect.
- Send yourself a test message and confirm someone on your team sees it.
- Read your welcome message as a stranger would — it sets the tone for every conversation.
- Agree who watches the chat during business hours. A widget nobody answers is worse than no widget.
FAQ
Q: Do I need a developer?
A: Option A is two copy-and-paste snippets. Anyone who can edit your site's template can do it.
Q: Can I turn the widget off without removing the code?
A: Yes. Switch off Integration enabled and it stops loading.
Q: Can I change the colours later?
A: Yes, from the Settings tab. The code on your site does not change.
Q: Which languages are supported?
A: English, Spanish, French and German.
Need help?
Call/Text/WhatsApp: (833) 966-4835
Email: info@zonitel.com