Add a WhatsApp click to chat button to your website

You must have read that using WhatsApp Business will allow you to get in touch with more than 1.5 billion people around the world, but the truth is, to reach these potential customers you must take advantage of every available channel to motivate them to contact your business through WhatsApp. If you keep in mind that currently mobile devices generate almost half of your website’s traffic, your website can be one of the best sources of WhatsApp conversations.

We want to share a simple and attractive way to put a click to chat button on your website, this will allow your visitors to contact you with a single click. To do this, you must have access to your website’s code, and basic knowledge of web programming or a programmer to help you.

Components

To create this click to chat button, we will use:

  • Jquery
  • Floating WhatsApp plugin: A JQuery plugin, created by Rafael Botazini, that allows you to create a floating button that will start the conversation with WhatsApp web, if it is run from a desktop computer, or the WhatsApp app if used from a mobile device. You will need to download: floating-wpp.min.css, floating-wpp.min.js, and whatsapp.svg.
  • WhatsApp Business phone number: This number will be used by the plugin to run the WhatsApp Chat link.
    This code uses open source components and they are not official WhatsApp or Toky products so they are provided as useful resources but we don't offer any support on its implementation.

How to add the WhatsApp click to chat button to your website

We start by adding the libraries and CSS to the header of your website:
<!--JQuery-->  
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>  
<!--Floating WhatsApp css-->  
<link rel="stylesheet" href="floating-wpp.min.css">  
<!--Floating WhatsApp javascript-->  
<script type="text/javascript" src="floating-wpp.min.js"></script>
Now you must add a div with the WAButton ID, which is where the plugin will render the click to chat button.
<!--Div where the WhatsApp will be rendered-->  
<div id="WAButton"></div>  
You must add a script block where the plugin is used on the div that we added in the previous step:
<script type="text/javascript">  
   $(function () {
           $('#WAButton').floatingWhatsApp({
               phone: 'WHATSAPP-PHONE-NUMBER', //WhatsApp Business phone number
               headerTitle: 'Chat with us on WhatsApp!', //Popup Title
               popupMessage: 'Hello, how can we help you?', //Popup Message
               showPopup: true, //Enables popup display
               buttonImage: '<img src="whatsapp.svg" />', //Button Image
               //headerColor: 'crimson', //Custom header color
               //backgroundColor: 'crimson', //Custom background button color
               position: "right" //Position: left | right

           });
       });
</script>  
This code has the following basic parameters:
  • phone: Phone number you use for WhatsApp Business.
  • position: Define if you want the button to appear to the "left" or to the "right".
  • popupMessage: The message that will appear in the popup window, inviting the visitor to start a conversation.
  • showPopup: Define if the message popup window is enabled or disabled. If disabled, only the button appears, and clicking on it will start the conversation.
  • autoOpenTimeout: Number of milliseconds that the plugin must wait to open the popup automatically.
  • headerColor: Background color of the popup window’s title bar.
  • headerTitle: The popup window’s title
  • buttonImage: Image that you want to appear in a <img> tag.
  • size: Button width in CSS format, default is “72px”.
  • backgroundColor: Background color for the floating button
Click to chat WhatsApp Business

If the click to chat button is set up correctly, it will look like this on mobile devices:

WhatsApp click to chat button

You can see how this button will work in the following jsFiddle. Just add your WhatsApp Business phone number in the indicated field:

With Toky, you can use WhatsApp Business from your browser, handling customer-initiated conversations efficiently and having a direct and personal communication channel that can improve your sales and your customer service. Try Toky for free

comments powered by Disqus