All Collections
WhatsApp Widget
Design
How to design your WhatsApp widget
How to design your WhatsApp widget

This article will explain to you how to create your WhatsApp widget for free with BusinessChat

Updated over a week ago

Designing your widget can be a lot of fun. And no, you don't have to be a coding expert to do this. All you need is a couple of moments of your time.

All you've got to do is:

Are you ready? Let's start 😊

Go to the widget builder page.

1. To access the widget builder page, all you have to do is go to the BusinessChat homepage and scroll down to the footer and click Free WhatsApp Widget.

Or just click on this button:

2. Once you get to the widget’s page, click on Build your free widget

Choose a template to start with:

You can choose a template for your widget depending on your activity and the languages offered (Arabic or English). To continue, click Use This Template.

Design your widget:

Your widget's design will mainly consist of customizing the icon and the bubble.

Design your widget's icon:

You can edit your widget’s icon by choosing a symbol, adding a text (optional), choosing its color, and picking out the position you want your widget to appear on your site. You can see the edits happening in real time with a live preview.

Design your widget’s bubble:

You can modify your widget’s bubble by editing the header, message, and call to action

Header:

You get the option to add a picture, name, caption, and background color.

Message:

You can add a message and have it bold, in italic, or underlined, and you can even add emojis to it 😜. You also have the option to insert an image.

Call to action:

The widget will have a call to action button to tell users what to do next. You can add the WhatsApp icon next to it and even modify the background color.

Set up your WhatsApp widget:

WhatsApp integration:

You can add the WhatsApp number that you want your widget to redirect users to. And you can set a predefined welcome message that will automatically be typed in when the user gets redirected to your number.

Display:

You can choose the pages and devices you want your widget to appear on.

  • All Pages: with the help of this option, the widget will be displayed on every page of your website

  • Excluded Pages: if you choose this option, the widget will be displayed everywhere except for these pages

  • Specific Pages: you can select this option to display the widget only on particular pages of your website

Bubble trigger:

You can set a condition that when users meet will trigger the widget’s bubble to pop. These conditions can be times on site or scroll position.

Integrating the widget to your website:

To implement the widget into your website, you’ll need an installation code. And to receive it, you can enter your email address and copy the code once received.

Congratulations 🥳🎉 you've successfully designed WhatsApp widget.

Did this answer your question?