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.
To create this click to chat button, we will use:
- 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 websiteWe start by adding the libraries and CSS to the header of your website:
Now you must add a div with the WAButton ID, which is where the plugin will render the click to chat button.
You must add a script block where the plugin is used on the div that we added in the previous step:
<!--Div where the WhatsApp will be rendered--> <div id="WAButton"></div>
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
- size: Button width in CSS format, default is “72px”.
- backgroundColor: Background color for the floating button
If the click to chat button is set up correctly, it will look like this on mobile devices:
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