Actualización: te recomiendo leer el post actualizado: Enviar WhatsApp desde un sitio web 2020

Hace un par de meses explique cómo enviar mensajes desde la web  a WhatsApp, sin embargo, no puse un ejemplo práctico y el dia hoy vengo a solucionar ese problema.

Hoy compartiré un botón hecho en CSS y HTML para que lo integres en tus proyectos y les resulte más fácil a tus visitantes poder contactarte por WhatsApp.

Requerimientos:

  • Tener instalado Font-Awesome en nuestro sitio. Puedes hacerlo mediante algún CDN.
  • Agregar los estilos en el CSS de tu web.
  • Agregar el HTML justo después de la etiqueta de apertura de body.

WhatsApp CSS


Lo que haremos será agregar dos clases CSS en nuestros estilos de la web en donde vayamos a implementar el botón. La clase .whatsapp es la encargada de asignarle estilos al elemento para dibujar un circulo verde en la esquina inferior izquierda. Posteriormente tenemos una clase llamada .whatsapp-icon la cual es la encargada de posicionar el icono dentro del elemento .whatsapp.


HTML


Lo que sigue es insertar un HTML justo después de la etiqueta de apertura de body, vamos a ver un ejemplo:

Demostración


See the Pen Botón WhatsApp Web CSS y HTML by Gabriel (@gabosvs) on CodePen.


Extra


WhatsApp APi Web

Integrando el APi Web de WhatsApp, con tan solo un clic, nuestros visitantes podrán enviarnos mensajes desde la web.

APi URI: https://wa.me/

Parámetros requeridos

  • phone: sin símbolos, inicialmente tendrá que tener los dos dígitos del país (Ejemplo para México: 52).
  • text: mensaje que se enviará a tu WhatsApp, debera tener el formato URL Encode.

Ejemplo:

https://wa.me/5211234567890?text=Me%20gustaría%20saber%20el%20precio%20del%20coche

Ejemplo de todo el código:

See the Pen Botón WhatsApp Web CSS y HTML by Gabriel (@gabosvs) on CodePen.

Si te ha gustado este articulo, te invito a dejar un comentario o compartirlo en redes sociales, me ayudaras a seguir trayendo contenido de calidad al blog. Un abrazo virtual! 😀

Obtén beneficios exclusivos

Suscríbete al boletín y obtén beneficios exclusivos directo en tu correo.

Gracias por suscribirte...

Algo salió mal...