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 |
Insert Code Links: CSS and JS
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>
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.
The Archives HERE.
https://mega.nz/file/ewYkkaSS#Ys1eT2gyMpfJd34w7gXcb_Y_k8QCbfsSpB73sq0LvAs
Etiqueta
English