Use the following code to use the WhatsApp click to chat URL to add a button on your website, this will allow your visitors to easily start conversations with your WhatsApp Business account.
You can add an attractive floating WhatsApp click to chat button to your site. This button 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.
If a mobile user use the button will start a conversation through WhatsApp for iOS or Android.
To create this click to chat button, we will use:
- Floating WhatsApp plugin: A JQuery plugin, created by Rafael Botazini, this code creates 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.
We 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.
<!--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:
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
Updated almost 4 years ago