whatsapp widget
WhatsApp API
May 24, 2023

How to add a free WhatsApp widget to your website

Table of Content

As an e-commerce owner, you must know that effective customer communication is vital for the success of your brand. You must avoid breakdowns in instant communications as customers can quickly lose interest.

Luckily, you can unify your customer service thanks to WhatsApp’s different entry points. You just have to direct your leads toward your WhatsApp account through call-to-action buttons on social media and the WhatsApp widget on your website.

Keep reading to learn how to embed a WhatsApp widget on your website in simple steps.

What is a WhatsApp widget?

WhatsApp live chat widget is the service that allows you to add a WhatsApp Click To Chat link to your website. Website visitors can contact you with a click of a button. Indeed, they will be prompted to start a conversation with your WhatsApp number by opening the desktop or browser version of the WhatsApp app.

You must be wondering, though,  how is that different from a live chat widget?

A live chat widget is a popup chat box embedded on your website. Visitors can reach out through the live chat widget and will be able to communicate either with a bot or a human agent.

Both widgets perform the same task, yet the WhatsApp widget is more practical. It allows continuous open communications even after the visitor leaves your website. On the other hand, if a customer contacts you on live chat, communications will come to an abrupt end as soon as they close their browsers.

Keep scrolling to learn why the WhatsApp chat widget is key to your website.

Why integrate the WhatsApp widget on your website?

A WhatsApp button on your website will intrigue visitors to chat with you, especially because WhatsApp is the favorite communication channel for most people. Here are two reasons you must choose the WhatsApp widget against all odds:


  • Free of charge: Unlike the live chat widget, the WhatsApp website widget is free. You will bear no extra expenses and get high-quality, cost-effective service. Besides, you can embed the widget without needing a web developer.
  • Keeping records of contact info: unlike the live chat widget, the WhatsApp chatbot will automatically register all visitors' contact information once they reach out through the widget. You can nurture those leads and send them follow-up campaigns to convert them.
WhatsApp widget vs. live chat

The bottom line, your website visitors are so significant an audience to be neglected. Integrate the widget and help guide them through your funnel.

We will help you next add it to your website in easy steps.

How to add a WhatsApp widget on the website?

As we said, you don’t have to be tech-savvy to add the WhatsApp widget to your website.


Click on the WhatsApp widget builder
  • 3 From the widget builder page, Click on “ Build your free widget”
Click build your free widget
  • 4 Choose a template depending on your activity and available languages.
Choose a template
  • 5 Design your widget
  • Edit the widget’s icon: A. choose a symbol/ B. add a text (optional)/  C. choose the color. / D. Pick the position you want your widget to appear on your site
Design your widget
  • 6 Modify your widget’s bubble:
  • A.  edit the header: add a picture, an avatar name, a caption, and a background color
Modify your widget's bubble
  • B, Add a message
  • C. Add a call to action and customize as necessary. It’s possible to change the background color.
Add a message and customize the widget
  • 7 Settings
  • Add the number you want users to be directed to.
  • Add a predefined message so that users won’t have to type anything, and you can track the source of your leads.
Add your WhatsApp number


  • 8. Display: Choose which pages the widget will appear on your website and which devices.
Configure the display
  • Integrate the widget on your website
  • 9 submit your email to receive the integration code.
Get the code to integrate the widget
  • 10. Once received, open google tags manager> New Tag> paste the code you received
Click new tag on google tag manager
  • 11. Click on Tag Configuration and select Custom HTML from the menu on the side
Custom HTML
  • 12. Add a name to your tag; paste the widget's installation code in the HTML section.
 paste the widget's installation code in the HTML section.
  • 13. Choose All Pages in the Triggering section, and click Save.
Choose All Pages in the Triggering section
  • 14. To make your widget live, click Submit from the top left
Submit from the top left to make the widget live
  • 15. Add a Version Name, then click on Publish

WhatsApp widget use cases

WhatsApp widget is a great entry point to win your website’s visitors. You can integrate the button regardless of whether you are using the WhatsApp Business App or WhatsApp API.  However, if you opt for the second option, you will enjoy advanced features and better customer service.

If you wish to exploit your WhatsApp widget fully, you must integrate WhatsApp API first and allow the chatbot to help you do the following:

Automate replies


The chatbot on WhatsApp API allows you to program automated replies to answer customers’ most frequent questions quickly. Quick replies will provide instant responses and capture leads when they click the WhatsApp button. Automated replies on WhatsApp widgets can help save time and provide better customer service by quickly acknowledging messages and providing helpful information.

Collect customer data


Building a contact database has never been easier. The WhatsApp widget is an accessible entry point that can help you collect leads’ information and build a customer database with minimum effort.

The widget will help you grow your business by providing authentic contacts, as the chatbot will collect all customer information intuitively. They will not have to fill in a subscription form or anything else. They don’t even have to register your number. Once they click the button, they will be saved in your CRM, and you can use them to send retargeting campaigns and relevant offers.  

Qualify leads


It’s a fact that most website visitors will not come back. To reduce your losses and win potential leads, adding a WhatsApp widget to your website will redirect visitors to your WhatsApp account, where you can keep the conversation open and qualify them during the awareness and consideration stages.

Ask qualifying questions to understand the lead's needs and interests better. Then follow up with personalized messages and offers. This can help convert qualified leads into customers.

In-app shopping experience


Shopping from a website can be daunting. On the other hand, in-app shopping is a seamless and easy experience. However, instead of building your own app, you can use WhatsApp as an app for your store.

In best-case scenarios, a website visitor will click the WhatsApp button, and thanks to the guided chatbot, they will be able to discover your products in the catalog, add them to their carts, and place an order without having to leave the app.  

Nothing can be better than a catalog optimized for the mobile phone, with precise product details and high-quality pictures.

Also, you can send personalized recommendations based on the customer information you acquired previously.


Table of Content

Table of Content

Resources to help you grow your Business

Does Shopify POS work on a desktop? Shopify POS apps for PCs

Let’s check why retailers want a POS Shopify for PCs and explore our expert pickles of the best Shopify POS desktop solutions.

Learn More

Bulk WhatsApp Messaging Program

Learn the difference between WhatsApp based, programs to send unlimited marketing campaigns and messages. Discover differences between QR programs and API.

Learn More

Practical Tips to Improve Your Store's Visitor-to-Customer Conversion Rate

Discover practical tips to improve your store's conversion rate, such as automated notifications and popups based on visitors' behavior.

Learn More