Cómo instalar botón de WhatsApp en mi sitio web | WordPress

¿Te gustaría que tus visitantes se comuniquen contigo de forma rápida y sencilla?

Agregar un botón flotante de WhatsApp a tu página web es una excelente opción. Con esta funcionalidad, podrás conectar con tus clientes potenciales de manera directa y efectiva, ya que WhatsApp es una de las aplicaciones de mensajería más utilizadas en todo el mundo,  el 75% de la población utiliza este aplicativo con fines empresariales. Probablemente fue así como surgió WhatsApp Business dando espacio para que las empresas también pudieran llevar sus campañas de marketing.

Para añadir el botón de WhatsApp en tu sitio web, existen diferentes opciones como plugins, códigos cortos o insertando el código directamente en el HTML de la página. Si eres nuevo en el mundo del desarrollo web, los plugins son una excelente opción ya que su instalación es sencilla y no requiere de conocimientos avanzados.

En cambio, si buscas personalizar tu botón de WhatsApp, la opción de insertar el código directamente en el HTML te permitirá tener mayor control sobre el diseño. En cualquier caso, una vez que hayas instalado el botón, asegúrate de colocarlo en un lugar visible y estratégico de tu sitio web, para que tus visitantes puedan encontrarlo fácilmente y contactarte sin complicaciones.

Agregar botón flotante de WhatsApp con Plugins | Joinchat

Si estás buscando una forma sencilla de instalar un botón de WhatsApp en tu sitio web, los plugins pueden ser la solución perfecta. Existen diferentes opciones de plugins disponibles, algunos gratuitos y otros de pago, que te permitirán agregar el botón flotante de WhatsApp a tu página web en pocos minutos. Con esta funcionalidad, podrás fomentar la comunicación con tus visitantes y aumentar tus posibilidades de conversión, ya que podrán contactarte de manera rápida y directa a través de la popular aplicación de mensajería.

Si estás utilizando WordPress como plataforma para tu sitio web, el plugin Joinchat es una excelente opción para instalar un botón de WhatsApp de manera rápida, sencilla y sin costo alguno. A continuación, te explicamos los pasos que debes seguir para instalar el botón con este plugin:

1. Instalar el plugin Joinchat y activarlo

Primero, debes instalar y activar el plugin Joinchat en tu sitio web.

  1. Nos Dirigimos a nuestro panel de administración en la opción Plugins – Add New.
  2. Escribimos el plugin en el  buscador – JoinChat
  3. Instalar.

¡Listo! Ya tenemos instalado y activado el Plugin JoinChat.

2. Configurar el bóton de JoinChat

Una vez que el plugin esté activado, ve a la sección de «Joinchat» en tu panel de administración de WordPress.

  1. Insertamos un numero asociado a WhatsApp Business.
  2. Agregamos un mensaje.
  3. Guardas cambios.

A estas alturas ya tendrias instalado el botón flotante de WhatsApp en tu landing page.

Agregar botón flotante de WhatsApp con código

Si buscas una opción más personalizada para insertar un botón de WhatsApp en tu sitio web, la inserción del código directamente en el HTML de la página es una excelente opción. Para ello, deberás crear tu código mediante HTML, CSS y JAVASCRIPT si fuese necesario, luego insertarlo en el lugar de la página web donde deseas que aparezca el botón. Aunque esta opción requiere de conocimientos básicos de programación, te permitirá tener mayor control sobre el diseño y funcionamiento del botón, en Telvas Digital te mostraremos como agregar código en tu página web hecha en WordPress sin la necesidad de instalar plugins.

Copia y Pega este código en tu archivo function.php

La ruta exacta donde se encuentra el archivo «functions.php» en tu sitio web de WordPress depende del tema que estás utilizando y de cómo está configurado tu servidor. En general, la ruta es:

/wp-content/themes/TU_TEMA/functions.php

Para este caso utilizaremos un plugin que nos facilitara el proceso de trabajo, CodeSnippets es una herramienta poderosa y mucho más cuando no dependemos de un tema hijo, con este plugin podrás activar y desactivar pedazos de códigos, cual tendrás un mayor control de las inserciones que realizas en tu página web.

  1. Nos Dirigimos a nuestro panel de administración en la opción Plugins – Add New.
  2. Escribimos el plugin en el  buscador – Code Snippets.
  3. Instalar.

Una vez instalado el Plugin realizamos el siguiente proceso:

  1. Nos dirigimos a nuestro panel de administración, la opción Snippets – Add New.
  2. Ingresamos el Titulo del fragmento de código.
  3. Insertamos el código.
  4. Le damos en la opción que solo funcione en nuestro Frond end.
  5. Guardar.

IMPORTANTE

* Para insertar estilos personalizados en WordPress, se puede hacer directamente en el archivo «style.css» que se encuentra en la misma ruta del   archivo «function.php». Sin embargo, es recomendable utilizar un tema hijo   para evitar que las actualizaciones de WordPress afecten el código.
* Insertar fragmentos de código directamente en el archivo puede ser   arriesgado y podría afectar la funcionalidad del sitio.

¡Ya casi Listo! Ahora solo faltaria agregar el icono de WhatsApp en nuestro codigo HTML, en este caso lo realizaremos mediante una llamada CDN a la libreria (FontAwesome).

Copia y Pega este codigo en tu archivo function.php

 

Realizaremos el mismo proceso de insertar el fragmento de código mediante el plugin Code Snippets.

 Pegaremos el código en la parte superior donde ya habíamos trabajado.

¡Listo! Ya tendriamos nuestro Botón flotante en nuestra página web mediante código.

Objetivo

El objetivo de instalar un botón flotante de WhatsApp en una página web mediante código y plugins es permitir que los usuarios de la página puedan comunicarse fácilmente con el propietario o equipo de soporte de la empresa a través de la plataforma de mensajería de WhatsApp. Esto puede mejorar la experiencia del usuario al permitir que se comuniquen directamente con la empresa de manera rápida y fácil, lo que puede mejorar la satisfacción del cliente y aumentar las conversiones y las ventas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *