Wondering how to add a floating Whatsapp button to your website? What if I told you this is pretty simple and could be achieved within 20 minutes? Sounds interesting right? Lets do this.

1) Get the .png WhatsApp image to be placed on the website, you can find this easily at iconmonstr.

2) Download the size as per your needs, 64px or 48px with .png format should work best. Also remember to change the color to green before you download

3) Copy the below code and paste it at the end in your html code. Ensure that it is inside the body tag.

<!-- Whatsapp Floating Button -->
<div style="position: fixed; bottom: 12%; right: 20px; z-index: 999999">
    <a href="https://api.whatsapp.com/send?phone=+9189********" target="_blank">
        <img src="images/whatsapp.png" />
    </a>
</div>
<!-- End Whatsapp Floating Button -->

4) Change the +9189** to your respective phone number, country code to be included.

5) If you want to tweak where it appears, feel free to play around with style=”position: fixed; bottom: 12%; right: 20px”

6) Ensure that you name the whatsapp icon downloaded earlier as whatsapp.png and you should place it inside images/whatsapp.png . If not, ensure that you point it to the right location in the tag.

<img src=”./location/whatsapp.png” />

And that is it, it is that simple to add a whatsapp button in your website. Feel free to reach out to me if you have any questions or have any other difficulties in achieving the same.