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: “Got any Questions?”
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.”)
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 chat bubble text short: 2–4 words works best.
Make sure your WhatsApp number is correct to avoid broken links.
Use a color that stands out, but is consistent with your brand theme.
Don’t overcrowd pre-filled messages—make them actionable, like “Hi, I have a question.”
How It Works
Once added, the widget will appear on your website. When a visitor clicks it:
A modal opens with your message and button.
Clicking the button launches WhatsApp (web or mobile).
The user can write any message and can send directly on your on your whatsapp number.
Your bot or support team can continue the conversation from there.
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.