Image may be NSFW.
Clik here to view.
Hoy en día el uso de las redes sociales y servicios externos de mensajería como parte de la construcción de un sitio web se ha vuelto cada vez mas importante, una de estos sistemas de chat es precisamente Whatsapp.
Whatsapp es uno de los sistemas de mensajería más utilizados y por lo tanto muy atractivo para implementar en un sitio web debido justamente al amplio uso que hay de esta aplicación en dispositivos móviles.
Ten en cuenta que muchos usuarios preferirán enviarnos un mensaje a través de Whatsapp que usar un número de teléfono o incluso de un formulario de contacto.
Existen muchos plugins para implementar Whatsapp en WordPress, sin embargo en este artículo evitaremos usar un plugin y lo implementaremos directamente a través de código.
Funcionalidad de Click to chat en Whatsapp
Actualmente Whatsapp dispone de una funcionalidad que a través de una URL permite chatear directamente con un número telefónico, incluso si este número no forma parte de nuestra lista de contactos.
Basta con conocer el número telefónico de la persona para crear un enlace, incluso se puede enviar un mensaje por defecto como parte de la construcción del enlace.
Además esta funcionalidad nos permite usar el mismo enlace tanto para dispositivos móviles como para ordenadores, es decir, al usar el enlace desde un dispositivo móvil abrirá la app de Whatsapp en móvil.
En el caso de ordenadores abrirá el sitio web de Whatsapp Web en un navegador.
Formación de la URL
La sintaxis de la URL es:
https://wa.me/<number>/?text=<texto>
Reemplazar <number> por el número telefónico de contacto.
Reemplazar <texto> por el texto que quieres que se escriba por defecto.
A tener en cuenta:
- El número debe ser escrito sin espacios, ni guiones, ni símbolos matemáticos, por ejemplo:
+001-(555)1234567
Debería ser escrito como:15551234567
- El texto escrito por defecto debe esta codificado, es decir, se deben reemplazar los espacios y caracteres especiales ya que este texto será parte de una url, se puede usar un servicio como Urlencoder.io, por ejemplo:
El texto:Quiero información adicional del producto
Usando el servicio de Urlencoder quedaría:Quiero%20informaci%C3%B3n%20adicional%20del%20producto
Formación del enlace HTML
Una vez formada la URL ya solo nos queda formar el enlace HTML, esto lo podemos construir de manera manual usando HTML o usando el editor Gutenberg de WordPress.
Por ejemplo, para usar la siguiente URL:
https://wa.me/34610123456/?text=Quiero%20informaci%C3%B3n%20adicional%20del%20producto
Generando el enlace manualmente
Si usamos directamente HTML, usamos el elemento anchor de HTML, entonces el código de enlace sería:
<a target=“_blank” href="https://wa.me/34610123456/?text=Quiero%20informaci%C3%B3n%20adicional%20del%20producto">Preguntar por Whatsapp</a>
Generando el enlace con el editor
Sin embargo, la forma más simple es usar el editor de Gutenberg, tal como se muestra en la imagen. Podemos agregar un enlace al seleccionar el texto y usar el botón de creación de enlace.
Image may be NSFW.
Clik here to view.
Enlace con imagen
Sería mucho más atractivo agregar un icono de Whatsapp al enlace creado en lugar de solo texto, puedes usar alguna imagen y agregarla como parte de la construcción de tu enlace, por ejemplo se puede hacer de forma simple con el editor Gutenberg.
Image may be NSFW.
Clik here to view.
Resultado Final
Al final cuando se usa el enlace se abrirá la aplicación de Whatsapp, tal como se muestra en la siguiente imagen:
Image may be NSFW.
Clik here to view.
Vídeo explicativo: Whatsapp en WordPress sin usar plugins
En el siguiente vídeo vamos a condensar las ideas que hemos visto en este artículo y aprenderemos, de forma práctica, cómo añadir Whatsapp en WordPress sin usar plugins.
Conclusión
Como hemos podido comprobar es posible usar la funcionalidad de Click to chat para construir una url y luego un enlace que nos permita abrir la aplicación o sitio web de Whatsapp y empezar a chatear directamente con los visitantes a tu sitio web.