Hey Zeenko Readers! Want to make it super easy for your website visitors to get in touch with you instantly? Adding a floating WhatsApp chat button is a fantastic way to offer direct communication, boost customer support, and potentially increase conversions. Instead of relying solely on contact forms or emails, you can let users chat with you directly on WhatsApp with a single click.
In this guide, we'll show you how to implement a stylish, floating WhatsApp button on your WordPress site using a simple code snippet. We'll provide the code as a PHP function, making it easy to add to your theme or via a plugin.
Why Add a Floating WhatsApp Button?
- Instant Communication: Visitors can chat with you in real-time.
- Mobile-Friendly: Works seamlessly on mobile devices where WhatsApp is installed.
- Increased Engagement: Encourages visitors to connect, reducing friction.
- Familiar Platform: Most people are already using WhatsApp daily.
Important Note Before You Start:
Modifying your WordPress theme's files directly can be risky and may cause issues if done incorrectly or if your theme is updated. The safest and recommended method is to use a code snippets plugin (like "Code Snippets") or a child theme to add custom code. If you choose to edit your theme's functions.php file directly, please make a backup first!
The Code Snippet (PHP Function):
We've wrapped the necessary HTML and CSS into a single PHP function. This function will hook into your site's footer, adding the button to every page.
PHP
<?php
/**
* Add a floating WhatsApp button to the WordPress footer.
* Created for zeenko.com
* Signature: uztzu87
*/
function zeenko_whatsapp_button() {
// --- Customize these values ---
// Replace with your WhatsApp number, including country code (e.g., 12125551212)
$whatsapp_phone = 'YOUR_PHONE_NUMBER';
// Replace with your desired initial message
$whatsapp_message = 'Hello, I saw your website and wanted to chat!';
// --- Do not edit below this line unless you know what you're doing ---
// Construct the WhatsApp API URL
$whatsapp_url = 'https://api.whatsapp.com/send?phone=' . urlencode($whatsapp_phone) . '&text=' . urlencode($whatsapp_message);
// Start output buffering to capture HTML and CSS
ob_start();
?>
<style>
/* WhatsApp Button CSS */
.wh-api {
position: fixed;
bottom: 0;
right: 0;
z-index: 9999; /* Ensure it's above other content */
}
.wh-fixed {
margin-right: 15px;
margin-bottom: 15px;
}
.wh-fixed > a {
display: block;
text-decoration: none;
}
button.wh-ap-btn {
outline: none;
width: 60px;
height: 60px;
border: 0;
background-color: #2ecc71; /* Green color */
padding: 0;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;
position: relative; /* Needed for the ::before pseudo-element positioning */
display: block; /* Ensure it takes up space */
}
button.wh-ap-btn::after {
content: "";
background-image: url("//i.imgur.com/cAS6qqn.png"); /* WhatsApp icon */
background-position: center center;
background-repeat: no-repeat;
background-size: 60%;
width: 100%;
height: 100%;
display: block;
opacity: 1;
}
button.wh-ap-btn:hover {
background-color: #20bf6b; /* Darker green on hover */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Tooltip styles */
button.wh-ap-btn::before {
content: "Chat with us"; /* Text that appears on hover */
display: block;
position: absolute;
right: 75px; /* Position the tooltip to the left of the button */
top: 50%; /* Vertically center the tooltip */
transform: translateY(-50%); /* Fine-tune vertical centering */
height: 25px;
background: #49654e; /* Tooltip background color */
color: #fff; /* Tooltip text color */
font-weight: 400;
font-size: 15px;
border-radius: 30px; /* Rounded corners for tooltip */
width: auto; /* Let content define width */
opacity: 0; /* Initially hidden */
padding: 0;
transition: opacity 0.4s, padding 0.5s; /* Animation for fade and padding */
line-height: 25px; /* Vertically align text in tooltip */
white-space: nowrap; /* Prevent text wrapping */
box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
}
.wh-fixed > a:hover button.wh-ap-btn::before {
opacity: 1; /* Show tooltip on hover */
padding-left: 10px;
padding-right: 10px;
width: auto; /* Ensure width adjusts to content */
}
/* Pulse Animation styles */
.whatsapp-pulse {
width: 60px; /* Match button size */
height: 60px; /* Match button size */
background: #10b418; /* Slightly different green for pulse base */
position: relative; /* Relative positioning for pseudo-element */
text-align: center;
color: #ffffff;
cursor: pointer;
border-radius: 50%;
display: block; /* Allow margin centering if needed */
line-height: 60px; /* Vertically center content */
}
.whatsapp-pulse:before {
position: absolute;
content: " ";
z-index: -1;
top: 50%; /* Center the pulse effect */
left: 50%; /* Center the pulse effect */
transform: translate(-50%, -50%); /* Fine-tune centering */
background-color: #10b418;
width: 90px; /* Pulse size */
height: 90px; /* Pulse size */
border-radius: 100%;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
opacity: 0.6;
-webkit-animation: pulse 1.8s ease-out; /* Webkit pulse animation */
animation: pulse 1.8s ease-out; /* Standard pulse animation */
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
25% {
-webkit-transform: translate(-50%, -50%) scale(0.3);
opacity: 1;
}
50% {
-webkit-transform: translate(-50%, -50%) scale(0.6);
opacity: 0.6;
}
75% {
-webkit-transform: translate(-50%, -50%) scale(0.9);
opacity: 0.3;
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
25% {
transform: translate(-50%, -50%) scale(0.3);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(0.6);
opacity: 0.6;
}
75% {
transform: translate(-50%, -50%) scale(0.9);
opacity: 0.3;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wh-fixed {
margin-right: 10px;
margin-bottom: 10px;
}
button.wh-ap-btn {
width: 50px;
height: 50px;
}
button.wh-ap-btn::after {
background-size: 55%; /* Adjust icon size for smaller button */
}
.whatsapp-pulse {
width: 50px;
height: 50px;
line-height: 50px;
}
.whatsapp-pulse:before {
width: 75px; /* Adjust pulse size */
height: 75px; /* Adjust pulse size */
}
button.wh-ap-btn::before {
font-size: 13px; /* Smaller tooltip text */
right: 65px; /* Adjust tooltip position */
top: 50%;
transform: translateY(-50%);
}
}
</style>
<div class="wh-api">
<div class="wh-fixed whatsapp-pulse">
<a href="<?php echo esc_url($whatsapp_url); ?>" target="_blank" rel="noopener noreferrer">
<button class="wh-ap-btn" aria-label="Chat on WhatsApp"></button>
</a>
</div>
</div>
<?php
// Get the buffered content and echo it
echo ob_get_clean();
}
// Hook the function into the footer
add_action('wp_footer', 'zeenko_whatsapp_button');
?>
How to Implement the Code:
You have two main options for adding this code to your WordPress site:
Method 1 (Recommended): Using a Code Snippets Plugin
- Go to Plugins > Add New in your WordPress dashboard.
- Search for "Code Snippets" and install and activate the plugin.
- Go to Snippets > Add New.
- Give your snippet a title, like "Floating WhatsApp Button".
- Paste the entire PHP code block from above into the "Code" area.
- Crucially, change
YOUR_PHONE_NUMBER and Hello, I saw your website and wanted to chat! to your actual WhatsApp number (including the country code, like +12125551212 or just 12125551212) and the desired default message.
- Make sure the snippet is set to "Run snippet everywhere".
- Click Save Changes and Activate.
Method 2 (Use with Caution!): Editing functions.php
- In your WordPress dashboard, go to Appearance > Theme File Editor.
- On the right-hand side, find and click on
functions.php.
- Scroll to the very bottom of the file.
- Paste the entire PHP code block from above just before the closing
?> tag if one exists, or simply at the very end if there's no closing tag.
- Crucially, change
YOUR_PHONE_NUMBER and Hello, I saw your website and wanted to chat! to your actual WhatsApp number (including the country code, like +12125551212 or just 12125551212) and the desired default message.
- Click Update File.
- If you see a blank white screen or an error after saving, this means there's a syntax error. You'll likely need to access your site via FTP or your hosting file manager to edit the
functions.php file and remove the code you just added to fix it. This is why the plugin method is safer!
Testing Your WhatsApp Button
Once you've added and activated the code (using either method), visit your website in a new browser tab or window. You should see the floating WhatsApp button appear in the bottom right corner of your screen.
- Click the button. It should open a new WhatsApp chat with your pre-filled message.
- Test on a mobile device as well to ensure it works correctly.
Customization:
You can easily customize the button's appearance (colors, size, position) by editing the CSS within the <style> tags in the PHP function. For example, to change the background color, find background-color: #2ecc71; and change the hex code. To change the "Chat with us" text, edit the content: property inside button.wh-ap-btn::before.
Conclusion:
Adding a WhatsApp button is a simple yet effective way to enhance communication with your website visitors. By following these steps, you can have a stylish, floating chat button live on your WordPress site in no time.
We hope this guide from zeenko.com helps you connect better with your audience! Let us know in the comments if you have any questions.
Comments