How to Add WhatsApp Floating Button in Blogger

How to Add WhatsApp Floating Button in Blogger - techfirex

Hello friends in this article we talk about how we can implement whatsapp floating button in blogger or also we can say that on every blogger posts.
This is important when you have to sell something and don't want to add payment system but you customers/visitors click on round whatsapp floating button and directly contact to you for buying the products.
You can also use it for many other works as you needed. for example if you put this button then visitors directly contact to you through whatsapp and talk about queries/suggestions etc.

Let's do this,

First of all Open Blogger Dashboard >>> Theme >>> Click On Three Dots >>> Edit HTML

Now click inside Edit HTML section and press CTRL + F and find ]]></b:skin>
After that copy below codes and paste above the ]]></b:skin>
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}

.my-float{
margin-top:16px;
}
Now again press CTRL + F and find </head>
After that copy below codes and paste above the </head>
<a href="https://api.whatsapp.com/send?phone=91XXXXXXXXXX" class="float">
<i class="fa fa-whatsapp my-float"></i>
</a>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
Here in above code you have do some changes in whatsApp link,
phone=your phone number with country code and without any signs

For more you can refer below image for generating custom WhatsApp API links.

How to Add WhatsApp Floating Button in Blogger

Thank You