WhatsApp Chat Button – How to add WhatsApp Chat Widget to website?

How to add the WhatsApp chat button on your website

Table of Content

If you are planning to add a WhatsApp button to your website, you are not alone. 


More and more business owners have recognized the benefits of interacting with customers on WhatsApp, the most widely used messaging app globally. Being easily accessible with WhatsApp means you can quickly attend to your customers, supporting them throughout their lifecycle with your brand.


With WhatsApp, you can create automated quick replies for your customers and share meaningful content that helps you build a  loyal customer base.  


Then again, using WhatsApp to communicate with customers isn’t all sunshine and rainbows; it gets difficult handling multiple customers on chat, sometimes the number of active chats piles up, and the quality of customer experience begins to dwindle. 


While you add the WhatsApp button to your website, make plans for how you’ll scale customer service on the platform. See how this Spanish shoe retail brand – Pretty Ballerinas, scaled their WhatsApp customer support to streamline their customer experience and improve sales.


Meanwhile, this article will help you add the WhatsApp button on your website, show you how to add WhatsApp on your Shopify store, and then how to manage business Growth with WhatsApp API.

Before the “how-to” section, let’s consider the pros and cons of using WhatsApp to communicate with your clients. 


Why integrate WhatsApp on your website?

There are many good reasons to add a WhatsApp Button to your website. However, there are also other factors to consider; after all, you want to use WhatsApp to improve your business communication and convert more clients, not stifle your growth in any way. Consider some of these pros  and cons:


Pros Cons
If you are responding to clients with the WhatsApp app, you are limited to one smartphone. This approach isn’t practical if you have more than five employees. Clients have easy access to chat with you or your business.

The automation on the WhatsApp Business app is limited or simple at best.

If you have a more extensive client base, you may need to use the WhatsApp Business API. Take this quiz to know if the API is the right fit for your business.

Broadcast messages and automation options are limited.

If you need to have smooth and personalized communication with your clients,  you may need CRM functionalities, and they aren’t available on the WhatsApp Business app.

 To have targeted communication with your clients, you’ll need to integrate WhatsApp business  API. 

Client interactions remain entirely isolated on the smartphone. No way to integrate CRM

How To Add WhatsApp Link To Your Website?

Now you know some of the Pros and cons,  it’s time to learn how to add WhatsApp to your website. The processes I’ll show you will help you put a button on your website; the button will prompt visitors to start a chat with your business through WhatsApp.

  1. Create a WhatsApp API link

WhatsApp API link is a feature that lets you begin a chat with someone without having their number saved on your phone address book. With the feature, you can create a link that allows you to start a chat with anyone.


Once they click the link, a chat with your business will automatically open on both a phone and WhatsApp web. Once you create the link, you can add it to your website as a button or a link. 


Here’s how you create the chat link: 

  • Simply add your phone number to this link. 



The is a complete phone number in the international format, omitting any zeros, brackets, or dashes when adding the phone number.


Wrong format = +1 30142431267

Correct  format = 1 30142431267


  • Suppose you want to add a custom message that will appear when a client clicks on the link.  Here’s how you do it:

You’ll add a parameter to the chat link you saw previously; you’ll see as “ &text=” just after you’ve added your phone number.  


https://api.whatsapp.com/send phone=143304235&text=This%20is%20a%20test


 To add a space in the custom message, use ‘%20’. The default message in this example is “This is a test.”

Ukwl2eT YrLTFKM25vICsnGdt99q qU00fMNud88qkP97ju7d9mC17ZmBjnk3tYz4bnhq wGi v2vwz2yDssj ILPyBWTf HOd4iTp9Yl7WUIemk9STtswidtlc OiTO93 FQ0Ln

  1. Create a button with WhatsApp Widgets. 

This method of adding a WhatsApp button to your website offers many advantages and is easy for anyone to implement. With WATI’s live chat widget, you can customize a button that will have the look and feel of your brand. 


Here’s how you can use  the widget: 

Step 1. Go to Create WhatsApp Chat Button

Step 2. Customize your button, add:

  • Button color – you can use your brand color. 
  • Button name – Ideally, a call to action like (Message Us!) 
  • Use the other settings to design the shape and position of the button. 

5qAxt49QaDSR35GPoAsOz CYZLMHHUaXAEIFX91jbFE44htZS6zo FoUqAhbTCIe39JEq77BnVcZF kXrkGK9ddqTllfqXrFJl7IGr l1oQ9WAJjFbpjfNOZIaMrViuLXh5b NHB


