How to Add Whatsapp click to chat button to a website?

Nowadays WhatsApp is a very common chat application and every person is using it. And that’s why most of the companies realizing that direct communication with WhatsApp is needed then Whatsapp has created WhatsApp’s click to chat feature. This feature works on both your phone and WhatsApp Web.

It provides Instant communication to customers, which improves user experience on your website. A user just click on a link and without saving contact number they can start chatting.

Let’s start integrating on website

To integrate Whatsapp click to chat you need to create your link which has your contact number to initiate a chat on WhatsApp.

To integrate this you must have basic knowledge of HTML so that you can easily create a link. Below is the syntax of that link –

 https://wa.me/<number> where the <number> 

Note: Use a full phone number in the international format and don’t use zeroes, brackets, or dashes.

example:

If your number is 865 XXX XXXX and country code is 91 then use

https://wa.me/91865XXXXXXX?text=I%20am%20intrested%20in%20your%20service

Create link with pre-filled message:

WhatsApp also allows creating a chat link with a pre-filled message that will automatically appear in the text field of a chat.

A pre-filled message should be a URL-encoded message. You can encode your message into a URL-encoded message using the below link.

https://www.urlencoder.org/

Below is syntax of WhatsApp click to chat link syntax:

https://wa.me/Whatsappphonenumber?text=urlencodedtext

Here I will show you an example of Whatsapp click to chat button with CSS positioning –

<a href="https://wa.me/918655180340?text=I%20am%20intrested%20in%20your%20service" target="_blank" class="whatsapp_chat"><img src="https://img.icons8.com/color/48/000000/whatsapp.png"/></a>

Now to position this button on right bottom corner here is CSS code:

<style>
.whatsapp_chat{
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 11;
}
</style>

Add above given HTML code in your website pages and CSS code into CSS file or inside <head> tag.

Leave a Reply

Your email address will not be published. Required fields are marked *