¿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
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
+en+WordPress/usar-csp-en-WordPress.svg)
(4 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