How to add a WhatsApp Chat Button to your website for FREE?

How to add a WhatsApp Chat Button to your website for FREE?

Nowadays, everyone around you be it your friends, your clients or your colleagues uses WhatsApp and is also proven to be one of the most used social media platform. So why not add it to your website and that too for free?

Adding a WhatsApp Chat Button to your website gives an easy way for your customers to talk to you directly and also gives them more confidence and trust from your shop. Also, having an all customisable chat button adds more to your brand image.

How the final result of the WhatsApp chat button will look like.

WhatsApp Chat Button Preview

Step By Step Guide

Chat Button Settings:

STEP 1: Click or paste this link in your browser. (

WhatsApp Chat Button

STEP 2: You can then see options on the right to customise, start with the background color. You can choose from the palette or could also write the Hex Code of the color.

WhatsApp Chat Button Customization

Choosing Color For WhatsApp Chat Button

STEP 3: Next you can type in your CTA (Call to action) Text which will be displayed on the chat button.

Chat Button Customization

You can notice the CTA Text written next to the WhatsApp logo

STEP 4: Next you can customise the dimensions of your button and also if you want to position it at the Bottom-Left of your website or Bottom-Right

STEP 5: Continue to Chat Widget Settings.

Chat Widget Settings:

In the chat widget, it is all about the chat window. You can start by typing in your Brand Name. You can also review all changes in the chat button preview at the bottom of the page.

Once you fill everything which includes: (Refer to the image below)

  • Brand Name
  • Brand Sub Title
  • Phone Number With Country Code
  • Welcome Text
  • Default User Message
  • Brand Image URL
  • Background Color and CTA Text
  • Border Radius

Features Of WhatsApp Chat Button

These are all the information reflected to the widget.

STEP 6: Click the Generate Widget Code.

Generate Widget Code For WhatsApp Chat Button

STEP 7: You will see a code snippet, you need to copy the whole code by clicking the copy to clipboard.

Code Snippet

STEP 8: Go to the main page of your website and open its html code.

Screenshot 2020 12 30 at 5.19.45 PM

STEP 9: Now find the <body> tag and paste the code above it

Screenshot 2020 12 30 at 5.20.57 PM

Code Snippet

STEP 10: Run and check if you have you WhatsApp Chat Button!

Screenshot 2020 12 30 at 5.22.20 PM

WhatsApp Chat Button Successfully Added

About WATI

Also for a detailed explanation on how to build a proper WhatsApp Chatbot by WATI dashboard you may view this video here.

WATI is a product of Clare.AI and is WhatsApp’s Official API Partner. The WATI Platform currently allows you to create a WhatsApp Chatbot without coding. You can use the drag and drop chatbot builder or create a chatbot using keywords through WATI. To know more about WATI, visit the official website.

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Leave a Comment

More To Explore