How to Create & Embed a WhatsApp Chat Widget
Adding a WhatsApp chat option to your website makes it easier for visitors to reach you instantly through a familiar, widely used platform. With Acele’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 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 Acele 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 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 everything is 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
- Paste it into your website’s HTML just before the
</body>tag
🎉 Congratulations! Your WhatsApp 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 Acele?
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 Acele dashboard → Go to WhatsApp > Bot Manager → 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 auto-generates 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?
Paste the copied script just before the </body> tag in 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 in Acele, make changes, and save. The updates will reflect automatically if the code is already embedded.
What is the “reference name” in the widget settings?
It’s a required internal name to help you distinguish between multiple widgets inside your Acele dashboard.
Do I need a WhatsApp Business API to use this feature?
Yes. You must have a verified WhatsApp bot connected to Acele via WhatsApp Business API to use the chat widget functionality.
