All Collections
WhatsApp Widget
Get started with website widget.
Get started with website widget.

Learn how to design your WhatsApp widget and install it on your website.

Updated over a week ago

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.

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.

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.

Did this answer your question?