Step 3.  Customize your chat widget button, adding: 

  • Your brand name.
  • A brand subtitle
  • Add your phone number  and then
  • A welcome message

de7TtI9mLnvoXaVQ3OV2 2UQTh


Step 4. Complete your Chat widget settings

  • Add a default message that users can send. The default message prompts users to ask a question about a  particular page.
  • Add your brand image URL. Copy a URL of your logo and add it to this field. If you don’t already have an image CDN, you can create one here.
  • Choose the background color and add a CTA text.

                         .  bYAY31 UN30hZxQINp0yd5ewUWt rYe68etnmg w3N6cJxmhpki 9monQlq n FCX05CxYldShbwxvCDH0Mc9WaswCSD yDEmriT1giMwU0FgzPLkFKsptIKyra 5O2 WU azwH4


Step 5.  When you finish filling the form with relevant details, click “  Generate Widget Code,” once you click it, a drop-down with some codes snippet will appear, then click “copy to clipboard.”


Final step:
 If, at this point, you’ve copied the code snippet, the next step is to add that code snippet to the body tag on your website. If you aren’t familiar with the workings of computer code, seek support from your web service provider, so they’ll help you paste the code.

If you are tech-savvy, then navigate to the backend of your website, get to the index page, find the body tag and paste the snippet just below the closing body tag . Once you’ve pasted the code, save the changes and refresh the page. 

CU0Tf6DEj07LWcBtsPKbfryWWlT7nwCmbsMNTOi01wpc3QAkpG2d yK9TYgIFpy9uiPNJAKfhq6DQmxfostitF4YnIjb35s1gEL0j XeSbVAMyZ9d9m7DyMFH8hkpje eLLMZOVw

How to add WhatsApp to your Shopify store?

If you own a Shopify store and want to add a WhatsApp button in your store so that clients can easily reach you, the steps you’ll need to take are pretty simple. 

Step 1. 

Create and copy the WhatsApp widget code and sign into your Shopify profile. 

5KRC8D nlkzFXRxr9YnEnJfF4ch3QlzW3qZ10IURopsk6BXDqDlG0jRKsPAnZiH WuLsOqRPGmepB6wy0wMrj0XLq8BmXOgRPclnudcYNz6Mlp51XkGjOO Z2Jkys6q75IiscceL

Step 2.

Click “Online Store,” then click “themes,” and then click “actions” a drop-down menu will appear; on it, you’ll see “edit code” click it. Your Shopify store theme editor will appear. 

e9AmyIS47HwYDb5Ff01w6n0Zvr8xKiEuL3M 2TnxBWS4DJUEH mVBS7vNr1kCb679d1PLbMp47XD 4KbBdl0OowCodtZPuyL hN4mhvXFHhkfDyUTu vFVi4F0Pb DZPyoLW9EX1

Step 3. 

You’ll see a drop-down menu; go to the “theme.liquid file” and paste the WhatsApp widget code after the body tag and save the changes. Go to your home page and check the changes; you’ll see the WhatsApp button on the bottom right corner of the page. 

rIOQqPBtSgC5nctUh chAAyfhXwcM 8iIU6wdPMjib4Sq1qOosRFA2RGPVLsVKT Z9T1Qt6YesSFlkjQ drsaZeTLml2Xdg7gJpJSSbPWslomvPf8chmbIQY5VkBjZlru b r5c8

How to Manage Contacts with WhatsApp business API?

The WhatsApp business app provides many features to help small businesses manage contacts and conduct business services. These features are especially relevant in the initial stages of growing a small business when there aren’t too many customers, so the WhatsApp business app is sufficient.

However, as the business grows and the customer base expands, as an intelligent business owner, you’ll need to consider signing up for WhatsApp Business API, an upgraded version of WhatsApp that offers many advantages for small businesses on the rise. 

WATI helps you take advantage of the fantastic features of WhatsApp Business API. Intuitively designed to meet the various needs of business owners, whether it’s shared inboxes,  Broadcast messaging, segmentation of contacts, or abandoned cart reminders, WATI has you covered. 

With WATI, you can offer your customers robust support on WhatsApp, segment and tag them for easy communications and then assign customers to multiple agents, all with the same WhatsApp phone number. Sign up for a free trial or Join a free demo to see if WATI is a good fit for you.

Share This Post
Share on facebook
Share on linkedin
Share on twitter
Share on email
More To Explore