Chat Widget in ChatSyncs

ChatSyncs left navigation with Chatbot Manager selected, the Engagement tab highlighted, the Chat Entry sub-tab highlighted, and the Chat Widget list with a Create button — Chatbot Manager → Engagement → Chat Entry, with the Create button highlighted.

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.

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?`

Configure Action Button panel showing Pre-fill Message, Chatbox position, Open on startup, Offset X/Y, delay slider, button styling, and Reference fields — 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.

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 begins

Chat Widget flow canvas with an Interactive Message block offering Get a Demo and Learn More buttons — 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.

Get the embed code

ChatSyncs left navigation with Chatbot Manager selected, and the Chat Widget list with its embed-code and edit action icons highlighted on a widget row — 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:

Embed Code dialog showing a JavaScript embed snippet, a WhatsApp short-link, and a QR code — 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.

How it looks on your website

WhatsApp chat widget open on a website with a welcome message and a Start Chat button — 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.

Chat widget collapsed to a floating WhatsApp button in the corner of a website — The chat widget collapsed to its floating WhatsApp button.

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?

What happens when a visitor clicks the widget?

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.

Start Here

Chat Widget in ChatSyncs

Create a chat widget

Configure the widget

The complete visitor journey

Build the widget’s conversation flow

Get the embed code

How it looks on your website

Frequently asked

​Create a chat widget

​Configure the widget

​The complete visitor journey

​Build the widget’s conversation flow

​Get the embed code

​How it looks on your website

​Frequently asked

Create a chat widget

Configure the widget

The complete visitor journey

Build the widget’s conversation flow

Get the embed code

How it looks on your website

Frequently asked