How to add the WhatsApp click to chat button to your Blog Site

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

It work right. Please drop a comment. I appreciate a lot