How to Add a Floating WhatsApp Button in WordPress (Step-by-Step)

Reading Time : 6-7 Minutes

Why You Need a Floating WhatsApp Button

People are impatient. They want answers fast. If a visitor lands on your site and has a question, what do they do? They could search your site, look for a contact form, or—most likely—they’ll just leave. That’s lost business.

A floating WhatsApp button changes that. It gives visitors a direct line to you. They click it, open WhatsApp, and send a message. Simple. No forms, no waiting.

Adding a WhatsApp button is easy. You don’t need coding skills or expensive plugins. In this guide, I’ll show you how to add one step by step. Whether you use a plugin or a manual method, you’ll be up and running in minutes.

Method 1: Adding a Floating WhatsApp Button Using a Plugin (Fast & Easy)

If you don’t like dealing with code, this is for you.

Step 1: Install and Activate the Plugin

1. Log in to your WordPress Dashboard.
2. Go to Plugins > Add New.
3. In the search bar, type Click to Chat (by HoliThemes is a good choice).
4. Click Install Now, then Activate.

Step 2: Set Up Your WhatsApp Button

1. Go to Settings > Click to Chat.
2. Enter your WhatsApp number (with country code, e.g., +919876543210).
3. Customize the default message (what users see when they open WhatsApp).
4. Choose the position (bottom left or bottom right).
5. Save your settings.

Step 3: Test It

Visit your site in incognito mode (so it’s like a new visitor is seeing it). Click the WhatsApp button. If it opens WhatsApp, you’re done.

Want to speed up your site after adding new plugins? Check out our guide on optimizing WordPress performance.

Method 2: Adding a Floating WhatsApp Button Without a Plugin (Manual Code)

If you want to keep things lightweight, skip the plugin and add the button manually.

Step 1: Copy This Code

<a href="https://wa.me/919876543210" class="whatsapp-float" target="_blank">
  <img src="https://yourwebsite.com/whatsapp-icon.png" width="50" height="50">
</a>
<style>
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
  }
</style>

Step 2: Paste It in WordPress

1. Go to Appearance > Theme Editor.
2. Find footer.php.
3. Paste the code before the closing tag.
4. Save changes.

Step 3: Test It

Open your site on a mobile device. Tap the WhatsApp button. It should open WhatsApp instantly.

Need more customization? How to Create Custom Pages in WordPress (Step-by-Step).

Which Method Should You Use?

If you prefer speed and simplicity, use the plugin. If you want full control and a lighter site, go manual.

Best Practices for Using a WhatsApp Button

1. Make sure you actually respond – If visitors message you and never get a reply, they won’t trust your business.
2. Use a business number – Keep personal and business chats separate.
3. Add a CTA near the button – A small note like “Got questions? Chat with us on WhatsApp!” increases clicks.

Final Thoughts

A WhatsApp button makes it easy for visitors to reach you. More conversations mean more sales. And the best part? It only takes a few minutes to set up.

So, whether you go with a plugin or a manual method, don’t overthink it. Just set it up, test it, and start chatting with customers.