Disparadores

Introducción

Joinchat dispone de una función que te permitirá lanzar la ventana de chat o abrir directamente WhatsApp desde elementos personalizados y creados por ti, a esto lo llamamos «Disparadores» y te dan todo el control sobre el comportamiento del plugin. Puedes interactuar con Joinchat 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 elementos 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 Joinchat no es visible.

Botón de WhatsApp en el menú

Para añadir un botón de WhatsApp al menú de WordPress simplemente navega desde el Escritorio → Apariencia → Menús. En el bloque «Añadir elementos al menú» accede a «Enlaces personalizados».

Abrir ventana de chat

En URL añade #joinchat para mostrar la ventana de chat (o lanzar WhatsApp si no hay CTA) al hacer clic. Personaliza el texto del enlace y haz click en «Añadir al menú«.

Una vez añadido el elemento dale a «Guardar menú«

Ahora ya puedes ver el resultado en el front de tu sitio web.

Lanzar WhatsApp directamente

En URL añade #whatsapp para lanzar WhatsApp. Personaliza el texto del enlace y haz click en «Añadir al menú«.

Una vez añadido el elemento dale a «Guardar menú«

Ahora ya puedes ver el resultado en el front de tu sitio web.

Botón de WhatsApp en Gutenberg

Para crear un botón de WhatsApp en el editor de Gutenberg añade un bloque de botón, una vez personalizado solo tienes que añadir como enlace #joinchat si quieres mostrar la ventana de chat (o lanzar WhatsApp si no hay CTA) o #whatsapp para lanzar WhatsApp directamente al hacer clic.

Recuerda que no solo puedes usar esto en un botón, por ejemplo puedes añadirlo a cualquier enlace de texto, aquí tienes un ejemplo, también al enlace de una imagen, es muy sencillo y te da muchas posibilidades.

Botón de WhatsApp en Elementor

Para crear un botón de WhatsApp con el editor visual Elementor arrastra el elemento botón a la página, configura su apariencia y añade como enlace #joinchat si quieres mostrar la ventana de chat (o lanzar WhatsApp si no hay CTA) o #whatsapp para lanzar WhatsApp directamente al hacer clic.

Recuerda que no solo puedes usar esto en un botón, por ejemplo puedes añadirlo a cualquier enlace de texto, una imagen o cualquier widget de Elementor que permita insertar un enlace.

Al hacer scroll

Otra forma muy interesante de interactuar con Joinchat es añadiendo clases CSS en elementos HTML, esto nos permitirá por ejemplo ejecutar disparadores cuando un elemento aparece en pantalla.

Selecciona el bloque que deseas que haga de disparador, puede ser un párrafo, una imagen o cualquier bloque de Gutenberg que permita la inserción de clases CSS. En el sidebar derecho, Bloque → Avanzado → Clases CSS adicionales.

Añade joinchat_show para mostrar la ventana de chat cuando el bloque aparece en pantalla al hacer scroll (solo si es un CTA no visto), o joinchat_force_show para mostrar la ventana de chat cuando el bloque aparece en pantalla al hacer scroll (siempre).

Continua haciendo scroll y verás el resultado 👇

Abrir la ventana de chat de WhatsApp… ¡AHORA! 💥