The Chat Widget adds your chatbot to your website, so visitors can start a WhatsApp conversation directly from your web pages instead of having to know your business number.
Clicking Create opens the widget’s configuration panel — Action Type is set to
Whatsapp short link, the only widget type currently available:
The Configure Action Button panel (top half) — Action Type, Chatbox Logo, header colors, Display Name, and Welcome Message.
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?
The Configure Action Button panel (bottom half) — Pre-fill Message, position, startup behavior, offsets, delay, button styling, and Reference.
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.
Reference must be alphanumeric characters only — it identifies the widget internally, so
spaces or special characters will be rejected.
Recommended starting configuration: Bottom-right position, Stay Closed, 0 second delay,
Medium button size, and your brand color for both header and button backgrounds with white
text for contrast.
Click Save Changes once configured to create and activate the widget.
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 begins
The Chat Widget flow canvas — an Actions block and Start Bot Flow connected to an Interactive Message with reply buttons.
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.
The Chat Widget list with the action icons highlighted — these open the widget's embed code and edit panel.
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:
The Embed Code dialog with the JavaScript snippet, WhatsApp short-link, and QR code.
JavaScript Embed Code — a <script> tag to paste into your website’s HTML.
WhatsApp Short-link — a direct wa.me link 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.
The chat widget open on a website, showing the welcome message and Start Chat button.
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.
The chat widget collapsed to its floating WhatsApp button.
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.
