In this extensive tutorial, we will guide you through the process of adding a Viber message button to your WordPress website using simple HTML. This feature allows your visitors to initiate a Viber chat with you or your business directly from your website.
Why Use a Link to Open Viber?
The primary reason for using a link to open Viber is to initiate a conversation or chat with a specific contact or business on the Viber platform. When a user clicks on the Viber link, it opens the Viber application on their device (if installed) or directs them to the Viber web interface if they’re using a desktop browser.
The Viber link consists of the following components:
- viber://chat?number=%2B3069000000: This is the Viber URL scheme that initiates a chat. You should replace %2B3069000000 with the actual Viber phone number you want users to contact.
- %2BÂ is equal to the “+” character which all phone numbers begin with. Then follows the country code, and lastly the actual phone number. So for example if your phone is 12345678, and your country code is +45, then the link should be: viber://chat?number=%2B4512345678
HTML code vs. Using Plugins
Using simple HTML code to add a Viber 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 Viber button minimizes additional requests.
Getting a proper Viber Logo Image to avoid copyright infringements
Before we proceed with the technical steps, it’s necessary to use icons that are allowed by the respective owners of the App you would like to create the link for. Viber has a descriptive page for the accepted brand policies and logos used, where you can find the allowed logos. Here’s how you can get your Viber logo:
- Visit Viber Brand Center: To ensure you’re using an allowed Viber logo, head over to Viber Brand Center (https://www.viber.com/en/brand-center/), the official source for Viber brand recources.
- Comply with Viber Brand Policies: Make sure your project is complying with presented brand guidelines and policies:
- Choose a Suitable Viber Logo: Browse through the available options and choose a Viber logo that aligns with your website’s design and preferences.
- Download the SVG Image: After choosing the perfect Viber logo, click on it to access the download page. Download the SVG file to your computer.
- Upload it to your WordPress: Lastly, upload it in your website through the Media section, just like you upload any other media resource on your WordPress.
Adding the Viber Message Button Code to WordPress
Adding viber floating button on every page
Now that you have a copyright-free Viber 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 Viber message button that floats in a fixed position on your website’s pages. Here’s how you can do it:
function add_viber_message_button() {
echo '<a id="main-viber-button" href="viber://chat?number=%2B3069000000" 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_viber_message_button');This code functions similarly to the WhatsApp example you provided but is customized for Viber. It hooks the Viber button to the wp_body_open action, ensuring that the button is added just after the <body> tag in your website’s HTML structure.
We can also style the Viber button and make it stick to the bottom right part of the screen using CSS:
/*** Style Viber button ***/
#main-viber-button {
position: fixed;
bottom: 15px;
right: 15px;
z-index: 10;
}By using the above styling we instruct the button to always float on the bottom right of the screen. The final result should look like this:
Adding viber to page with Shortcode
To make it even more convenient, you can create a shortcode that allows you to place the Viber message button in steady points on your pages or posts. Here’s a shortcode you can use:
function viber_message_button_shortcode() {
ob_start();
?>
<a id="shortcode-viber-button" href="viber://chat?number=%2B3069000000" 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('viber_button', 'viber_message_button_shortcode');Just copy and paste this HTML code into your page or post’s HTML editor. This method allows you to add the Viber button with ease, giving you complete control over its placement within your content. Whether you choose to incorporate it through WordPress functions or this straightforward HTML approach, you’ll be able to provide your visitors with a convenient way to initiate Viber chats directly from your website.
The end result would look like the image below, with the button displaying on the front-end:
Lazy Loading Image Considerations
When implementing the Viber 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 Viber 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 Viber 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 Viber button on various devices and browsers to ensure it functions as expected.
- Privacy: Be mindful of privacy concerns when using Viber links. Make it clear to users that clicking the button will open Viber and that their interactions will be subject to Viber’s privacy policy.
Stay connected with your visitors using Viber!
By adhering to these guidelines and thoughtful considerations, you can seamlessly incorporate a Viber 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 Viber, 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.