Documentación para Join.chat plugin

Contenido

Introducción

¿Qué es Join.chat?

Es un plugin gratuito para WordPress que permite conectar en un clic las páginas de un sitio web con el perfil de WhatsApp de los diferentes agentes de soporte del proyecto web.

¿Por qué Join.chat?

  • Es muy simple e intuitivo de usar por parte de usuarios y sencillo de instalar por agentes de soporte (menos de 2 minutos).
  • Mejora la asistencia y soporte por WhatsApp entre proveedores y usuarios/clientes.
  • Aumenta la tasa de conversión. Atrae la atención directa impactando de forma no intrusiva.

Requerimientos del sistema

Para conseguir la mejor experiencia con la última actualización disponible de Join.chat, sugerimos lo siguiente:

  • Versión de PHP: 5.3 o superior.
  • Compatible con la versión de WordPress 3.0.1 o superior.
  • Compatible con la versión de WooCommerce 3.0 o superior.
  • Probado hasta la versión: 5.5.3.

Esta documentación asume que ya has instalado WordPress en tu sitio web.


Instalando Join.chat

Gracias por elegir nuestro plugin. Este documento te guiará a través del proceso completo de instalación en tu sitio de WordPress.

– Opción 1. Descargando el archivo ZIP

  1. Descarga Join.chat WP Plugin, de forma gratuita en el repositorio de WordPress desde este enlace.
  2. Dirígete al panel de control de WordPress y haz clic en Plugins > Agregar nuevo. Elige el archivo zip que acabas de descargar. Haz clic en Instalar y después en Activar.

– Opción 2. Desde el panel de control de WordPress

  1. Puedes instalar Join.chat WP Plugin, directamente desde el panel de control de WordPress.
  2. En el menú lateral izquierdo dirígete Plugins > Agregar nuevo. En el campo de búsqueda situado a la derecha, teclea “joinchat”. Busca nuestro plugin entre los resultados y haz clic en Instalar y después en Activar.
Installing Join.chat in the WordPress admin

Configurar Join.chat

Componentes

Para que comprendas bien como funciona Join.chat queremos mostrarte un esquema de todos los elementos que componen nuestro plugin, así sabrás a que nos referimos en cada momento.

  1. Botón
  2. Globo de aviso
  3. Tooltip
  4. Ventana de chat
  5. Llamada a la acción (CTA)
  6. Botón de inicio de WhatsApp

A nivel general

En el menú lateral de WordPress, ve a la opción Ajustes > Join.chat.  En la pestaña General podrás configurar los valores básicos para el plugin:

Botón. Establece el número de contacto y dónde y cómo quieres que se muestre el botón de WhatsApp.

  1. Teléfono. Número de teléfono de contacto (Si has comprado Random Phone Add-on podrás añadir multiples números de teléfono, consulta la documentación del Add-on). Elige la bandera del país y escribe el número de teléfono.
  2. Mensaje. Texto predefinido del primer mensaje que envía el usuario por WhatsApp. Puedes usar las variables {SITE} {URL} {TITLE}. Por ejemplo: Hola estaba viendo {TITLE} y necesito…
  3. Posición en pantalla. Puedes elegir entre Izquierda y Derecha.
  4. Imagen. Imagen que sustituye al icono que hay por defecto. La nueva imagen se alternará con el logotipo de Join.chat. Admite archivos, JPG, PNG, GIF (incluso animados). Haz clic en el botón Selecciona imagen y elige una imagen de botón de tu biblioteca de medios.
  5. Tooltip. Texto breve que se muestra junto al botón de WhatsApp. Por ejemplo. 💬¿Necesitas ayuda?
  6. Retardo del botón. Tiempo desde que se abre la página hasta que se muestra el botón de WhatsApp. Valor establecido en segundos.
  7. Solo móvil. (Activación / Desactivación) para Solo mostrar el botón en móviles.
  8. WhatsApp Web. (Activación / Desactivación) para abrir directamente WhatsApp Web en el escritorio.

