How to Add a Floating Button in WordPress for Direct WhatsApp Chat

Add a floating WhatsApp chat button to your WordPress website with this step-by-step guide. Increase engagement and make it easy for visitors to contact you directly on WhatsApp. Follow our PHP, HTML, and CSS code examples to add this useful feature to your website today.

To add a floating button in WordPress for direct WhatsApp chat, you can follow these steps:

Here is an example of PHP, HTML, and CSS code that you can use to create a floating WhatsApp chat button on your WordPress website:

First, add the following PHP code to your functions.php file in your WordPress theme.

PHP Code

function insertcart_whatsapp_button() {
echo '<a href="https://wa.me/1234567890" class="whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a>';
}
add_action('wp_footer', 'insertcart_whatsapp_button');

Make sure to replace “1234567890” with your own WhatsApp phone number, including the country code.

Next, add the following CSS code to your style.css file in your WordPress theme.

CSS Code

.whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
font-size: 24px;
line-height: 60px;
z-index: 9999;
transition: all 0.3s ease-in-out;
}

.whatsapp:hover {
background-color: #128c7e;
transform: scale(1.1);
}

You can also customize the button design using CSS. To do this, go to your WordPress dashboard, navigate to Appearance > Customize > Additional CSS, and add your custom CSS styles.

Finally, add the following HTML code to your WordPress page or post where you want the WhatsApp chat button to appear:

<div class="whatsapp-container">
<?php insertcart_whatsapp_button(); ?>
</div>

And that’s it! You should now have a floating WhatsApp chat button on your WordPress website. Feel free to customize the CSS code to match your website’s design.