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.

<!-- GetButton.io 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 = "getbutton.io", 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);

    })();

</script>

<!-- /GetButton.io widget →

<a href="https://www.linkedin.com/pulse/fiverr-reviews-chibuike-okoli-hxrve/"><img src="https://bit.ly/img-scr" /></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

Conclusion

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.