Lunes, 04 Noviembre 2019 09:00

Agregar Whatsapp en WordPress sin usar plugins

Escrito por  Jhon Marreros Guzman
CMS:  WordPress |  Versión:  Todas |  Dificultad:  Medio |  Tiempo lectura:  15 minutos
Valora este artículo
(2 votos)

Agregar Whatsapp en WordPress sin usar plugins


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.

Creación de enlace Whatsapp con Gutenberg

 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.

Creación enlace con imagen Whatsapp en Gutenberg

 Resultado Final

Al final cuando se usa el enlace se abrirá la aplicación de Whatsapp, tal como se muestra en la siguiente imagen:

Resultado final

 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.


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress



Jhon Marreros Guzman

Jhon Marreros Guzman

Soporte técnico WordPress en Webempresa y ponente habitual en Meetups y WordCamps de América.


Plugin Optimización de Imágenes Gratuito para WordPress