How To Add WhatsApp On Your WordPress Website?

dreamnotion Pixelmattic Blog Leave a Comment

[June 1st 2015] Update: We’ve developed a simple and elegant Whatsapp plugin that you can add to your website. If you want to see a demo, view this page on a mobile phone and tap on the Whatsapp icon.

Want us to help you add Whatsapp on your WordPress website?

[recaptcha id:25 size:normal]


Before getting into the details of adding WhatsApp on your WordPress website, let’s look at why Whatsapp is so important. The current stats show that mobile sharing has doubled as of second half of 2014. According to ShareThis, since January 2014 the mobile sharing increased by 28%. The amount of people browsing and sharing on their mobile devices have grown from 32% to 66%.

The content being shared is also dependant on the type of content, the device used, the site the material is on, etc:

Social media plays the biggest role in the content sharing on mobiles. One of the mobile-turned-to-desktop apps is WhatsApp, that allows private sharing of content. While facebook is still the leading social media platform on mobiles, their own acquisition WhatsApp, is largely preferred over facebook’s messenger.

There are pros and cons to adding the WhatsApp share button onto your website. But, as a content marketer you definitely need your content to get out there, private or not, it must reach your buyer persona.

WhatsApp is supported on most Android, BlackBerry, iPhone, and Nokia smartphones.

Infographic: WhatsApp Closing In On A Billion Users | Statista

You will find more statistics at Statista

The number of people using WhatsApp is more than Facebook. As a result, the content shared on WhatsApp has reached a larger audience and leads to content virality in a short span of time.

Having WhatsApp on your website can nearly double your traffic. This plugin is great for readers to share the articles that they read in real time. Moreover the difference in sharing it using the WhatsApp plugin, is that it’s kept private as compared to any other social media platform.


How to add the WhatsApp plugin?

To install WhatsApp on your WordPress site, go to Plugins option in your WordPress admin dashboard. Click on add new option, type the plugin name in the search bar and click search. Choose the plugin that you wanted and click on install. You will be asked to activate the plugin.

plugin setting whatsapp on your wordpress website

plugin setting whatsapp on your wordpress website

plugin setting whatsapp on your wordpress website

After you have activated the plugin, go to the settings page of your plugin, that would be present under  the settings option in the admin dashboard. Do the necessary changes as per your requirement. And that’s it! You are ready to share your content.

plugin setting whatsapp on your wordpress website


How to add WhatsApp hover icon on mobile?

whatsapp on your wordpress website mobile

To add WhatsApp hover icon on your mobile, you need to add HTML cide in your footer.php file and add CSS to your style.css file and Javascript code in the footer file.

HTML code:

Place this code in the footer as the icon will be displayed at the bottom of the screen.

<span class="whatsapp-share" style="display: inline;">

    <a href="whatsapp://send?text={URL of the page to be shared}" class="whats-up">

        <img src="{URL of WhatsApp icon}" alt="add" width="48">

    </a>

</span>


CSS code:

This media query shows the WhatsApp icon only till 720px screen size, which covers mobiles and tablets screen size.

@media screen and (max-width: 720px) {
.whats-up {
    position: fixed;
    bottom: 10%; // Change this value to match with your placement
    left: 40%; // Change this value to match with your placement
}

.whatsapp-share {
    display:none; // This hides the icon on large screen size, and will be visible when you scroll your page in mobile
}

}

span.whatsapp-share {
    display:none; // This hides icon on larger screen sizes
}


Javascript:

This script shows WhatsApp icon for lesser than 720px screen sizes and after your page is scrolled down i.e, 200px height from the top. 

<script>

jQuery(window).scroll(function() {

if (jQuery(window).scrollTop() > 200) {
    jQuery('span.whatsapp-share').show();
}
else {
    jQuery('span.whatsapp-share').hide();
}
});
}

</script>

 

That’s all it takes to add hover WhatsApp icon to your WordPress site.

 

Have you installed Whatsapp on your website? Tell us what you think.