9 Estilos para Agregar el Botón WHATSapp en una Página WEB

agregar botón flotante whatsapp en página web html

¿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.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

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