How To Add A Custom WhatsApp Button To Your Blog, Fast And Easy Way.

Table Of Content

Introduction
Html code for the head section
Html code for the body section
Styling code for the WhatsApp button icon

Hi, welcome to utilitarian blog. In this tutorial I will be showing you how you can add a custom whatsApp button to your blogger website.

Do you know that without the button on your site, visitor will find it very difficult to contact you easily.

In some-Cases when you use your blog to promote your business, you will surly need this button, so you must have known that using WhatsApp Business will allow your business to get in touch with more than 1.5 billion people around the world in less period of time, but the fact is that, to reach these potential customers that you need, one must take advantage of every available channel to motivate those potential customers, to let them contact your business through WhatsApp chat.

If you keep in mind that currently mobile devices generate almost half of your blog’s traffic, your blog can be one of the best sources of online interactions.

For instance if you are into a business that involves interaction with your customers, like selling or distribution of services like, data selling or e-book distribution, you will like your visitors to chat you up for a better interaction. So I want to share a simple and attractive way to put a click to chat button on your website, this will allow your visitors to contact you with a single click. To do this, you must have access to your website’s code, and basic knowledge of web programming or simply look for a programmer to help you do this.

WhatsApp latest features you need to know.

An example of this is just like the one on this page, when you click on the whatsApp icon, it will direct your visitor/customer to the page where they can connect with you directly on whatsApp using the number you have provided.

How to add whatsApp icon to your website.

The first thing you need to do is to setup the html code. In this code is where you format how the whatsApp Button will display on your webpage. Since we want this code to appear on every page of your blog then we use three different set of codes, namely the the head section code, the body code and the styling code.

Therefore you have to add these code separately to your blog theme html.

Adding Code To The Head Section Of Your Theme

You can start by adding the head section code which control the display of the whatsApp icon from the font awesome platform, we have to add this source code so that the icon can be displayed. Copy this code snippet below

and navigate to your blogger setting, click on theme > Edit html and then paste the code you have copy just before the end of the head section tag

</head>

then hit on save.

Adding Code To The Body Section Of Your Theme

For the display of the whatsApp icon, copy this code snippet below

and paste it just before the end of body tag,

</body>

of your blog. Remember to change the phone number to your prefer number before adding the code

Adding The CSS Code To The Skin Section of Your Theme

Finally you will add the Css code. go back to your blog theme code and scroll up to the Css section and paste the code just before the code

]]></b:skin>

hit on save and then refresh your blog and boom, you should see the whatsApp Button display.

Copy the Css code below you can change the direction of the icon by changing right to left in the code snippet, below is the code.

style 
.whatsapp-btn-container {

position: fixed;

right: 30px;

opacity: 0;

bottom: -50px;

padding: 24px;

animation: fade-up 1000ms forwards;

animation-delay: 1000ms;style 
.whatsapp-btn-container {

position: fixed;

right: 30px;

opacity: 0;

bottom: -50px;

padding: 24px;

animation: fade-up 1000ms forwards;
    animation-delay: 1000ms;
    Z-Index: 500;

} @keyframes fade-up {

100% {

bottom: 24px;

opacity: 1;

}

} .whatsapp-btn-container .whatsapp-btn {
    font-size: 48px;

Z-Index: 500;

} @keyframes fade-up {

100% {

bottom: 24px;

opacity: 1;
    }

} .whatsapp-btn-container .whatsapp-btn {
    font-size: 48px;

color: #25d366;

display: inline-block;

transition: all 400ms;

}.whatsapp-btn-container .whatsapp-btn:hover {

transform: scale(1.2);

}

.whatsapp-btn-container span {

position: absolute;

top: 0;

left: 4px;

font-family: "Roboto", sans-serif;
    font-weight: bold;

color: #075e54;

transform: rotateZ(20deg) translateX(10px);

opacity: 0;

transition: all 400ms;

}.whatsapp-btn-container .whatsapp-btn:hover + span {

transform: rotateZ(0deg) translateX(0px);

opacity: 1;
}

That is exactly how you can add this custom whatsApp button to your blogger website. Thanks a lot for reading, if you found this very useful kindly share this with your friends, use the share button below.

2 Comments

Edward1 June 2022 at 05:55
How can I add a button for the WA Plus app..?
Utilitarian25 June 2022 at 17:23
You can get the icon for WA plus from font awesome and then use the icon to replace the original WhatsApp icon in the code. I hope you understand?