How Add WhatsApp Chat Button To Your Website

Share on facebook
Share on whatsapp
Share on pinterest
Share on telegram

This is descriptive guide on how to add WhatsApp chat button to your website or blog either on WordPress or Blogspot.

Have you ever wondered if it’s possible to add WhatsApp chat button to your website or blog so that your visitors can contact you? Yes, it is possible both on WordPress and Blogspot.

In this article, I will show you how to simply add WhatsApp chat button to Blogspot blogs and WordPress (with the use of plugin), like I did on this blog.

NOTE: You can also add Facebook messenger chat button with same process.


Why you need WhatsApp chat button on your website

You may be wondering why need it installed on your website, the reasons are not farfetched. If you must know, WhatsApp is one of the most popular social media network presently.

1). Gives your website visitors quick and easy access to contact you.

2). As a business man or who offer services on his website, it means more sales

3). It creates a funnel where you can keep in touch with your prospects

4). It brings about increase in subscribers.

People like easy way to contact. So, having WhatsApp chat button or messenger chat button on your website is the best way to help your business.

How to add WhatsApp chat button on Blogspot

The website that makes this thing easy is With this website, you can add WhatsApp, messenger, email, and more to your website. They offer free and premium services.

NOTE: On free version, you won’t be able to add more than three chat buttons of different social media and some features will not work. If you want full service, upgrade.

To add WhatsApp chat button to blogspot, follow these simple steps.

#1. Log on to widget section. When on the website, you don’t need to sign up or in.

#2. Scroll down to section where you will select WhatsApp chat icon.

#3. Enter your WhatsApp number with the country code ( e.g +2349020000000 for Nigerians)

#4. Remember its free version, the greeting message won’t work. Scroll down and enter your email to get the code you will add to your website. See example below.

<!– widget –>
<script type=”text/javascript”>
(function () {
var options = {
whatsapp: “+2347065054820“, // WhatsApp number
call_to_action: “Message us”, // Call to action
position: “right”, // Position may be ‘right’ or ‘left’
var proto = document.location.protocol, host = “”, url = proto + “//static.” + host;
var s = document.createElement(‘script’); s.type = ‘text/javascript’; s.async = true; s.src = url + ‘/widget-send-button/js/init.js’;
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName(‘script’)[0]; x.parentNode.insertBefore(s, x);
<!– / widget –>

To use this code, change the number in the fourth line to yours.

#5. Go to your blogspot dashboard and click on add Gadget. When you do, click on the plus (+) sign in front of HTML/JavaScript. OR, you can edit your theme and add it before </body>.

#6. Add the code you copy above to it, don’t give it a title and save. Boom! View your blog to see the button at the footer of your blog.

How to add WhatsApp chat button on WordPress

To add WhatsApp chat button on WordPress, you will make use of plugins. There are tons of them, some are old-fashioned, some are compatible with the current WordPress version.

NOTE: You can also use the code above in WordPress without installing plugin. Just copy the code and paste it inside the custom HTML widget on your WordPress

I recommend;

  • WhatsHelp and
  • WhatsApp chat WP by Alexandre Caporal (Am currently using this)

To install a plugin on WordPress,

  • Go to your WordPress admin area
  • Click on Plugin and select, add new
  • Search for WhatsApp chat WP and install. Once installed, Activate it.
  • Now back to settings or installed plugins,click on settings below the actual plugin you installed. Set up how you want it to look and save the changes.
  • To make use of the short code inside a post or text like I do below my header, copy the code. Simple!

For a detailed guide on how to install plugin, download my eBook on WordPress.

How to add WhatsApp chat button with a simple code anywhere on your website

There is a simple code you can use to add WhatsApp chat link to your website (especially contact page) such that when people click on it, it will perform same function as the steps discussed above and they can chat with you directly.

You can link it with a picture or a small button. See the code below👇

Remember to change the bold texts to yours and do not bold it when you write yours.

If you know your way around CSS, you can style it to make it look beautiful.

👉Click Here To Chat Me Up👈


You have learnt how to add WhatsApp chat button, messenger and other social media buttons to your website. I believe you know it can greatly help your business.

Let me know if you find this post helpful, endeavor to share to your friends👍😉

Share on facebook
Share on whatsapp
Share on pinterest
Share on telegram

1 thought on “How Add WhatsApp Chat Button To Your Website”

Leave a Reply

Your email address will not be published. Required fields are marked *


Do You Want To Learn Cryptocurrency Trading?

Would you like to learn the easiest and detailed way to trade Cryptocurrency Trading in 2021?


WordPress Blog Creation

WordPress Blog Creation

Get FREE ACCESS to the course that teaches you how to create your blog (in under 7 days) without hiring an EXPENSIVE blog designer