Create a WhatsApp Website Widget
Configure a WhatsApp chat button, brand appearance, welcome text, prefilled message and embed code for your website.
Overview
Search Aliases: WhatsApp chat button, floating widget, website WhatsApp launcher
Step-by-step instructions
- Open Tools -> WhatsApp Website Widget.
- Choose Create Widget.
- Select or enter the business number in international format.
- Choose bottom-left or bottom-right placement.
- Choose button color and approved logo.
- Configure header title and colors.
- Write the welcome message.
- Configure chat body and background.
- Choose whether the widget opens automatically.
- Set the CTA button label.
- Add a prefilled message.
- Save.
- Generate the embed code.
- Copy the code to the website implementation team.
- Add it before the closing body tag or through the approved site method.
- Test on desktop and mobile.
PAKISTAN EXAMPLE
Number: +92 300 1234567
Header: Chat with Islamabad Learning Centre
Message: Assalam-o-Alaikum. How can we help you?
Button: Start WhatsApp Chat
Prefilled text: Hi, I need information about your services.
WEBSITE SAFETY
Do not paste production credentials into the website. The widget should contain only the approved public launcher code and destination information. Verify cookie and analytics behavior if the widget uses tracking.
COMMON ISSUES & SOLUTIONS
| Widget does not appear | Check script placement, cache and website content-security policy. |
|---|---|
| Wrong number opens | Confirm international number and selected workspace. |
| Widget blocks content | Change position and mobile spacing. |
| Prefilled message is broken | Check URL encoding and unsupported characters. |
Last reviewed: