Ticker

6/recent/ticker-posts

✅ Como agregar botón de WHATSAPP html en sitio web 2020

Insertando el Botón de Whatsapp Flotante Html en una página Web

agregar botón de whatsapp

A los usuarios les gusta interactuar con una persona que responda a las inquietudes para resolver dudas acerca del servicio o el producto que se ofrece, para ello, uno de los medios más rápidos para comunicarse con los usuarios es el uso de whatsapp.

Ya existe whatsapp business, es usado principalmente para empresas, negocios pequeños e incluso emprendedores que tienen alguna marca. Con el fin de acercarse más con los clientes cuando se establece una comunicación. Empresas grandes usan este método de atender a sus clientes porque les reduce costos y pueden abarcar más en la atención. 

Para que se usa Whatsapp en una página


Whatsapp, es uno de los medio de contacto más directos que se usa para comunicarse con los clientes. A través de este medio se logra:
  1. Atención al cliente
  2. Soporte
  3. Resolver dudas o preguntas
  4. Ofrecer descuentos u ofertas
  5. Concretar ventas
  6. Emitir comunicados
Poner el botón de whatsapp como contacto en una web se acerca más con la interacción de los usuario para satisfacer sus inquietudes, ya sea porque quiere conocer un poco acerca de los servicios o productos que se ofrecen.

Aquí vamos a conocer como integrar el botón de whatsapp en una página como medio de comunicación con los clientes y que este se vea de forma profesional.

Este botón se integra en la parte inferior derecha de la web llamando la atención del visitante para hacerle clic para abrirlo. Se conoce como Botón flotante whatsapp. El botón de whatsapp flotante es la mejor forma para captar la mirada del usuario si quiere usarse como medio de comunicación.

Este botón de whatsapp flotante Html, se integra y se adapta a cualquier resolución de pantalla que se use, es totalmente responsive, ya sea que la web sea visitada desde una computadora de escritorio, laptop, tablet o dispositivo móvil. El botón mantendrá su modo flotante adaptado a la pantalla que se este viendo.

Qué se necesita para agregar un botón de whatsapp

Para enlazar el botón de whatsapp en una web es necesario los archivos:

  1. HTML, en donde se coloca el código en el cuerpo de la web para llamar las funciones del botón.
  2. Javascript (JS), las funciones que darán al botón una interacción y se agregara el número de contacto whatsapp.
  3. Hoja de estilo CSS3, quien le dará el color al botón y la forma en como aparecerá para el medio de contacto con el usuario.
Para ello, puedes descargar estos files en el siguiente enlace para insertarlos en la página

Como insertar el botón de whatsapp en el cuerpo de una web html

agregar el botón de whatsapp html

Sigamos estos pasos para poner el botón de contacto en la parte del body html para iniciar. En este caso, se usara el editor SublimeText para realizar estos ejemplos. Se puede usar el editor html que más les parezca, la función sera la misma. Por lo tanto, vamos a lo que has venido...
  1. Abrir el editor Html
  2. colocar los links de los estilos de hojas antes del Tag "</head>"
  3. También, colocar el Font-Awesome para el icono de whatsapp o puedes usar un fontAwesome alojado en CDN.
  4. insertar los archivos JS: whatschat-layout.js / whatschat-style7.js antes del Tag "</Body>"
  5. colocar de igual manera el código html antes del tag </Body>
botón de whatsapp html

El código a pegar es el siguiente:

<!-- Inicio de la Sección del Botón WhatsChat -->
<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>

<!-- Este es el encabezado de del Chat -->
<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/Yo_trabajo.jpg"/>
</div>
<!-- Display Name & Last Seen -->
<div class="wc-user-info">
<strong>Ariel Carvajal</strong>
<p>Asistencia</p>
</div>
</div>
<!-- El contenido del cuerpo del Chat -->
<div class="wc-body">
<div class="wc-content">
    <div class="wc-bubble tri-right left-top">
    <span>Arie C.</span>
    <br>
    <p>Hola, estoy aquí 👋</p>
    <p>Chatiemos!!!</p>
</div>
</div>
</div>
<!-- Pie del Chat, Aquí colocas el Numero y Mensaje Que aparecerá al abrir el botón -->
<div class="wc-footer">
<!-- Start Single Contact List -->
<a class="wc-list" number="+50767758260" 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 Sección de WhatsChat -->

De esta forma apreciaras el botón flotante de whatsapp que se enlaza en la página web para contacto

insertar botón flotante whatsapp html

Ventajas de usar Whatsapp


Colocar el botón de whatsapp como medio de comunicación esta resolviendo a muchas empresas y emprendedores online hoy en día.

Muchas transacciones se realizan usando whatsapp de manera responsable, se puede llegar atender a más de 3 usuarios a la vez. El intercambio es a través de escribir y notas de voz.

Se puede hacer los siguiente: 
  1. video llamadas
  2. llamadas sin video
  3. realizar grupos de comunicación
  4. Dejar el historial de la conversación, si alguna otra vez nos vuelve a escribir el usuario. Deja registrados de la conversación con los clientes.
Entre muchas funciones que podemos usar whatsapp, las oportunidades de integrar el botón de whatsapp en una web es esencial para que los usuarios se logren comunicar.