How to Add a WhatsApp Chat Widget to Your Website in ChatSyncs
The Chat Widget adds a floating WhatsApp button to your website, so visitors can start a conversation without knowing your business phone number.
On this page
Create a chat widget#
Open Chatbot Manager
Go to Chatbot Manager.
Open the Engagement tab
Select Engagement.
Click Chat Entry
Select Chat Entry from the sub-tabs.
Click Create
Click Create to start a new widget.
Configure the widget#
Clicking Create opens the widget's configuration panel — Action Type is set to Whatsapp short link, the only widget type currently available:
| Field | Notes |
|---|---|
| Chatbox Logo | PNG or JPG. Use a square, transparent logo, 200×200px or larger. |
| Chatbox Header Background / Color | e.g. #00A884 background with #FFFFFF text — use your brand color or WhatsApp green, with a contrasting text color. |
| Display Name | Your business name shown at the top of the widget, e.g. Rahul Electronics. |
| Welcome Message | Shown the moment a visitor opens the widget — keep it short and friendly, e.g. Hi 👋 Welcome to Rahul Electronics! How can we help you today? |
| Field | Notes |
|---|---|
| Pre-fill Message | Auto-fills the WhatsApp message box so the visitor just taps Send instead of typing — saves time and increases conversation rate. |
| Chatbox Position | Top-left, Bottom-left, Top-right, or Bottom-right (recommended — where most visitors expect a chat button). |
| Open on Startup | Stay Open auto-opens the widget on page load (good for support/promo/landing pages). Stay Closed (recommended) shows just the floating button until clicked, for a cleaner site. |
| Offset X / Y | Distance in pixels from the screen edge — higher X moves it further inward, higher Y moves it further up. |
| Delaying Chatbox Initialization | How long to wait before the widget appears. 0 Seconds for immediate support, 3–5 Seconds to avoid distracting new visitors. |
| Button Text | Short and action-oriented — Start Chat, Chat Now, WhatsApp Us, Need Help? |
| Button Background / Text Color, Hover Background / Hover Text Color | Match your brand color for the base state; the hover colors give visual feedback that the button is clickable. |
| Button Size | Medium for standard sites, Large for high-interaction business sites, Extra Large for landing/promo pages. |
| Reference | An internal-only name (alphanumeric only) to tell widgets apart in the dashboard — useful if you run separate widgets per website or campaign, e.g. homepage_widget, landing_page_widget. |
Click Save Changes once configured to create and activate the widget.
The complete visitor journey#
Visitor visits your website
↓
The floating WhatsApp button appears (bottom-right, by default)
↓
Visitor clicks the button — the widget opens with your logo, name, and welcome message
↓
Visitor clicks Start Chat
↓
WhatsApp opens with your Pre-fill Message already typed in
↓
Visitor clicks Send — your business receives the message and the conversation beginsBuild the widget's conversation flow#
Once saved, build what happens when a visitor starts the chat — the canvas works the same way as the Keyword Replies flow builder. Drag on components and connect them to design the conversation: Text, Image, Video, Audio, Files, Interactive Messages, User Input, and AI Reply.
Click Save Flow once the conversation is complete.
Get the embed code#
Back in the Chat Widget list, use the action icons on your widget's row to open its Embed Code.
The Embed Code dialog gives you three ways to deploy the widget:
- JavaScript Embed Code — a
<script>tag to paste into your website's HTML. - WhatsApp Short-link — a direct
wa.melink you can use on landing pages, emails, or social media instead of embedding the widget. - QR Code — scannable, useful for print materials or in-person displays.
How it looks on your website#
Once the JavaScript snippet is added, the widget appears as a floating button. Clicking it opens the chat card with your welcome message and Start Chat button; clicking Start Chat redirects the visitor to WhatsApp with your pre-fill message ready to send.
Frequently asked#
How do I put a WhatsApp button on my website?
Create a Chat Widget in Chatbot Manager → Engagement → Chat Entry, configure its branding/position/button styling, build its conversation flow, then copy the JavaScript Embed Code from the widget's Embed Code dialog into your website's HTML.
Can I use the widget without embedding it on a website?
Yes — the Embed Code dialog also gives you a WhatsApp Short-link and a QR Code. Use the short-link on landing pages, emails, or social posts, or the QR code on printed or in-person materials, without adding any code to a site.
What happens when a visitor clicks the widget?
It opens a chat card showing your Welcome Message and a Start Chat button. Clicking Start Chat opens WhatsApp with your Pre-fill Message already typed in, ready for the visitor to send.
What message types can I use in the widget's conversation?
Text, Image, Video, Audio, Files, Interactive Messages, User Input, and AI Reply — connected on a canvas the same way as a Keyword Replies flow.
Was this page helpful?
Still stuck? Open a support ticket and our team will help.