How to Add WhatsApp Float Icon on WordPress & HTML

Hello Friends, Today I will tell you how to add WhatsApp Float Icon on your website without writing more code. I will give you a simple code that will setup a WhatsApp float button on your website. So Lets start…

Add WhatsApp Float Icon on WordPress & HTML

Today my one client needs a WhatsApp Chat Icon on their website. He is using WordPress for his woo commerce website. We can setup this via plugin easily but He never like more plugins in their WordPress dashboard for simple task. I have write a code for him.

You can also use this code on any type of website where HTML & CSS working. If you are using wordpress then add below code in header.php between <head> Below code</head> tag.

<!–Whats App Float Button on any website –>

<a href=”https://api.whatsapp.com/send?phone=91xxxxxxxxxx” class=”floating” target=”_blank”>
<i class=”fa fa-whatsapp float-button”></i></a>

<style>
.floating{
position:fixed;
width:50px;
height:50px;
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;
}

.float-button{
margin-top:10px;
}
</style>

I hope this code will fixed your problem of WhatsApp Float Icon. If you like this post kindly share it to your friends.

Also check: build your eCommerce store using WordPress

 

Leave a Comment

Share via
Copy link
Powered by Social Snap