In this extensive tutorial, we’ll walk you through the process of adding a WhatsApp message button to your WordPress website using simple HTML. This feature allows your visitors to initiate a WhatsApp chat with you or your business directly from your website.
Why Use a Link to Open WhatsApp?
The primary reason for using a link to open WhatsApp is to initiate a conversation or chat with a specific contact or business on the WhatsApp platform. When a user clicks on the WhatsApp link, it opens the WhatsApp application on their device (if installed) or directs them to the WhatsApp web interface if they’re using a desktop browser.
The WhatsApp link consists of the following components:
- https://wa.me/: This is the base URL for WhatsApp.
- +3069000000: This represents the phone number, including the country code, to which the user will send a message. You should replace this with the actual phone number you want users to contact.
Lightweight Approach vs. Using Plugins
Using simple HTML code to add a WhatsApp message button is considered a lightweight approach compared to using WordPress plugins. Here’s why:
Performance: HTML code directly inserted into your theme is more efficient and performs better than plugins because it doesn’t introduce additional code overhead or database queries.
Control: With HTML, you have full control over the button’s placement, appearance, and behavior. You can customize it to match your website’s design seamlessly.
Loading Speed: Plugins can add extra HTTP requests and assets, potentially slowing down your website. Using HTML code for a WhatsApp button minimizes additional requests.
Getting a proper WhatsApp Logo Image and avoiding brand infringements
Before we dive into the technical steps, it’s essential to acquire icons that are allowed by the respective owners of the App you would like to create the link for. WhatsApp has a descriptive page for the accepted brand policies and logos used, where you can find the allowed logos. Here’s how you can do it:
1. Visit WhatsApp Brand Resource Center
- To ensure you’re using an allowed WhatsApp logo, head over to WhatsApp Brand Resource Center (https://about.meta.com/brand/resources/whatsapp/whatsapp-brand/), the source for official logos.
2. Comply with the policies and download logo
- Ensure you comply with the policies and download the logo you prefer. There is a variety of WhatsApp logo options available.
4. Upload the image to your WordPress website
- After choosing the perfect WhatsApp logo, upload it to your website in the Media section.
Adding the WhatsApp Message Button Code to functions.php
Now that you have a copyright-free WhatsApp logo, it’s time to integrate it into your WordPress website by adding the necessary HTML code to your child theme’s functions.php file. This code snippet will allow you to display the WhatsApp message button that floats in a fixed position on your website’s pages. Here’s how you can do it:
function add_whatsapp_message_button() {
echo '<a id="main-whatsapp-button" href="https://wa.me/+3069000000" rel="noopener noreferrer nofollow"><img src="https://www.mywebsite.com/wp-content/uploads/whatsapp-logo.png" width="60px" height="60px" /></a>';
}
add_action('wp_body_open', 'add_whatsapp_message_button');Let’s break down what this code does:
add_whatsapp_message_button()is a custom function that echoes the HTML for the WhatsApp message button. It includes the WhatsApp link and the image.add_action('wp_body_open', 'add_whatsapp_message_button')hooks theadd_whatsapp_message_buttonfunction to thewp_body_openaction, ensuring that the button is added just after the<body>tag in your website’s HTML structure.
As soon as you add this code snippet to your website, the whatsapp button is displayed in the front end:
Let’s add a little CSS code to style our button and make it stick to the bottom right part of the screen. You can your CSS code wherever you like, meaning either to your child’s theme style.css or to the Customize editor’s Custom CSS:
/*** Style WhatsApp button ***/
#main-whatsapp-button{
position:fixed;
bottom:15px;
right:15px;
z-index:10;
}
And now the final result is a perfect WhatsApp button for our website, always staying in front of our visitors when they browse through our website:
Creating a Shortcode for Flexible Placement
To make it even more convenient, you can create a shortcode that allows you to place the WhatsApp message button in steady points on your pages or posts. Here’s a shortcode you can use:
<?php //don't copy this line
/*** the rest of functions.php code ***/
//create WhatsApp button
function whatsapp_message_button_shortcode() {
ob_start();
?>
<a id="shortcode-whatsapp-button" href="https://wa.me/+3069000000" rel="noopener noreferrer nofollow"><img src="https://www.mywebsite.com/wp-content/uploads/whatsapp-logo.png" width="60px" height="60px" /></a>
<?php
return ob_get_clean();
}
add_shortcode('whatsapp_button', 'whatsapp_message_button_shortcode');With this shortcode, you can place [whatsapp_button] in your pages or posts to display the WhatsApp message button wherever you need it. Customize the WhatsApp link and image source as per your requirements.
And after adding the shortcode to your pages or posts, the WhatsApp button will be displayed on the frond-end:
That’s it! By now you can seamlessly integrate a WhatsApp message button into your WordPress website, enhancing user engagement and providing a direct communication channel for your visitors. If you are a performance geek like us, take a few seconds to read some of our considerations following next.
Lazy Loading Image Considerations
When implementing the WhatsApp message button using the wp_body_open action in your theme’s functions.php file, you typically don’t need to use lazy loading for the image. This is because the button is intended to be visible immediately when the page loads, so the image should load without delay.
However, if you decide to use the WhatsApp button shortcode in the footer or other locations where it may not be immediately visible, you can consider adding lazy loading to the image. Lazy loading defers the loading of off-screen images until they are needed, helping to improve page load times.
To add lazy loading to the image in the shortcode, you can modify the <img> tag as follows:
<img src="https://www.mywebsite.com/wp-content/uploads/whatsapp-logo.png" width="60px" height="60px" loading="lazy">By adding the loading="lazy" attribute to the image tag, you enable the browser’s built-in lazy loading feature.
Additional Considerations
- Accessibility: Ensure that the WhatsApp button is accessible to all users, including those with disabilities. Use appropriate alt text for the image, and ensure that the button is keyboard navigable.
- Testing: Always test the WhatsApp button on various devices and browsers to ensure it functions as expected.
- Privacy: Be mindful of privacy concerns when using WhatsApp links. Make it clear to users that clicking the button will open WhatsApp and that their interactions will be subject to WhatsApp’s privacy policy.
Stay connected with your visitors using WhatsApp!
By adhering to these guidelines and thoughtful considerations, you can seamlessly incorporate a WhatsApp message button into your WordPress website using straightforward HTML. This approach not only guarantees optimal performance but also fosters enhanced user engagement. By offering your visitors a direct and efficient means to connect with you or your business via WhatsApp, you can encourage valuable interactions and make their experience on your website more interactive and convenient. Don’t miss out on the opportunity to enrich your website’s functionality while keeping it lightweight and user-focused.