¿Te gustaría añadir una opción para que tus usuarios te contacten por Whatsapp?, aprende cómo agregar un link de contacto de Whatsapp en WordPress para empezar a chatear directamente, de manera simple y sin usar plugins.
Resultado Final
Este enlace serviría tanto para la aplicación móvil como para chatear desde un navegador.
La sintaxis es:
https://wa.me/xxx/?text=yyy
Generalidades
Anteriormente habíamos visto cómo agregar redes sociales en WordPress sin usar plugins y compartir contenido, sin embargo en este artículo veremos cómo agregar un link de Whatsapp para empezar un chat.
Usaremos HTML para crear los enlaces de Whatsapp y dependiendo del dispositivo, usaremos CSS para ocultar o mostrar el enlace.
Para los enlaces tenemos:
- Móvil: Usaremos el link de Whatsapp para movil el cual abrirá la App
- Ordenador: En este caso usaremos el link alterno para abrir Whatsapp en Web
1- Enlace en móvil
El enlace para acceder directamente a la aplicación Whatsapp tiene la siguiente forma:
whatsapp://send/?phone=xxx&text=yyyEn donde:
- xxx = es el número de teléfono el cual aparecerá por defecto
- yyy = es el mensaje por defecto que aparecerá
Por ejemplo:
<a class="whatsapp-movil" href="whatsapp://send/?phone=34610123456&text=Quiero%20saber%20el%20precio%20del%20producto%20">Preguntar por Whatsapp</a>
El código anterior generará el siguiente enlace que puedes probar en móvil:
2- Enlace para Web
El enlace para acceder Whatsapp Web tiene la siguiente forma:
https://web.whatsapp.com/send/?phone=xxx&text=yyyEn donde:
- xxx = es el número de teléfono el cual aparecerá por defecto
- yyy = es el mensaje por defecto que aparecerá
Por ejemplo:
<a class="whatsapp-web" href="https://web.whatsapp.com/send/?phone=34610123456&text=Quiero%20saber%20el%20precio%20del%20producto%20">Preguntar por Whatsapp</a>
El código anterior generará el siguiente enlace que puedes probar en un ordenador:
3- Mostrar/Ocultar Enlaces
Entonces ya tienes los dos enlaces, ahora tenemos que mostrar u ocultar uno de ellos dependiendo si estas en móvil o no, lo haremos con CSS. En el código anterior hemos usado las clases whatsapp-web y whatsapp-movil, entonces:
@media (max-width:768px){
.whatsapp-movil{
display:inline;
}
.whatsapp-web{
display:none;
}
}
@media (min-width:768px){
.whatsapp-movil{
display:none;
}
.whatsapp-web{
display:inline;
}
}
Conclusión
Como verás, es posible integrar Whatsapp en tu sitio web simplemente usando HTML y CSS y evitar el uso de un plugin, al ser además código HTML puedes en lugar del texto colocar alguna imagen.
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(6 votos, promedio: 5,00 de 5)
Cargando…
Perfecto! Lo voy a implementar a ver que tal, tengo 2 clientes que son «whatsapperos»
Hola
muy agradecido de tu articulo me salvaste justo en el momento preciso.
Este si es el correcto 😀 DECODECMS.
Saludos!
Hola.
Muchas gracias por la aportacion.
….
Seria posible enlazar a una imagen sin texto, por ejemplo al icono de WSSapp?
Hola, si, claro, en el video coloco una imagen dentro del link, luego la saco para que se vea más claramente, pero la idea es la misma. En el siguiente enlace revisa la sección : Image as a link https://www.w3schools.com/html/html_images.asp
Gracias….
Ya lo tengo línkeado a unos buttons.
….
He detectado una incompatibilidad con dispositivos Android 4.0 y 5.0 en la url para móviles.
En dispositivos con Android 7 funciona perfecto.
Podríamos solucionar eso de algún modo?
…
Un saludo.
Hola, muy raro lo que comentas, puedes probarlo con la API genérica, revisa: https://faq.whatsapp.com/en/general/26000030
excelente gracias
Hola muy buen artículo, te felicito pero no se que pasa 🙁 pero no me funciona, salen los dos siempre. Podría ser que la plantilla esta bloqueando el CSS??
Hola, si, podría ser algún conflicto CSS con tu theme, para descartar prueba cambiar temporalmente de theme y verifica.
Hola!!! muchas gracias por el aporte!!! pero no me funciona 🙁 Al igual que a David y pobre cambiar de plantilla como indicaste, y tampoco :(, tenes idea que puede ser? muchas gracias. Un saludo
Hola es posible que el código CSS que estas usando no se ejecute porque o bien esta mal escrito o porque otro código lo sobrescriba , en cualquier caso sería cuestión de ver la url de tu sitio, puedes escribirme al formulario de contacto con detalles adicionales.
mil gracias que articulo tan útil, una pregunta ¿como puedo hacer lo mismo para generar acción de llamada?
Hola, en el href, podrías usar tel, es decir quedaría por ejemplo: href=»tel:34610123456″
infinitas gracias
Me aparecen los dos enlaces aun
Hola, asegúrate de haber ingresado el código CSS correctamente.
Exlente aporte, muchas gracias.
Buenísimo, muy claro. Gracias!
Buenas, soy diseñador y soy inexperto en el manejo de códigos HTML y CSS, lo que he logrado realizar en la página que estoy montando lo he hecho con tutoriales y este ha sido de gran ayuda pero aún tengo un problema, y es que no he podido copiar el codigo CSS en el lugar correcto para que muestre sólo el enlace dependiendo si es WEB o WhatsApp. Estoy utilizando una plantilla Betheme Child y la pague en Betheme base.css, ya que en la raíz de la hoja de estilo salía un mensaje: All css files are placed in /css/ folder; y al ver el contenido de ese sitio era lo más parecido a lo que vi en el video. Aún me siguen saliendo los 2 links y no se donde pegarlo para que funcione la orden. Muchas gracias por su ayuda
Hola, desde la administración de WordPress, prueba pegando el código CSS en la opción de CSS de la plantilla, desde, Apariencia – Personalizar
Hola, muy buen tengo una ecommerce y quiero que en todos mis productos aparezca el botón para preguntar producto por whatsapp, la cosa es que quiero en ese botón aparezca por defecto el nombre del producto, un ejemplo: preguntar por …. el nombre del producto…aquí, hay algún código para hacer esto posible?
Hola, puedes revisar el siguiente artículo: https://decodecms.com/consultar-dudas-de-produtos-por-whatsapp-en-woocommerce/
Hola! Sabes si hay un plugin para poder enviar mensajes al whatsapp de cada miembro de un sitio wordpress? Osea integrarlo con Ultimate Member…
gracias!
Hola, al parecer tienes que tener habilitado la API de negocios, podrías revisar: https://www.whatsapp.com/business/api , pero no he visto igualmente un plugin para esto, posiblemente sea a través de un servicio o algo programado a medida.
Excelente Maestro! Contenido de alta calidad.
Quiero que se vean mas bonitos, les coloque css y solo funciona en la clase whatsapp web, la clase movil se le desactiva el css
Tal vez tengas que usar !important, o especificar un poco más las clases a usar. Puedes escribirme al formulario de contacto y enviarme la url de tu sitio para verificar.
buenos dias, coloco el enlace pero se borra solo en el divi???
whatsapp://send/?phone=34610123456&text=Quiero%20saber%20el%20precio%20del%20producto%20
Hola, en qué bloque estas colocando esto? prueba colocarlo en un bloque HTML.
Hola Jhon, gracias por el tutorial que es muy útil. Tengo la siguiente pregunta: Se puede hacer que al dar click en alguna de las dos opciones abra el whatsapp pero en una ventana diferente sin sacarlo de la página web? Gracias
Hola, supongo que te refieres a un popup, podrías usar un iframe, pero igual requeriría más programación, y también habría que revisar si la aplicación web de Whatsapp permite insertar iframes, ya que es posible que igualmente no este permitido.
Hola!!1 la instrucción para móvil me molestó, se eliminó del html de salida, probablemente por seguridad o algo… finalmente usé esto: https://wa.me/NUMERO
Hola Boris, efectivamente, ese enlace es una actualización y ahora te reconoce directamente el dispositivo. Saludos.
Hola Jhon,
Te felicito por esta gran artículo, eres increíble de verdad!
Lo he implementado en mi Woocommerce y funciona de maravilla de verdad!!
Una pregunta, ¿es posible que esto provoque un aumento consumo en CPU?
Muchas gracias y saludos!!!
Hola, no hay operaciones matemáticas, ni bucles, ni código exhaustivo que te incremente el uso de CPU por lo que no debes preocuparte.
Muchas gracias Jhon,
De nuevo te felicito por tu blog.
Un saludo!!