The Widget feature allows you to convert website visitors into WhatsApp conversations instantly. This helps you provide real-time support, collect leads, and let your automation bot handle queries efficiently—right from your site.
This article explains how to create, customize, and install the widget on your website.
What is the Website Widget?
The Website Widget is a floating chat bubble that appears on your site. When clicked, it opens a WhatsApp chat window with your business. This is an excellent way to:
Prompt visitors to ask questions.
Guide them to your chatbot or live support.
Drive traffic directly to your WhatsApp number.
Reduce friction in customer communication.
Where to Find It
Go to Settings > Widget.
Step-by-Step: How to Set Up the Website Widget
Step 1: Configure Widget Appearance
Brand Color
Choose a brand color that matches your website style. This will be applied to the button and modal interface.
Chat Bubble Text
Enter the text that will appear inside the bubble (e.g., “Chat With Us”).
Position
Select whether the widget appears on the bottom-left or bottom-right corner of your page.
Chat Button Preview
Choose the icon you want to display. You can pick the WhatsApp icon, a generic chat icon, or the WABB icon.
Once you're done, click Next Step.
Step 2: Set Modal Content
Phone
Enter the WhatsApp phone number where you want to bring your website visitors. This should be the number connected to your automation flow, so the chatbot can take over once the conversation starts.
Welcome Text
This appears as the heading in the modal. Example: “Welcome to WABB ✨”
Additional Text
Use this space to add extra details or context for your visitors. Think of it as a short description beneath the welcome message.
Pre-filled Message
This message will be pre-typed in the user’s WhatsApp chat window when they click to chat (e.g., “We’re here to help.”)
💡 Note: You can use "Pre-filled Message" as a keyword in WABB to trigger a specific flow for your website users
Brand Image URL
Paste the direct URL of your logo here to personalize the widget with your branding.
Note: If you leave this field blank, the widget will display the default Wabb logo instead.
Open Widget by Default
Toggle this ON (True) if you want the widget to appear open by default when the page loads.
Click Generate Code once the content is set.
Step 3: Copy and Embed the Code
The tool will generate a script code.
Copy this code and paste it into your website’s HTML code, just before the closing
</body>tag.
You must paste this code on every page where you want the widget to appear.
✅ Best Practices
Keep it short & simple: Use 2–4 words for your chat bubble text.
Double-check your number: Make sure your WhatsApp number is correct to avoid broken links.
Stay on-brand: Pick a color that stands out but matches your brand’s style.
Make pre-filled messages useful: Keep them clear and actionable.
👉 Example: “Hi, I have a question.”
⚙️ How It Works
Once added, the widget will appear on your website. When a visitor clicks it:
Add the widget to your website.
When a visitor clicks it:
A modal opens with your custom text and button.
Clicking the button launches WhatsApp (web or mobile).
A pre-filled message appears (if you’ve set one), and the user can start chatting directly with the flow.
From there, your bot or support team takes over the conversation.
🚀 Additional Use Cases
Use the widget to capture leads through automated WhatsApp flows.
Trigger chatbot sequences like appointment booking, product queries, or order status updates.
Perfect for e-commerce, service-based businesses, or any brand aiming to improve customer support accessibility.