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...
Pingback: Enviar WhatsApp desde un sitio web 2020
Hola que tal, muy bueno el post, pero te quiero hacer una consulta, al poner el texto de envio al
WhatsApp,el texto sale una palabra al lado de al otra, pero no encuentro la forma de hacer un salto de renglon por ej
Hola:
como estas?
si lo envio asi me sale en mi mensaje Hola: como estas? todo en la misma linea ,hay alguna solución para eso?
Hola Luis, te recomiendo darle una revisada al nuevo artículo: https://gabrielchavez.me/enviar-whatsapp-desde-un-sitio-web-2020/
Allí explico detalladamente como realizar los saltos.
Ta buena la idea, sobre todo que whatsapp se ha convertido una red social para interactuar con el cliente, por lo menos lo uso para asistir en alguna consulta. Tambien, te dejo un el código html del boton whatsapp para web para que mires este trabajo igual es bueno. La idea es compartir.
Buen aporte, he buscado mucha información sobre esto.
Hola, muchas gracias por estupendo articulo. En los parámetros para la url de whatsapp web, pones phone y text, pero ¿no hay ninguna opción o parámetro para mandar un mensaje a un grupo de whatsapp o grupo de difusión? lo digo por que un grupo no tiene asignado un numero de móvil, supongo que si tendrá un identificador que haga esa función.
No me sirve dejar en blanco el parámetro phone= , por que lo que quiero es que publique el mensaje directamente en el grupo, sin tener que buscarlo y seleccionarlo. pero en la información que veo de whatsapp no viene nada
Muchas gracias y un saludo.