The WhatsApp website widget, also known as the WhatsApp Click-to-Chat widget, is a feature that allows website owners to integrate WhatsApp messaging functionality directly into their websites.
It provides a convenient way for visitors to initiate conversations with the website owner or customer support team through WhatsApp. Designing your widget can be a lot of fun. All you need is a couple of moments of your time.
🔴 Alert
Verify that the BusinessChat app is connected to your e-commerce platform (Salla, Zid, or Shopify) before you begin, or the WhatsApp widget will not appear.
Let's start 👇!
From your account settings, click on get started on the Website Widget page under WhatsApp settings.
You can install the widget directly by clicking the Install Widget button or customize it in your style.
Now let's start designing your widget 🎉
Languages
You can select the languages you want to support on your website.
Brand Colors
Set the brand colors for the CTA button and bubble background. Also, decide on the widget icon direction.
Icon Text
Optionally, add text beside the WhatsApp icon. You can preview it on the right side.
Bubble Design
Customize the widget bubble, including the header, message, and call-to-action button. The bubble is optional, and it can be turned off.
Header
You can add a picture, name, and caption.
Message
You can add a message and have the option to add an image.
Call to action
The CTA button tells users what to do next. You can add relevant text in this field.
Triggers
The conditions will let the bubble pop up based on time spent and scroll position. The triggers need to be enabled from the switch icon.
💡 Tip
If you turn off the bubble, your website visitors will be redirected to your WhatsApp account by clicking the WhatsApp icon.
WhatsApp prefilled message
Optionally, specify a pre-set message for visitors initiating a conversation, which can include relevant information or instructions to guide the conversation, such as:
Where is your store located?
How can I contact your customer support team?
Hello, I have a question. Can you help me?
Including the page URL allows you to determine which page your customers were on when they texted you. This will help you better understand your customer's behavior across your website.
WhatsApp Number
Choose the WhatsApp number or channel for visitors to be redirected to. For example, you will see your WhatsApp preselected if you have one number on BusinessChat.
Once you have finished designing your widget, you can preview it on the right side to see how it will look on Mobile or PC.
Install the widget on your website
You'll need an installation code to implement the widget into your website. Obtain the installation code by clicking "Install Widget" and copy it. Next, you must add the installation code to your website's HTML.
💡Tip
Check how you can install your WhatsApp widget to your e-commerce platform.
Widget Statistics
Once your widget is installed on the website, you can track widget statistics, including clicks, visits, click-through ratio, and the latest activity.
Edit Widget
Edit the widget whenever needed by clicking "Edit Widget" and publish changes directly. It will be implemented directly without copying the code again.
💡Tip
You can deactivate or activate the widget as required.
Congratulations 🎉 you've successfully designed a WhatsApp widget.