Ventana de chat. Si defines una «Llamada a la acción» se mostrará una ventana simulando un chat antes de iniciar WhatsApp. Puedes presentarte, ofrecer ayuda o incluso hacer promociones a tus usuarios.

  1. Llamada a la acción. En la ventana de chat puedes definir un texto (CTA) para animar a los usuarios a contactar por WhatsApp. Puedes escribir texto con estilos de formato como en WhatsApp: _cursiva_ *negrita* ~tachado~. Incluso utilizar iconos emoji y código ASCII. Puedes usar las variables dinámicas que serán reemplazadas por los valores de la página que visita el usuario: {SITE} (Join.chat), {URL} (https://join.chat/example) {TITLE} (Título de página).
    Por ejemplo: Hola 👋 Dime, ¿En qué puedo ayudarte?(Si has comprado CTA Extras Add-on podrás añadir vídeos, imágenes, GIFs animados y mucho más, consulta la documentación del Add-on)
  2. Botón de inicio de WhatsApp. Texto del botón de inicio de WhatsApp en la ventana de chat. Por ejemplo: Iniciar Chat
  3. Color del tema. Elige el color que tú desees de la paleta de colores o escríbelo en código hexadecimal.
  4. Modo oscuro. (Activación / Desactivación / Automático) Muestra la ventana de chat con una gama de colores oscuros. Si está en automático detecta la configuración del modo oscuro del dispositivo.
  5. Logo. Puedes elegir entre mostrar el logotipo de Join.chat, WhatsApp, o un texto personalizado.
    🚧  Desde la versión 4.1 de Join.chat las opciones para personalizar la cabecera vienen por defecto en el plugin gratuito.
  6. Retardo del chat. Tiempo en segundos (0 desactivado) para que la ventana de chat se muestre automáticamente tras el retardo. El retardo se inicia tan pronto esté cargada la página.
  7. Visitas. Número de visitas a la página a partir de la cual la ventana de chat se muestra automáticamente. Indicado para evitar la confluencia de Join.chat con el aviso de cookies y ventanas modales popup.
  8. Globo de aviso. (Activación / Desactivación) muestra un globo de aviso en lugar de abrir la ventana de chat para un modo «menos intrusivo».

Pulsa en el botón Guardar cambios para establecer los nuevos valores indicados.

👉Ve a la pestaña Visibilidad para establecer los ajustes de visibilidad. Aquí puedes configurar en qué páginas será visible el botón de WhatsApp. Pulsa en el enlace Restaurar visibilidad por defecto para regresar a los valores iniciales:

Global. Visible (Activado / No visible (Desactivado)

  • Página de inicio. Opciones: Visible / No visible / Heredar
  • Página del blog. Opciones: Visible / No visible / Heredar
  • Página 404. Opciones: Visible / No visible / Heredar
  • Resultados de búsqueda. Opciones: Visible / No visible / Heredar
  • Archivo. Opciones: Visible / No visible / Heredar
  • — Archivos por fecha. Opciones: Visible / No visible / Heredar
  • — Archivos de autor. Opciones: Visible / No visible / Heredar
  • Simple. Opciones: Visible / No visible / Heredar
  • — Página. Opciones: Visible / No visible / Heredar
  • — Entrada. Opciones: Visible / No visible / Heredar

Tipos de contenido personalizados.

  • Portfolio. Opciones: Visible / No visible / Heredar

WooCommerce

  • Tienda. Opciones: Visible / No visible / Heredar
  • — Página de producto. Opciones: Visible / No visible / Heredar
  • — Carrito. Opciones: Visible / No visible / Heredar
  • — Finalizar pago. Opciones: Visible / No visible / Heredar
  • — Mi cuenta. Opciones: Visible / No visible / Heredar

Pulsa en el botón Guardar cambios para establecer los nuevos valores indicados.

A nivel de página

  1. Para modificar los ajustes generales en una página o entrada especifica, dirígete a dicha página y edítala.
  2. En el lateral derecho encontrarás el Metabox de Join.chat donde podrás modificar el Teléfono, así como la Llamada a la acción, el Mensaje y las Opciones de visualización de Join.chat para esa publicación en concreto.
  3. Finalmente haz clic en Actualizar.
Configura y personaliza Join.chat en el metabox del lateral derecho de cualquier Entrada, Página, Producto o Custom Post Type editando la publicación en el panel de control.

WooCommerce

Si tienes instalado el plugin de WooCommerce puedes configurar Join.chat también en tu tienda.

👉 Ve a la pestaña WooCommerce para establecer los ajustes en las Llamadas a la acción para productos y para productos en oferta, así como para los mensajes para productos. Así conseguirás ahorrar mucho tiempo y ser más productivo usando variables (recuerda que puedes definir textos específicos en cada página de producto).

Ventana de chat de producto. Puedes definir otros textos generales diferentes para las páginas de producto.

  1. Llamada a la acción para productos. Ventana de CTA que define un texto para animar a los usuarios a contactar por WhatsApp. Puedes escribir texto con estilos de formato como en WhatsApp: _cursiva_ *negrita* ~tachado~. Incluso utilizar iconos emoji y código ASCII. Puedes usar las variables dinámicas que serán reemplazadas por los valores de la página de producto que visita el usuario: {PRODUCT} (Nombre del producto), {SKU} (ABC98798) {PRICE} (Precio del producto).
    Por ejemplo: ¡Este *{PRODUCT}* puede ser tuyo por solo *{PRICE}*!
  2. Llamada a la acción para productos en oferta. Es igual que el caso anterior, pero solo funcionará en los productos en oferta. Puedes usar las variables dinámicas que serán reemplazadas por los valores de la página de producto que visita el usuario: {REGULAR} (Precio normal), {PRICE} (Precio rebajado), {DISCOUNT} (Descuento porcentual).
    Por ejemplo: ¡Ahorra *{DISCOUNT}* en *{PRODUCT}*. Puede ser tuyo por tan solo ~{REGULAR}~ *{PRICE}*.
  3. Mensaje para productos. Texto predefinido del primer mensaje que envía el usuario por WhatsApp. Puedes usar las variables {SITE} {URL} {TITLE}. Por ejemplo: Hola {SITE}. Tengo una pregunta sobre {PRODUCT} - {SKU}

Pulsa en el botón Guardar cambios para establecer los nuevos valores indicados.

Páginas de tienda, carrito y pago. Puedes modificar los ajustes de Join.chat para estas paginas editando la página en el Metabox de Join.chat (como en la seción anterior «A nivel de página«).


Comportamiento

El plugin dispone de una serie de comportamientos en función de la configuración y la interacción de los usuarios.

NOTA 1: Al interactuar con una Llamada a la acción (cerrar la ventana de chat o abrir WhatsApp) se considera como «visto» y dejará de mostrarse automáticamente.

NOTA 2: Cada Llamada a la acción (CTA) es independiente. Por ejemplo: el CTA general puede estar «visto» pero en otras páginas tener CTAs distintos que se mostrarán según la configuración.

Botón

  • CONDICIONES:
    • «Teléfono» definido
    • «Visibilidad» establecida como ‘mostrar’
  • COMPORTAMIENTO:
    • El botón aparece siempre después de los segundos de «Retardo del botón».

Tooltip

  • CONDICIONES:
    • «Tooltip» definido
  • COMPORTAMIENTO:
    • Se muestra si no se va a mostrar automáticamente la Ventana de chat.
    • No se vuelve a mostrar automáticamente si está «visto» .

Ventana de chat

  • CONDICIONES:
    • «Llamada a la acción» definida
    • «Retardo del chat» mayor que cero
    • «Globo de aviso» desmarcada
  • COMPORTAMIENTO:
    • A partir del número de «Visitas» se muestra la Ventana de chat después de los segundos de «Retardo del chat».
    • No se vuelve a mostrar automáticamente si está «visto» .

Globo de aviso

  • CONDICIONES:
    • «Llamada a la acción» definida
    • «Retardo del chat» mayor que cero
    • «Globo de aviso» marcada
  • COMPORTAMIENTO:
    • Se muestra después de los segundos de «Retardo del chat».
    • No se vuelve a mostrar automáticamente si está «visto» .

Disparadores

Además del comportamiento definido según los ajustes también puedes interactuar con Join.chat en tus páginas de dos formas:

  1. Añadiendo enlaces de ancla:
    • #joinchat para mostrar la ventana de chat (o lanzar WhatsApp si no hay CTA) al hacer clic.
    • #whatsapp para lanzar WhatsApp directamente al hacer clic.
  2. Añadiendo clases CSS en tu HTML:
    • joinchat_open para mostrar la ventana de chat (o lanzar WhatsApp si no hay CTA) al hacer clic.
    • joinchat_close para ocultar la ventana de chat al hacer clic.
    • joinchat_app para lanzar WhatsApp directamente al hacer clic.
    • joinchat_show para mostrar la ventana de chat cuando un elemento HTML aparece en pantalla al hacer scroll (solo si es un CTA no visto).
    • joinchat_force_show para mostrar la ventana de chat cuando un elemento HTML aparece en pantalla al hacer scroll (siempre).

Funciona con tus ajustes de teléfono y mensaje con variables dinámicas, incluso en páginas en las que Join.chat no es visible.

Ejemplo de ancla: <a href="#whatsapp">Contacta con nosotros</a>
Ejemplo de clase: <img src="contact.jpg" class="joinchat_open" alt="Contacta con nosotros">


Traducciones

Join.chat es compatible con WPML y Polylang permitiendo traducir a cada idioma los textos que configures en los ajustes generales:

  1. Configura los ajustes generales de Join.chat en el idioma principal del sito.
  2. Según el plugin:
    WPML. Dirígete a WPML> Traducción de cadenas y filtra las cadenas por el dominio «Join.chat».
    Polylang. Dirígete a Idiomas> Traducción de cadenas y filtra las cadenas por el grupo «Join.chat».
  3. Actualiza las traducciones de las cadenas para cada idioma y guarda.

Más información sobre la traducción de cadenas en WPML y Polylang.


Integración con analíticas

Es importante saber cómo interactuan los usuarios con tu página y desde dónde contactan más por WhatsApp. Para eso Join.chat reconoce automáticamente si están presentes en tu sitio Google Analytics, Google Tag Manager y Facebook Pixel y envía un evento cuando el usuario lanza WhatsApp.

Google Analytics

Es compatible con Global Site Tag (gtag.js) y Universal Analtics (analytics.js). Se envía un evento con los parámetros:

action: 'click'
category: 'JoinChat'
label: url de contacto de WhatsApp

Si el objeto global de Universal Analytics no usa el nombre por defecto ‘ga’, a través del filtro PHP 'joinchat_get_settings' puedes pasar el parámetro ‘ga_tracker’ con el nombre personalizado.
🌟 Desde la versión 4.1.5 es compatible con el plugin de MonsterInsights que usa el objeto global ‘__gaTracker’.

add_filter( 'joinchat_get_settings', function( $settings ){
 $settings['ga_tracker'] = 'my_custom_GA_name';
 return $settings;
} );

Google Tag Manager

Se lanza un evento personalizado con los parámetros:

event: 'JoinChat'
eventAction: 'click'
eventLabel: url de contacto de WhatsApp 

Píxel de Facebook

Se envía un «Custom Event» con el nombre 'JoinChat' y los parámetros:

eventAction: 'click'
eventLabel: url de contacto de WhatsApp 

Otras integraciones

Join.chat dispara el evento 'joinchat:open' antes de lanzar WhatsApp. Éste puede usarse para añadir un código personalizado de seguimiento (u otras necesidades). El evento envía dos parámetros: un objecto con el enlace de WhastApp y otro con la configuración de Join.chat.

Ejemplo para conversión de Google Ads:

jQuery(function($){
 $(document).on('joinchat:open', function (event, args, settings) {
 // Your staff...
 // Note: args.link is the link to open, you can change it
 // but only wa.me, whastapp.com or current domain are allowed.

 // e.g.: Google Ads conversion
  gtag('event', 'conversion', {
 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
  'value': 1.0,
  'currency': 'USD',
 });
 });
});

🍪 Utilizamos cookies para mejorar tu experiencia. Visita nuestra Política de Privacidad para saber más.

AL UTILIZAR NUESTRA WEB, ACEPTAS EL USO DE COOKIES.