Add Your WhatsApp Chat Widget to Your Website
Adding a WhatsApp chat option to your website makes it easier for visitors to reach you instantly through a familiar, widely used platform. With Zoe Agent’s WhatsApp Chat Widget, you can customize the look, behavior, and messaging of the widget to match your brand and improve customer interaction. This guide walks you through accessing your WhatsApp bot settings, configuring the chat widget, and embedding it into your website’s HTML, so you can start engaging your audience right from your site.
Why You Should Use the Zoe Agent WhatsApp Chat Widget?
- Trusted Platform: Engage users via WhatsApp’s familiar interface.
- Pre-Fill Messages: Speed up customer inquiries.
- Custom Design: Align colors, logos, and positioning with your brand.
- Instant Setup: Embed with one script.
Now let’s dive into the process.
Step 1: Access Chat Widget Settings
- Log in to your Zoe Agent dashboard.
- From the sidebar menu, select Chatbot Manager > WhatsApp Bot.
- From the list, choose your WhatsApp bot account (e.g., DigiLab Enterprise).
- Under your selected WhatsApp account, click on Chat Widget.
- On the Chat Widget settings page, click the Create button located at the top right.
Step 2: Configure Your Chat Widget
In the Configure Action Button section:
- Choose “WhatsApp short link” from the Actions dropdown.
- Upload your chatbot logo (PNG/JPG supported).
- Customize the Chatbox header background and text color.
- Set the Display name, Welcome message, and Pre-fill message.
- Choose the Chatbox position (e.g., bottom-right).
- Specify if the Chatbox should open on startup or stay closed initially.
- Set the offset positions (X and Y) to fine-tune the widget’s location.
- Customize the Button text, background, text color, and hover effects.
- Select the button size (Medium, Large, or Extra Large).
- Add a reference name for internal identification (mandatory).
Step 3: Finalize and Save
- Once configured, click Save at the top right of the page.
To integrate the widget on your website, click the Embed Code (</>) button, copy the generated script, and paste it into your website’s HTML code.
Congratulations! Your Chat Widget is now active and ready to improve customer interaction on your website.
Frequently Asked Questions (FAQ)
What is the WhatsApp Chat Widget in Zoe Agent?
The WhatsApp Chat Widget allows you to add a clickable WhatsApp chat button on your website, enabling visitors to message your business directly via WhatsApp.
How do I access the WhatsApp Chat Widget settings?
Log in to your Zoe Agent dashboard → Go to Chatbot Manager > WhatsApp Bot → Select your WhatsApp bot (e.g., DigiLab Enterprise) → Click on Chat Widget → Click the Create button.
What action should I choose while configuring the widget?
Choose “WhatsApp short link” from the Actions dropdown to enable WhatsApp chat redirection with a pre-filled message.
Can I customize the widget’s appearance?
Yes, you can customize the header color, button text, background color, hover effects, font size, position (X/Y axis), and upload your logo to align with your brand identity.
What is the purpose of the pre-fill message option?
The pre-fill message allows you to auto-generate a default message in the WhatsApp chat box when a user clicks the button, reducing typing effort and speeding up communication.
Where should I paste the WhatsApp widget embed code?
After saving the widget, click the Embed Code (</>) button, copy the script, and paste it just before the </body> tag of your website’s HTML file.
Is the WhatsApp chat widget mobile responsive?
Yes, the widget is fully responsive and optimized for both mobile and desktop visitors.
Can I change the widget behavior after it’s live?
Absolutely. You can return to the widget settings, make changes, and re-save. The updates will be reflected automatically if the code is already embedded.
What is the “reference name” in the widget settings?
The reference name is a required internal identifier to help you distinguish between multiple widgets in your Zoe Agent dashboard.
Do I need a WhatsApp Business API to use this feature?
Yes, you must have a verified WhatsApp bot connected to Zoe Agent through the WhatsApp Business API to use the chat widget functionality.
