Add floating whatsapp to your website – free & easy

If you want to make it easier for visitors to contact you, adding a floating WhatsApp button to your website is a great solution. It allows users to start a conversation with you instantly without searching for your contact details.

In this guide, I’ll show you how to add a floating WhatsApp icon to your website for free—without using any plugins! Whether you’re using WordPress, Wix, Squarespace, Webflow, Swipe Pages, or any other website builder, this method works seamlessly.

📌 Why Add a Floating WhatsApp Button?

✅ Instant Communication – Visitors can contact you with just one click.
✅ Boost Conversions – Engaging with potential customers directly can increase sales.
✅ No Plugins Needed – Avoid slowing down your website with unnecessary plugins.
✅ Works on Any Website – Whether it’s a WordPress site or a custom-coded page, this method works everywhere.

🛠️ How to Add Floating WhatsApp to Your Website

Simply copy and paste the following code into your website’s HTML:

Step 1: Copy the Code Below

<a href="https://wa.me/1234567890" class="whatsapp-float" target="_blank">
    <img src="https://i.imgur.com/Gq7GVKT.png" alt="WhatsApp" class="whatsapp-icon">
</a>

<style>
    .whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .whatsapp-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
    }

    .whatsapp-icon:hover {
        transform: scale(1.1);
    }

    @media (max-width: 768px) {
        .whatsapp-icon {
            width: 50px;
            height: 50px;
        }
    }
</style>

Step 2: Replace the Phone Number

In the code, replace “1234567890” with your actual WhatsApp number (including the country code).

For example, if your number is +1 987 654 3210, update the link like this:

Step 3: Add the Code to Your Website

Now, place the code in your website’s footer, HTML editor, or custom code section, depending on the platform you’re using.

To add it globally (on all pages):

Use a Code Snippet Plugin

If you don’t want to edit theme files, you can use a plugin like Code Snippets.

1. Install and activate the Code Snippets plugin.
2. Go to Snippets → Add New.
3. Enter a title like Floating WhatsApp Button.
4. Paste the following code inside the PHP Code box:

function add_whatsapp_floating_button() {
    echo '<a href="https://wa.me/1234567890" class="whatsapp-float" target="_blank">
            <img src="https://i.imgur.com/Gq7GVKT.png" alt="WhatsApp" class="whatsapp-icon">
          </a>
          <style>
            .whatsapp-float {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1000;
            }

            .whatsapp-icon {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
                transition: transform 0.3s ease-in-out;
            }

            .whatsapp-icon:hover {
                transform: scale(1.1);
            }

            @media (max-width: 768px) {
                .whatsapp-icon {
                    width: 50px;
                    height: 50px;
                }
            }
          </style>';
}
add_action('wp_footer', 'add_whatsapp_floating_button');