The 60-second version
The website chat widget is a floating WhatsApp button for your site. A visitor taps it, a small panel opens with your brand at the top and an opening message already written for them, and Chat On WhatsApp drops them into a real WhatsApp conversation with your business — which arrives in your Inbox like every other chat.
Hello 👋
Setting it up is four short tabs and one copy-paste. The rest of this guide walks each of them, starting from wherever you are in the app right now.
Get to the widget page
The widget lives in the Admin Dashboard, not inside a workspace. That’s deliberate: the widget belongs to your brand, so one setup covers every workspace under it. Three clicks from anywhere in the app.
Click your brand logo, top-left
In any workspace, the very top of the left sidebar shows your brand logo with the brand and workspace name beside it. That tile is the switcher — click it.
Choose Admin Dashboard
A two-pane panel opens: your brands on the left, that brand’s workspaces on the right. Admin Dashboard is pinned at the top of the right pane, above the workspace list. Click it.
Open Tools → Website Chat Widget
You’ll know you’re in the right place by the blue Admin View badge under the brand name. The sidebar is grouped — scroll to the Tools group and pick Website Chat Widget.
To get back to day-to-day work later, click the logo at the top of this sidebar and pick a workspace from the right pane.
The Website Chat Widget page
The page lists the chat surfaces provisioned for your brand — one card per channel. Most brands have the WhatsApp card; some also have an AI Chat Widget card, which answers questions on the page instead of handing off to WhatsApp.
- Edit Widget — the four-tab setup dialog, with a live preview beside it.
- Copy Embed Code — the snippet to paste into your website. You only ever do this once.
Set up the widget, tab by tab
Edit Widget opens a four-tab dialog. You can move with Next / Previous or click any tab directly — the numbering is a suggested order, not a locked wizard. A live preview of the visitor’s view sits on the right and updates as you type.
Widget Type & Contact
First decide whether visitors get one number or a menu of them, then enter the number(s).
- Single Number — one field under Your WhatsApp Number. The country picker defaults to Singapore (+65); change it from the flag dropdown.
- Multiple Numbers — visitors see a picker first, then chat. Use it for branches, campuses or departments.
With Multiple Numbers, Add Number appends a card you can rename, describe and reorder. The Name is the line the visitor taps and the Description is the grey subtitle under it — so write them for the visitor, not for your internal naming.
Welcome Messages
This is the part people misread. The message you write here isn’t a greeting you show the visitor — it’s the message pre-written into their WhatsApp compose box. They tap the button, the text is already there, they hit send. That is why the default reads “Hi! I would like to find out more about your service!” — it’s written in the visitor’s voice.
Because that message is what shows up in your Inbox as their opening line, it doubles as free context. A generic base message tells you nothing; Path-Specific Messages let you swap it per page so the enquiry arrives already labelled.
- Path — the page or section it applies to, e.g. /courses/p5-math or /blog/*.
- Custom Message — what replaces the base message on those pages.
- Anywhere that matches no override falls back to the base message.
Visibility Rules
Two layers, in this order: a default for the whole site, then exceptions that override it on specific paths.
- Show on all pages (the default) — then use Exclude Paths to carve out the few pages that shouldn’t have it: checkout, admin, legal.
- Hide on all pages — then use Include Paths to switch it on for a shortlist: a campaign landing page, your contact page.
Paths are website paths, starting with / — not full URLs — and * covers everything below a section. Pick whichever default gives you the shorter exception list, and don’t put the same page in both lists.
Review, then Save Widget
The last tab summarises the essentials: widget type, number(s), base message and default visibility.
Save Widget writes the config and closes the dialog. If the snippet is already on your site, the change is live on the next page load — no re-paste.
Get the embed code
Back on the widget list, press Copy Embed Code on the card. The dialog shows the snippet plus the three-line install instruction, with a Copy button at the top of the code block and another at the bottom of the dialog.
- Copy the code below
- Paste it before the closing
</body>tag in your HTML - Save and refresh your website
<!-- WhatsApp Chat Widget -->
<script src="https://cdn.exabloom.com/chat-widgets/whatsapp/chat-widget.js"></script>
<script>
ExabloomWidget.init({
configId: 'a1b2c3d4-…',
position: 'bottom-right'
});
</script>Then, on your website:
- Paste the snippet just before the closing </body> tag.
- Save and republish, then refresh the page.
- The button appears bottom-right. Tap it to check the panel, the greeting and the number.
Every setting except one lives in the dialog. The position: 'bottom-right' line is part of the snippet itself, so it’s the one thing you’d change in the pasted code rather than in the app.
Setups to copy
Good to know & pitfalls
- The welcome message is the visitor’s message, not yours. It pre-fills the visitor’s WhatsApp compose box, so write it in their voice (“Hi! I would like to find out more about…”), not yours. It is what lands in your Inbox as their opening line.
- Use a number that’s actually connected to Exabloom. The field accepts any number and doesn’t check it against your connected WhatsApp account. Type the wrong one and chats go to that phone — never to your Inbox.
- Nothing saves until you press Save Widget. You can click freely between the four tabs, but closing the dialog with Cancel — or the X — throws away everything you changed.
- The Review tab doesn’t show everything. It lists type, phone, base message and default visibility only. Your path-specific messages and include/exclude paths aren’t summarised there, so check those on their own tabs before saving.
- Paths are paths, not full URLs. Enter /pricing, not https://yoursite.com/pricing. Use * to cover a whole section, and avoid listing the same page under both Include and Exclude.
- Install once, edit anytime. The snippet only carries your configId — it fetches the live config each time the page loads. Change messages, numbers or visibility later and your site picks it up with no re-paste.
- No widget on the page? It hasn’t been provisioned. There’s no “create widget” button — widgets are set up for your brand by us. If you see “No chat widgets found”, message us and we’ll add one.
- The live preview needs a wide window. It sits beside the form and is hidden on narrow screens — set the widget up on a laptop or desktop, not a phone.
Need a hand?
Our Singapore-based team is one message away — happy to help you get set up.