WhatsApp Click to Chat - Add WhatsApp Chat Button on Website


WhatsApp buttons are really useful for small businesses. It is a very effective and feasible way of getting new leads.

In fact, BUZZFEED says
iPhone users are clicking their new WhatsApp button more than Twitter's. This was enough for us to build a WhatsApp sharing button generator, so you can easily create your own.
Though this is for WhatsApp share button, but I strongly believe, as chatting with local business owners is more convenient for customers, It will have higher CTR. It prompts users quick reply so they tend to use this way of contact than others, especially in India.

So here are 2 ways to Add WhatsApp Chat Button on your Website. I will show it for both self-hosted WordPress and Blogger.

2 ways to add WhatsApp Chat Button on Website

1. Using Click to Chat

You can create a hyperlink, clicking on which will directly lead to WhatsApp messenger, both in PC and Mobile. In PC you will have to be logged in on WhatsApp Web.

Here is the link which you can use: https://wa.me/15551234567

Where the first letter/letters are country code. 1 - in this case is the country code and 5551234567 is the phone number.

Don't give any space or, + or, () or, -
It won't work. Only phone number with country code.

So you can use it...

i. Using simple hyperlink. For example:


ii. Creating a button:

Alternatively, you can design a button and use the same link. It will work like a charm. 

Or, you can even use the WhatsApp logo image and use the same link. Like this


iii. Or you can ...

2. Using a floating button - Free WhatsApp Chat Widget

For creating a floating button you need to use a Javascript. In case you do not know coding much, not to worry. We will use a tool to generate the code

Use Whatshelps.io's "Message Us" button

It will look like this
SS

a. Navigate to: https://getbutton.io/ 

b. Choose WhatsApp under Choose messaging apps header. For free you can use Facebook and WhatsApp. You can use either of those or both. For this article, we will only select WhatsApp.

c. Enter your phone number with country code. For e.g. +1 (800) 123-4567

d. Change the Position and Call to action under Customize your button header. Don't botter changing color - this is for multiple apps.

e. Now skip Generate x2 More Chats and Sales with Pro Features as you can change nothing, and go to the final step - provide your email ID under Add the code to your website heading and click Get Button Code. It will display the code. Like this- 

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "+1 (800) 123-4567", // WhatsApp number
            call_to_action: "Message us", // Call to action
            position: "left", // 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>
<!-- /WhatsHelp.io widget -->


Copy the code snippet and paste in your website.

Paste WhatsApp widget code snippet on Blogger


Paste WhatsApp widget code snippet on Blogger



WhatsApp Share Button Generator: https://kriskbx.github.io/whatsapp-sharing/




Post a Comment

0 Comments