How to Make a Whatsapp Chat Widget Button For Website

This widget is optional you can choose to add it or not. Some bloggers may choose to keep their WhatsApp privacy, but there are also some who actually write down their WhatsApp number or contact that is easy to contact for business and so on.

How to Make a Whatsapp Chat Widget Button For Website

That's why we made this tutorial maybe you need this widget. One of the advantages of this widget is that it is easier to customize, you can change the color and width of the widget easily. See how to create a Whatsapp chat widget below:

Demo

To see firsthand how this widget looks, you can directly see it at the link below:

Demo Widget

How to Make a Whatsapp Chat Widget Button 

#First step - Adding CSS code

Add CSS Above ]]</b:skin> Close Tag.

Note:

In the : root{...} section you can change the color of the header, icon and width of the widget as you wish. Also replace the left text which has been marked with right to change the position of the widget so that it is on the right

#Second step - Writing HTML code

There are two options for placing this HTML code, the first is the easiest on the Blogger Layout menu, add a new HTML widget in the sidebar and paste all the HTML code below.

The second is to paste all the HTML code below before the </body> tag , it's all the same, it's up to you which method you want to choose.


Description:
Change the part marked with your Whatsapp number, also change the message text on WA according to your wishes.
HTML


To change the default text "Assalamualaikum, I want to ask" on Whatsapp chat with the text you want, you can use this url encoder . Copy the result from the encode and paste it in the marked section.

Reference:
Relevant Tips is a blogging platform about Blogger, Relevant information, Digital marketing and so on.

Post a Comment