In today’s fast-paced digital world, customers expect instant communication with businesses. Adding a floating WhatsApp button to WordPress is ideal.
Whether they’re asking a question, requesting a quote, or following up on an order, having a fast and convenient channel for communication can make all the difference. One of the easiest ways to achieve that is by integrating WhatsApp—the world’s most popular messaging app—directly into your website.
This tutorial will show you how to add a floating WhatsApp button to WordPress website using a simple code snippet. This button will appear as a WhatsApp icon on the bottom right corner of your website and, when clicked, will open a WhatsApp chat with your phone number.
This guide is ideal for beginners and developers alike — no plugin required!
Why Add WhatsApp to Your Website?
Before we dive into the code, let’s take a moment to understand why adding WhatsApp to your site can be beneficial.
- Instant communication: Customers can contact you directly without filling out forms or waiting for email replies.
- Better engagement: Users trust messaging apps more than web forms.
- Mobile-friendly: Most of your traffic likely comes from mobile devices, and WhatsApp is native to mobile.
- Increased conversions: Frictionless communication can lead to more sales and improved conversion rates.
What Are We Building Here?
We’ll be adding a small WhatsApp icon that floats on the bottom-right of every page. When clicked, it opens a chat window to a specified WhatsApp number using the official wa.me short link format.
The design will:
- Be circular and modern
- Use the official WhatsApp green color
- Contain a WhatsApp logo image
- Appear on all devices
- Require no plugins
The Code Snippet
Let’s get to the core of the tutorial — the code snippet. You can paste the following code inside your theme’s functions.php file. Or you can add it as a PHP code snippet using WPCode Lite. This approach will be more streamlined and protective than going ahead and updating your functions.php file.
// Add floating WhatsApp button to WordPress
add_action('wp_footer', 'add_whatsapp_floating_button');
function add_whatsapp_floating_button() {
?>
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25D366;
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
}
.whatsapp-float img {
width: 35px;
height: 35px;
}
</style>
<a href="https://wa.me/your-phone-number" target="_blank" class="whatsapp-float" title="Chat with us on WhatsApp">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>
<?php
}
You’ll then need to replace your-phone-number with your actual WhatsApp number, so it works correctly.
Step-by-Step: How to Use the Code
It will be the time then to apply the code and test it actually on your website to see if it works successfully.
Access functions.php
Go to your WordPress dashboard and follow:
-
Appearance > Theme File Editor
-
Select your active theme
-
Open
functions.php
💡 Pro Tip: Use a child theme or a code snippets plugin such as WP Code Lite to avoid losing changes after theme updates.
Paste the Code: Scroll to the bottom of functions.php and paste the snippet.
Save Changes: Click Update File to save.
Visit your site on both desktop and mobile. You should see a floating WhatsApp button in the bottom-right corner. When you click it, a new tab should open, redirecting you to a chat with the number.
Customizing the Button
Want to make the button match your site better? Here are a few customization ideas:
Change Position
Change bottom and right values to place the button differently, like:
bottom: 30px; left: 20px;
Change the Number
Replace your-phone-number in the URL with your own WhatsApp number in international format (without the + sign).
<a href="https://wa.me/your-phone-number" target="_blank" class="whatsapp-float">
Use a Different Icon
You can replace the img src attribute with any other WhatsApp icon URL, or even use an SVG inline.
Add Animation
Want the button to bounce or pulse? You can use CSS animation like:
animation: pulse 2s infinite;
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
When to Use a Plugin Instead
While this method is clean and lightweight, there are cases where a plugin might be better:
- You need chat widgets with schedule/availability
- You want analytics or message templates
- You want to integrate WhatsApp Business API
Some popular plugins for this include:
- Click to Chat
- Join.chat
- WP Social Chat
Final Thoughts
Adding a floating WhatsApp button to WordPress is one of the easiest ways to improve user interaction on your site. It only takes a few lines of code, doesn’t require a plugin, and works across devices. Plus, with over 2 billion WhatsApp users globally, you’re making it easy for customers to reach out in a way they’re comfortable with.
This method is ideal for:
- Small businesses
- Local stores
- Freelancers
- Agencies
- Anyone who wants to offer instant support
By using the code above, you’re not only enhancing your website’s user experience but also giving your visitors a familiar and fast way to contact you — which can ultimately lead to more leads, better service, and higher conversions.
