How to Add a WhatsApp Floating Button to Your Website (Without Plugins)
In this post I’ll outline the steps needed to add a floating WhatsApp button to your website for free (like the one in the bottom corner of this page!).
When I was looking at how to do it myself, I never found a perfect guide and I found plenty of third-party tools or plugins that would do it at a cost, but it’s possible to do it yourself for free. Here’s my guide to help you.
No technical skills are needed to do this, but if you’re unfamiliar with HTML, CSS and JavaScript, it might be a little confusing. I’ll do my best to be clear and straightforward, but let me know in the comments or send me an email if something was unclear for you!
Steps to add a simple floating WhatsApp chat button
1. Add HTML code
First, take a look at this HTML code:
<!-- WhatsApp Floating Button HTML -->
<div id="whatsapp-button">
<a href="https://api.whatsapp.com/send?phone=1123456789" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/WhatsApp_icon.png" alt="WhatsApp" />
</a>
</div>
The first line is just a comment saying what the below code will do, which I recommend keeping so it’s easy to find it again on your site later, especially if you later add lots of other code.
The <a href> tag is the actual link of your button, going to api.whatsapp.com, which will open a WhatsApp conversation with the number specified in bold.
You need to change the phone number in the code and you need to include the country code. For example, if you’re in the US and your phone number is 909 971 7665, the link should be:
https://api.whatsapp.com/send?phone=19099717665
Note the 1 at the beginning to specify the country code.
The <img src> tag links to the specific WhatsApp icon image you want to use. In this case it’s using the image from Wikipedia. You can technically link to any image publicly online, for example a different type of WhatsApp logo or you could change both the image and the link to go to a different messaging app if you prefer.
Now you need to copy the code above (don’t forget to change to your phone number) and change the image if you want to.
Next, you need to paste the code in the header section of your website.
The header section will be somewhere different depending on what website builder you’re using. If you’re using Squarespace:
Click Website to enter your website
In the left sidebar click Website
Scroll to the bottom and under Utilities, click Website Tools
Click Code Injection. You’ll now be able to paste the above code into the header box.
For other website builders, Google online where to add custom code.
2. Add CSS code
Next you’ll want to style your image button to look nice. You might need to play around with this based on what works best for your website, but use this code to start:
/* WhatsApp Floating Button CSS */
#whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
#whatsapp-button a img {
width: 60px; /* Adjust size as needed */
height: auto;
}
Copy this code and add it to your website wherever you add custom CSS. For Squarespace, follow the same steps as before, but in Website Tools, choose Custom CSS instead of Code Injection.
3. Add JavaScript code
Finally, we need to add some JavaScript code to handle the floating behaviour of the WhatsApp button.
<!-- WhatsApp Floating Button JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var whatsappButton = document.getElementById('whatsapp-button');
whatsappButton.style.bottom = '30px'; // Change the distance from bottom as needed
});
</script>
Once everything is saved, go to your site and check if it works correctly. If something doesn’t look right, take a look through the code and see if you can figure out yourself what’s wrong. If not, let me know in the comments and I’ll try and help!
You can also try sharing the problematic code with a tool like ChatGPT or Copilot, explaining what looks broken, and often they’ll be able to recommend a solution.
Summary
Hopefully this post was helpful for you! I’m most familiar with the process on Squarespace, but I’ll try and add more steps for other website builders later if there’s interest. For most small businesses, I do recommend Squarespace as the best website builder.
