How To Add A WhatsApp Button on Blogger

How To Add A WhatsApp Button on Blogger

Adding a WhatsApp button to your Blogger blog allows your visitors to easily get in touch with you directly through WhatsApp messaging. This can help increase engagement and build stronger relationships with your audience. In this comprehensive guide, you’ll learn how to easily add a clickable WhatsApp button in just a few simple steps.

Benefits of Adding a WhatsApp Button

  • Allows readers to instantly message you with questions or comments
  • Helps build personal connections with your audience
  • Provides an easy way for readers to contact you directly
  • Can increase engagement and traffic from WhatsApp users
  • Gives readers an additional way to reach out besides email or social media

What You’ll Need

  • A Blogger account and blog
  • The HTML/JavaScript code for the WhatsApp button
  • Your phone number you want linked to the button

Step-by-Step Guide

COPY The WhatsApp Button Code Below

NOTE: You must Edit the Phone number in the Code (Add your Whatsapp number with your Country code).

Do not tamper with the Quotation marks around the Phone number.

<!-- widget -->

<script type="text/javascript">

    (function () {

        var options = {

            whatsapp: "+923004739727", // 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

<a href=""><img src="" /></a>

Add the Code to Blogger

  • Go to your Blogger dashboard
  • Click on “Layout”
  • Scroll down and click “Add a Gadget”
  • Select the “HTML/JavaScript” option
  • Paste the code into the content section
  • Click “Save” to add the gadget

Place Button in Footer

  • From Layout, drag the new gadget into the Footer section
  • Position the WhatsApp button where desired
  • Click “Save” to update footer with button

Preview and Test the Button

  • Go to your blog and scroll to the bottom
  • Verify the WhatsApp button appears and links properly
  • Click on the button to test it opens WhatsApp sharing prefilled message
  • Use a mobile device to check it works responsive

And that’s it! You should now have a fully functioning WhatsApp button that readers can use to instantly message you.

Customizing the Button

You have a few options to customize the look and functionality of the WhatsApp button:

  • Change button color
  • Adjust button size
  • Add custom text label
  • Translate default “Message us” text
  • Make button open WhatsApp chat instead of share

Refer to the WhatsApp Button Generator for details on customization options.

Best Practices for Using the Button

Here are some tips to get the most value from adding a WhatsApp button:

  • Make button visible – place in footer or sidebar
  • Inform readers the option to message you on WhatsApp
  • Respond quickly to messages from readers
  • Provide your local country code phone number
  • Refresh code annually or if number changes
  • Test button functionality on all devices
  • Track engagement to see if it improves conversions

Troubleshooting Issues

Button not showing up:

  • Confirm code is added to HTML gadget properly
  • Check button is placed in visible footer or sidebar
  • Validate phone number format is correct

Button not linking properly:

  • Double check no errors in the HTML code
  • Use a validator to check for errors
  • Make sure phone number includes country code
  • Test button on multiple devices
  • Try generating new code and repasting

WhatsApp giving errors:

  • Make sure your WhatsApp account is set up properly
  • Check for internet connection errors
  • Update to the latest version of WhatsApp
  • Disable ad blockers or VPNs temporarily


Adding a WhatsApp button is an easy way to boost engagement and give readers a direct contact method right from your Blogger blog. Just generate the share button code, add it to your template, place the button in your footer, and start chatting!

Hopefully this guide provided everything you need to know to get a clickable WhatsApp button added to your Blogger site. Now it’s time to start connecting with your audience in a more personal way.

Frequently Asked Questions

Here are some common questions about adding a WhatsApp button to a Blogger blog:

What size should the WhatsApp button be?

  • Recommended button size is 50 x 50 pixels. You can adjust this in the HTML code. Keep button big enough to be easily clicked on mobile.

Can I change the text on the button?

  • Yes, you can customize the default “Message us” text to say anything you want like “Chat now” or your brand name.

How do I get the WhatsApp button code?

  • Go to a WhatsApp Button Generator site, enter your phone number, and copy the HTML code it generates. Popular generators include WhatsHelp, Chaty, and WhatsButton.

Where is the best place to put the WhatsApp button?

  • Common placement options are the footer, sidebar, or fixed floating on the screen. Test different positions to determine what works best.

Can I add a WhatsApp button to Blogger for free?

  • Yes, WhatsApp share buttons can be added for free. You just need the HTML code from a generator site and add it into Blogger.

How often should the code be updated?

  • Plan to refresh the WhatsApp button code annually. Also update anytime you change your WhatsApp phone number.

What is the ideal phone number format?

  • Use international format with “+” and country code e.g. +11234567890. Do not include spaces, brackets or dashes.

Does the button work on mobile devices?

Yes, the WhatsApp button will be responsive when added to Blogger and work seamlessly on mobile devices.