How to Add Whatsapp Button with HTML and JS this 2022

add whatsapp floating button in html web page

Do you create web pages in html code or do you use a CMS like wordpress? , if you use any of your preference, here, I reveal to you how to put the floating WhatsApp button on your site so that users can contact you using this medium.

To place the whatsapp button on a page and for it to work correctly, you must have the necessary files that include the CSS, JS, the DIV in the body of the html that will call the functions and that will shape the code of the button on your website.

Adding the Whatsapp Button: Video Review

Watch the complete tutorial to insert the WhatsApp button in a simple way and explained in detail. Step by Step.



Comparison Table of Whatsapp Button HTML and WP



HTML WORDPRESS
styles 10 8
What includes? JavaScript JS, HTML and CSS3 Plugins (JavaScript JS, HTML, CSS, PHP)
Design Fits any screen Responsive
Medium 6 months 6 months
Documentation Yes, well organized and explained documented for customization.
Compatible browsers IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
Qualification 4.7  4.9 
Price $6.00 $22.00

Buy on Envato Buy on Envato

We are going to add the respective links that have the style sheet (css) and the JavaScript (JS) functions to our site. For this you will need to add the following styles between the <head> </head> tag

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/vizfzro77lff0qr/animate.min.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/r0paswxfx5esx76/whatschat-style7.css" />
<link id="whatschat-color" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/yffr6wicb0mt3rl/color-green.css" />

Next, place the JavaScript function before the </body> tag.

<script src="whatschat-style7.js"></script>

And, of course, for the WhatsApp button to work, you must add the JQuery before the </body> tag. Without the jquery the animation of the Whatsapp button will not work. You can add the latest version of jquery.

<script src="/assets/js/jquery.min.js"></script>

I recommend these tickets

Add the DIV

Now, the Div must be put to call the functions of the style sheets and JS of the WhatsApp button. Place the following Div code at the beginning of the <body> tag or add it before the </body> tag.


<!-- Seccion de Mi Whatsapp --> 
 <div class="wc-style7">
 <!-- Floating Button--> 
 <a class="wc-button"> 
 <i id="wc-whatsapp" class="fa fa-whatsapp" aria-hidden="true"></i> 
 <i id="wc-times" class="fa fa-minus-square-o" aria-hidden="true"></i>
 </a> 

 <!-- Chat Panel -->
 <div class="wc-panel ">

<!-- Panel Header Content -->
 <div class="wc-header"> 
 <!-- Profile Picture --> 
 <div class="wc-img-cont"> 
 <img class="wc-user-img" src="img/imagen.jpg"/> 
 </div> 

 <!-- Display Name & Last Seen --> 
 <div class="wc-user-info"> <strong>Ariel Carvajal</strong> <p>Asistencia</p> </div> </div>

 <!-- Panel Body Content --> 
 <div class="wc-body"> 
 <div class="wc-content"> 
 <div class="wc-bubble tri-right left-top"> <span>Ariel C.</span> <br> <p>Hola, estoy aquí </p> <p>Chatiemos!!!</p>
 </div>
 </div> 
 </div> 

 <!-- Pie de Contenido Footer -->
 <div class="wc-footer">
 <!-- Start Single Contact List --> 
 <a class="wc-list" number="+50767840000" message="Gracias Por Comunicarte, en que puedo ayudarte?"> <i class="fa fa-whatsapp" aria-hidden="true"></i><p>Chat</p> </a> </div>
</div> 
</div> 
 <!--/ Fin de la Seccion -->

Get the Files for Your Floating Whatsapp Button


You can host the documents in your own hosting or local to test and create new personal projects or clients. Now, if you can add the WhatsApp button with animation in HTML.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال