¿Creas páginas Web en código html o usas un CMS como wordpress?, si usas alguna de tu preferencia, aquí, te desvelo en como poner el botón de WhatsApp flotante en tu sitio para que los usuarios se contacten contigo usando este medio.
{getToc} $title={Tabla de Contenido}
Para colocar el botón whatsapp en una página y que funcione correctamente se debe tener los archivos necesarios que incluya el CSS, JS, el DIV en el cuerpo del html que llamara las funciones y que dará forma el código del botón en tu Web.
Añadiendo el Botón de Whatsapp: Video Reseña
Mira el tutorial completo para insertar el botón de Whatsapp de forma sencilla y explicado detenidamente. Paso a paso.
Tabla Comparativa de Botón Whatsapp HTML y WP
| HTML | WORDPRESS | |
|---|---|---|
| Estilos | 10 | 8 |
| ¿Qué incluye? | JavaScript JS, HTML y CSS3 | Plugin (JavaScript JS, HTML, CSS, PHP) |
| Diseño | Se adapta a cualquier pantalla | Responsivo |
| Soporte | 6 Meses | 6 Meses |
| Documentación | Si, bien organizado y explicado | documentado para la personalización. |
| Navegadores compatibles | IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge |
IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge |
| Calificación | 4.7 | 4.9 |
| Precio | $ 6.00 | $ 22.00 |
| Comprar en Envato | Comprar en Envato |
Insertar los Links de códigos: CSS y JS
Vamos agregar los respectivos links que tiene la hoja de estilo(css) y las
funciones JavaScript(JS) a nuestro sitio. Para esto necesitaras agregar los
siguientes estilos entre el tag <head> </head>
<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" />
Luego, coloca la función JavaScript antes del tag </body>
<script src="whatschat-style7.js"></script>
Y, por supuesto para que el botón de Wahtsapp funcione debes agregar
el JQuery antes del tag </body>. Sin el jquery no funcionara la
animación del botón de Whatsapp. Puedes agregar la versión más reciente
de jquery.
<script src="/assets/js/jquery.min.js"></script>
Agrega el DIV
Ahora, se debe poner el Div para llamar las funciones de la hojas de estilos y
JS del botón de Whatsapp. Coloca el siguiente codigo Div al inicio del tag
<body> o lo agregas antes del tag </body>.
<!-- 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 -->
Consigue los Files Para Tu Botón de Whatsapp Flotante
Puedes alojar los documentos en tu mismo hosting o local para hacer pruebas y
crear nuevos proyectos personales o clientes. Ahora, si podrás añadir el botón
de Whatsapp con animación en HTML.
Los Archivos AQUI.
https://mega.nz/file/ewYkkaSS#Ys1eT2gyMpfJd34w7gXcb_Y_k8QCbfsSpB73sq0LvAs
Etiqueta
tutoriales-blogger