Floating WhatsApp button without Plugin in WordPress website are those which floats on top of Website without disturbing the content of the website. It works great as a CTA (Call to action) button which helps website visitor to take instant action and respond to any specific action.
Table of Contents
Floating button can be anything like Call button, Whatsapp, social icons, Mail icon which direct customer to specific link when they click on it. In this blog we gonna show you how you can add a Floating WhatsApp button without Plugin on your website (WordPress or HTML) without using any JavaScript. Its a pure HTML and CSS based floating WhatsApp button without plugin.
Let’s come to point.
You can follow these 4 steps to add Floating WhatsApp button without Plugin for your wordpress or HTML website. It will work on both.
- Add the font awesome icons CSS via max CDN link before </head>. if its already added in your WordPress by theme developer then ignore this step.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">- Add the whatsapp button link which will initiate the opening process. Add your own number and text in code below.
<a href="https://api.whatsapp.com/send?phone=0987654321&text=Hello%21%20." class="floating" target="_blank">- Add the fa-fa icon HTML code to make it float.
<i class="fa fa-whatsapp float-button"></i>
</a>So complete Code will look like below after adding Font-awesome CDN link in <head> tag. So once code added, you will have Floating WhatsApp button without Plugin on your WordPress website.
<a href="https://api.whatsapp.com/send?phone=0987654321&text=Hello%21%20." class="floating" target="_blank">
<i class="fa fa-whatsapp float-button"></i>
</a>- Add CSS in your CSS file to make it float on website. You can change CSS as per requirement like Left/right, Height, width etc.
.floating{
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;
}
.float-button{
margin-top:16px;
}Once all done the final result will be like a floating WhatsApp button on right bottom on your screen.
Just follow all the steps below and you are good to go. In case if its not showing properly then do a hard refresh (Ctrl+F5) or open in Incognito Mode to check.
You can use same code to show any floating icon like Calling button or social button. Just replace the font awesome code in 3rd step with the respective fa-fa icon and link.
You can also align multiple buttons one above other. It’s all about how to use CSS code.
NOTE : If you are using WordPress then add the fontawesome CSS in header file using insert header footer plugin (Use if your theme don’t have option to add CSS/JavaScript code in header or footer). Add CSS code in style.css file of your child theme and Floating link and HTML code in footer of your theme.
So that’s all. Give it a try and let us know how it works in comment section. You can ask our Developer to help you
Happy Coding!!
I did it for my client! Superb! Thanks!
It worked. Thank you very much!
If I want to add a second float button, using the same code, how can I make the css understand which one I want to configure?
hi,
Yes same code, just change the CSS classes and it will work. You can also ping us on whatsapp at 7838741037
Regards
Not working on astra theme the whatsapp symbol is not visible
Replace to
It will work.
Button showing but, Button showing only homepage in my website. Help me
Hello,
Akash, you have to add this code on your footer.php file in wordpress. for help, please whatsapp us.
Regards
Simple but does the job. Thanks.
whatsapp button iphone is not working