Configurando Chat Funnels y (+)

Chat Funnel | Chat Funnel +

	Chat Funnel	Chat Funnel +
Crear Pasos
Capturar campos (texto, número, email, teléfono, fecha, hora, opción)
Lanzar contacto (derivación a WhatsApp, Telegram, etc)
Lanzar Acciones (Webhook, Conversión de Google Ads, Enviar)
Notificación por correo electrónico de cada lead y sus datos
Seguimiento analíticas avanzado
Captura de campañas (UTMs y GCLID)

¿Qué es un Chat Funnel?

Chat Funnels transforma la manera en que construyes chatbots en WordPress. Como una potente herramienta de marketing conversacional, te proporciona una vía para guiar a los visitantes de tu sitio web a través de un proceso de soporte y ventas, completamente automatizado y personalizado. Su objetivo es optimizar la conversión de leads en clientes satisfechos y comprometidos.

Las conversaciones con Chat Funnels no son genéricas; están diseñadas para ser totalmente personalizables en función del contexto, ya sea una página específica, un producto o una categoría.

Utiliza Chat Funnels y descubre cómo una interacción efectiva puede cambiar la dinámica de tu negocio online, proporcionando una experiencia más rica e individualizada para cada visitante.

Video presentación

Activación de Chat Funnels

Para agregar y configurar tus chatbots a partir de flujos conversacionales, dirígete al panel de control de WordPress en el menú Joinchat> Ajustes> Premium y habilita activando (ON) el complemento de Chat Funnels.

Plantillas para Chat Funnels

NOTA: Puedes ver y descargar más plantillas desde nuestra galería.

En el dashboard de WordPress, ve al menu lateral izquiero, Joinchat> Chat Funnels.

Por defecto hemos creado tres plantillas de ejemplo que recomendamos revisar y usar de base para nuevos Chatbots.

La plantilla de «Estructura básica» te proporciona una visión de los pasos que debería contener tu chatbot, podrás que ver que hay en total 10 y están descritos e identificados según sus funciones. Puedes modificar y añadir nuevos pasos desde esta plantilla inicial.

La plantilla de «Ejemplos CTA» es un muestrario de las diferentes opciones que puedes usar para componer tus mensajes o integrar herramientas externas. Puedes ver en cada paso ejemplos de uso y características con ejemplos de como añadir Botones, Links, imágenes, videos o iframes, incluso textos aleatorios para que tu chatbot no suene repetitivo.

En la plantilla de «FAQs» encontrarás la base ya creada para un chatbot que responda preguntas frecuentes, con dos niveles de profundidad. Puedes simplificar o ampliar esta plantilla a tu gusto y en función de la cantidad de categorías y preguntas que necesites.

Espacio de trabajo

Lo primero que haremos es crear un nuevo Chat Funnel desde el menú de Joinchat en WordPress, para ello haz clic en «Añadir Chat Funnel«. A continuación pon un título y publica tu chat funnel.

1. El espacio principal es el editor donde podrás añadir pasos y definir sus funciones y características, así como copiar el shortcode de tu chatbot para poder publicarlo en la ventana de chat de Joinchat. Por defecto se inicia con un primer paso ya creado.
2. A la derecha el bloque Publicar, es el estándar de WordPress y te permite ver una previsualización de tu Chatbot.
3. El bloque de Avisos, donde se te alertará de posibles errores en tu chat funnel, ten en cuenta que no siempre tienen por que serlo, pero te ayudará a revisar tu chatbot.
4. Ayuda de mensajes, es un bloque donde puedes ver los estilos y elementos soportados por el campo de mensaje que tendrá cada paso que definas en tu chat funnel. Básicamente son los mismos que ya se podían usar antes en el complemento CTA extras.

Editando un Chat Funnel

1. Aquí defines el título de este paso, intenta ser conciso y descriptivo, puedes usar emojis si quieres tener una guía visual de los pasos.
2. Aquí puedes colapsar o expandir todos los pasos para facilitar su visualización o mover pasos arrastrando. También existe una fila con 4 botones: El primer icono para duplicar el paso, otro para eliminarlo (por seguridad, se requieren tres clicks ya que esta acción no puede deshacerse) uno más para desplazar (Drag & Drop) el paso a otra posición y finalmente para colapsar este paso únicamente.
3. Desde aquí se crea el mensaje del paso actual, puede ser un sencillo texto, pero recuerda que puedes usar múltiples estilos y elementos, todos disponibles y explicados en el bloque de la derecha que vimos anteriormente. En el siguiente ejemplo lanzamos un primer globo con la bienvenida, usando la variable {SITE}, seguida de un segundo globo (separando el texto usando ===).
4. Las opciones generales para los pasos son tres, ir a otro paso, añadir un enlace a otra página o URL y contactar mostrando los canales que haya configurados en Joinchat.

Se pueden añadir tantos pasos como sean necesarios, combinando las tres opciones y los mensajes que sean necesarios, todo dependerá del tipo de flujo que quieras crear.

Publicando tu Chat Funnel

Una vez que tienes tu Chat Funnel diseñado, es hora de ponerlo en acción en tu página web.

Cada Funnel tiene un shortcode {CHAT 14803}, cópialo y pégalo en la ventana de llamada a la acción de Joinchat, puede ser en los ajustes generales o en una página o producto en concreto.

Como ves no es necesario tirar una sola línea de código y puedes crear desde un flujo sencillo, hasta un complejo bot que responda preguntas frecuentes, todo depende de las necesidades concretas.

Si aún así te sientes con ganas de revisar el código, solo tienes que ir a la pestaña Texto y podrás editar, copiar o pegar todo el chatbot desde aquí. 

Traduciendo tu Chat Funnel

Crear traducciones de tu Chat Funnel es muy sencillo, lo primero que debes hacer es crear un Chat Funnel para cada idioma.

Una vez los tengas creados debes asignar el Funnel del idioma principal del sitio en los ajustes de Joinchat (en nuestro ejemplo el Español):

Por último, en las traducciones de Joinchat en «Call to Action» asignamos el Chat Funnel correspondiente a cada idioma:

☝️ Consejo: Para duplicar el Chat Funnel lo más sencillo es editar el original, hacer click la pestaña texto, seleccionar todo, copiar y pegar en un nuevo Chat Funnel. Después guardamos y listo. Incluso para traducirlo puede ser más cómodo en el formato texto, pero hay que tener cuidado de no romper el formato.

NOTA: A partir de este punto necesitarás tener contratado Joinchat Premium con Chat Funnels (+). Solo está incluido con las licencias Personal +, Freelance, Team y Agency de Joinchat Premium

¿Qué es un Chat Funnel (+)?

Chat Funnels (+) multiplica las posibilidades de Chat Funnels añadiendo «entradas», campos que el visitante puede rellenar, y «acciones» que se pueden lanzar según el visitante va rellenando el funnel.

Convierte Chat Funnels en potentes y atractivos formularios conversacionales para captar datos de leads o redirigir a la página de resultados adecuada según las elecciones del visitante.

Activación de Chat Funnels (+)

Para agregar y configurar tus chatbots a partir de flujos conversacionales, dirígete al panel de control de WordPress en el menú Joinchat> Ajustes> Premium y habilita activando (ON) el complemento de Chat Funnels (+).

Entradas (inputs)

Las entradas son pasos que funcionan como campos que el visitante debe rellenar para continuar con el flujo de conversación.

El valor de la entrada se guarda en una variable del tipo «{{nombre_de_entrada}}» y se pueden usar posteriormente en los textos de los siguientes pasos, en enlaces o como campos en los webhooks.

Tipos de entradas:

• Texto: texto libre
• Número: valores numéricos
• Email: dirección de correo electrónico
• Teléfono: número de teléfono
• Fecha: campos separados para día, mes y año
• Hora: campos para hora y minutos en formato 24 horas
• Opciones (select): elige una opción entre varias posibles. Estas opciones además de guardar un valor del campo pueden llevar al usuario por un camino u otro en el flujo.

Uso de Variables en Chat Funnels

Las variables capturadas mediante entradas pueden utilizarse en múltiples lugares dentro de tu Chat Funnel, lo que permite crear experiencias altamente personalizadas.

Dónde puedes usar variables

1. En mensajes de pasos posteriores: Personaliza la conversación usando los datos capturados
   • Ejemplo: «Perfecto {{nombre}}, te contactaremos al {{email}} para confirmar tu cita del {{fecha_cita}} a las {{hora_cita}}»
2. En textos de opciones: Las opciones pueden mostrar información capturada
   • Ejemplo de texto en opción: «Confirmar cita para {{nombre}}»
3. En URLs de enlaces: Crea enlaces dinámicos que incluyen datos del visitante
   • Ejemplo: https://tupagina.com/confirmacion?nombre={{nombre}}&email={{email}}&fecha={{fecha_cita}}
4. En webhooks: Tanto en el payload como en parámetros personalizados
   • Ejemplo de campo personalizado: mensaje_personalizado:Cita solicitada por {{nombre}} para el {{fecha_cita}}
5. En mensajes de WhatsApp: Al usar la opción «Contacto» con mensaje personalizado
   • Ejemplo: «Hola, soy {{nombre}} y me gustaría información sobre {{servicio}}»

Formato de variables

Las variables siempre se escriben entre dobles llaves: {{nombre_de_variable}}

• El nombre debe coincidir exactamente con el nombre que le diste a la entrada
• Son case-sensitive (distinguen mayúsculas y minúsculas)
• Si la variable no existe o está vacía, se muestra el texto literal incluyendo las llaves

Evento JavaScript para captura de inputs

Cuando un visitante completa un campo de entrada, se dispara el evento JavaScript joinchat:input que puedes capturar para realizar acciones adicionales:

document.addEventListener('joinchat:input', function(event) {
  console.log('Campo capturado:', event.detail.name);
  console.log('Valor:', event.detail.value);
  console.log('Tipo:', event.detail.input);
});Lenguaje del código: JavaScript (javascript)

Esto permite, por ejemplo, enviar los datos a herramientas de analytics, activar pixels de conversión parcial, o realizar validaciones personalizadas. Documentación de eventos JavaScript (EN)

Acciones (actions)

Las acciones son pasos que funcionan como disparadores de una acción y continúan con el flujo de la conversación.

Actualmente hay tres tipos: Webhook, Conversión de Google Ads y Enviar.

Webhook

Los webhooks permiten enviar información a tiempo real a otras aplicaciones. Pueden notificar que se ha producido un evento específico para guardar esos datos o automatizar otras acciones (enviar un email, guardar datos, crear un lead, segmentar, etc.).

• URL del endpoint: Aquí definimos la url a la que se enviarán los datos. Puede ser un servicio externo tipo Make, IFTTT, Campaing Monitor, etc. o puedes integrarlo fácilmente con tu propio WordPress con las variables {wp_rest_api} para la API REST y {wp_admin_ajax} para peticiones AJAX.
• Método de solicitud: Puede ser POST o GET
• Formato de solicitud: Puede ser Form pasa simular el envío de un formulario, Text para texto plano o JSON
• Origen de solicitud: Se puede enviar desde Cliente (navegador): el webhook se ejeucuta desde el navegador del usuario o desde el Servidor: el webhook se lanza desde el servidor del site esto evita conocer la url del webhook y problemas de CORS.
• Payload: son los datos que enviaremos en el webhook. Se dividen en dos:
  1. Entradas: Son los campos que hemos ido recogiendo previamente en los pasos de tipo Entrada. Se pueden selleccionar solo algunos o añadir «Todas las entradas» para enviarlas todas.
     Tambien podemos incluir campos extra con el formato nombre_del_campo:valor del campo
  2. Metadatos: Son datos del visitante y de la sesión actual que se capturan automáticamente: Se pueden seleccionar solo algunos o añadir «Todos los metadatos» para enviarlos todos:
     • uuid — Chat UUID: Identificador único de la conversación (útil para hacer seguimiento y evitar duplicados)
     • url — URL: URL de la página donde se realizó la conversión
     • referrer — Referrer: URL desde la que se llega a la página de conversión
     • title — Título: Título de la página web
     • date — Fecha: Fecha de la conversión
     • time — Hora: Hora de la conversión
     • lang — Idioma: Idioma del navegador del visitante
     • site_lang — Idioma del sitio: Idioma configurado en WordPress
     • chat — Chat completo: Registro completo de la conversación en formato texto
     • gclid — Google Click ID (GCLID): Para atribución de Google Ads (se guarda por 90 días)
     • utm_campaign — UTM Campaign: Nombre de la campaña (ej: «promocion_verano»)
     • utm_source — UTM Source: Fuente del tráfico (ej: «google», «facebook», «newsletter»)
     • utm_medium — UTM Medium: Medio de marketing (ej: «cpc», «email», «social»)
     • utm_content — UTM Content: Para diferenciar anuncios o enlaces similares
     • utm_term — UTM Term: Palabras clave de búsqueda pagada

NOVEDAD: A partir de la versión 6.4.0, los webhooks se pueden enviar desde el servidor, lo que garantiza mayor seguridad y confiabilidad.

Conversión de Google Ads

Se puede enviar una conversión de Google Ads dentro del flujo de conversación indicando la etiqueta de conversión.

Google Click ID (GCLID)

El Google Click ID (GCLID) es un parámetro único que Google utiliza para rastrear y atribuir el origen de los clics en campañas de publicidad online, principalmente en Google Ads. Este identificador se adjunta automáticamente a las URL de destino cuando las campañas están configuradas con el seguimiento automático.

En el contexto del marketing digital, el GCLID juega un papel crucial porque permite a los anunciantes conectar los clics generados por anuncios en Google con las acciones que los usuarios realizan en sus sitios web, como compras, registros o cualquier otra conversión. Esto proporciona datos valiosos para medir el ROI (Retorno de Inversión), optimizar las campañas y tomar decisiones basadas en análisis reales.

¿Por qué es importante?

1. Seguimiento de conversiones: El GCLID permite entender qué anuncios, palabras clave o campañas generan resultados, ayudando a optimizar el gasto publicitario.
2. Integración con herramientas de análisis: Facilita la integración de datos con herramientas como Google Analytics o CRMs, logrando una visión completa del comportamiento del cliente.
3. Toma de decisiones basada en datos: Los datos precisos sobre la atribución permiten ajustar estrategias para mejorar la efectividad y la rentabilidad de las campañas.
4. Personalización y remarketing: Ayuda a segmentar audiencias basándose en sus interacciones previas, optimizando las campañas de remarketing.

El uso adecuado del GCLID asegura que cada clic cuente y que las estrategias de marketing estén siempre respaldadas por datos sólidos.

Con Chat Funnels (+) se captura el campo gclid (GCLID) y se almacena durante 90 días. Posteriormente se puede enviar en los webhooks para aplicar la atribución correspondiente en las conversiones.

El GCLID se captura automáticamente en todas las páginas en las que hay un Chat Funnel. De esta forma si el usuario aterriza en una página desde una campaña y posteriormente navega por el sitio y termina haciendo la conversión en otra página se recupera el campo guardado para hacer la atribución correcta.

Si en tu página de destino de la campaña no hay un Chat Funnel puedes añadir el siguiente snippet de javascript para guardar el GCLID y recuperarlo posteriormente en el Funnel:

window.addEventListener('load', () => {
 const params = new URL(window.location).searchParams;
 const gclid = params.get('gclid');
 const gclsrc = params.get('gclsrc');

 if (gclid && (!gclsrc || gclsrc.indexOf('aw') !== -1)) {
 localStorage.setItem('gclid', JSON.stringify({
 value: gclid,
 expiry: new Date().getTime() + 90 * 24 * 60 * 60 * 1000 // 90 days
 }));
 }
});

window.addEventListener('load', () => {
 const params = new URL(window.location).searchParams;
 const gclid = params.get('gclid');
 const gclsrc = params.get('gclsrc');

 if (gclid && (!gclsrc || gclsrc.indexOf('aw') !== -1)) {
 localStorage.setItem('gclid', JSON.stringify({
 value: gclid,
 expiry: new Date().getTime() + 90 * 24 * 60 * 60 * 1000 // 90 days
 }));
 }
});

Enviar (Guardar Datos)

La acción Enviar es una funcionalidad potente de Chat Funnels (+) que permite guardar todos los datos capturados directamente en tu WordPress sin necesidad de configurar webhooks externos. Ideal para captar leads, guardar registros de consultas o almacenar información de visitantes de forma simple y efectiva.

Para guardar los datos de tu Chat Funnel sólo tienes que añadir una acción de tipo Enviar y configurar los pasos del flujo para que pase por ella.

NOTA: No necesitas configurar ningún endpoint o URL. La acción Enviar guarda los datos automáticamente en tu instalación de WordPress.

¿Cómo funciona?

Cuando un visitante llega a un paso con acción Enviar:

1. Se genera un UUID único para identificar la conversación
2. Se recopilan automáticamente todas las entradas capturadas en el funnel
3. Se guardan junto con metadatos del visitante (URL, fecha, hora, idioma, parámetros UTM, GCLID, etc.)
4. Se almacenan en una tabla personalizada de WordPress
5. El flujo de conversación continúa normalmente

Datos que se guardan

Cada Envío de funnel incluye:

Entradas del funnel:

• Todos los campos que el visitante completó. Datos capturados mediante entradas de Chat Funnels (+) (nombre, email, teléfono, fecha, hora, etc.)

Metadatos automáticos:

• Chat UUID: Identificador único de la conversación
• Chat: Conversación completa
• URL: Página donde se realizó la conversión
• Referrer: URL desde la que se llega a la página de conversión
• Título: Título de la página
• Fecha y hora: Timestamp de cuándo se completó el funnel
• Idioma: Idioma del navegador del visitante
• Idioma del sitio: Idioma configurado en WordPress
• Conversación completa: Registro del chat completo con el visitante
• Parámetros UTM: utm_source, utm_medium, utm_campaign, utm_content, utm_term (si están presentes)
• GCLID: Google Click ID para atribución de Google Ads (almacenado durante 90 días)

Varios «Enviar» en un flujo

Una característica muy interesante es que se pueden poner varios Enviar en el mismo funnel y se guardan en un único Envío de funnel. Cada uno de ellos irá añadiendo la nueva información incrementalmente. Por ejemplo: en un flujo inicialmente recoge el nombre y el email y se guarda, después continua preguntando otros datos y guarda de nuevo al finalizar el flujo.

Cuando se inicia un flujo se crea un Chat UUID único para esa conversación y todos los envíos que se lancen se irán guardando añadiendo o actualizando la información en el mismo Envío de funnel.

Notificación por correo electrónico

Además de guardar los datos del Chat Funnel en WordPress, puedes recibir una notificación por correo electrónico cada vez que se realice un envío.

Para activarla, añade una acción de tipo Enviar y activa la opción «Notificar por email». Al habilitarla aparecerán los campos necesarios para configurar el mensaje:

• De (nombre o email): dirección que aparecerá como remitente de la notificación. Puedes indicar únicamente una dirección de correo electrónico o incluir también un nombre, por ejemplo: Mi sitio <wordpress@misitio.com>.
• Para: dirección de correo electrónico que recibirá la notificación. Puedes indicar varias direcciones separadas por comas.
• Asunto: asunto que tendrá el correo electrónico, por ejemplo: Nuevo contacto de {{name}}.

Cuando un visitante llegue a este paso del Chat Funnel, Joinchat guardará la información recopilada y enviará automáticamente una notificación por email con los datos capturados en el funnel y la información del envío.

Esto permite conocer inmediatamente cuándo se ha recibido un nuevo lead, solicitud de información, reserva o cualquier otro tipo de conversión, sin necesidad de acceder al panel de WordPress para comprobar los nuevos envíos.

NOTA: El envío de las notificaciones utiliza el sistema de correo electrónico de WordPress. Para garantizar una buena entregabilidad recomendamos tener correctamente configurado el envío de correo del sitio, preferiblemente mediante SMTP.

Visualización de los Envíos de funnel

Todos los Envíos de funnel guardados se pueden consultar desde el panel de administración de WordPress:

1. Ve a Joinchat > Envíos en el menú de WordPress
2. Verás una lista de todos los envíos con:
   • Datos principales capturados
   • Nombre del Chat Funnel
   • Página de origen
   • Indicador si proviene de Google Ads (con GCLID)
   • Fecha y hora del envío
3. Haz clic en cualquier envío para ver todos los detalles
4. Puedes exportar a CSV todos los envíos para análisis externo o importar a otras herramientas

Exportar Envíos a CSV

Desde la versión 6.5.0, puedes exportar todas tus envíos de funnel a formato CSV para analizarlas en Excel, Google Sheets o importarlas a otras herramientas:

1. Ve a Joinchat > Envíos
2. Usa los filtros si quieres exportar solo envíos específicas (por funnel o fecha)
3. Haz clic en el botón «Exportar a CSV»
4. El archivo se descargará con todas las columnas:
   • Todos los campos capturados
   • Metadatos (URL, fecha, hora, idioma)
   • Parámetros de campaña (UTM, GCLID)
   • Chat completo

Esto es especialmente útil para:

• Análisis de datos en Excel o Google Sheets
• Importar leads a tu CRM
• Backup periódico de tus conversiones
• Reportes para clientes o superiores

Widget del Dashboard

Joinchat Premium agrega automáticamente un widget en el dashboard de WordPress que muestra:

• Número total de envíos
• Últimos envíos recibidas
• Acceso rápido al panel completo de envíos

Casos de uso de Enviar

• Captar leads: Guarda información de contacto de visitantes interesados sin necesitar un CRM externo
• Registro de consultas: Almacena preguntas frecuentes o solicitudes de información
• Pre-reservas: Guarda datos de personas interesadas en un servicio antes de confirmar
• Encuestas rápidas: Recopila respuestas de visitantes sobre productos o servicios
• Registro de eventos: Captura inscripciones a webinars, talleres o eventos
• Backup de datos: Usa Enviar junto con Webhooks para tener una copia de seguridad local de las conversiones

Combinando Enviar con Webhooks

Una estrategia poderosa es usar Enviar y Webhook en secuencia:

1. El visitante completa todas las entradas del funnel
2. Paso Enviar: Guarda los datos en WordPress (copia de seguridad local)
3. Paso Webhook: Envía los datos a tu CRM, email marketing o sistema externo
4. Continúa con mensaje de confirmación final

De esta forma, incluso si el webhook falla temporalmente, los datos quedan guardados en WordPress y no se pierden.

Ventajas de usar Enviar

• ✅ Sin configuración compleja: No necesitas APIs ni servicios externos
• ✅ Control total: Los datos se quedan en tu WordPress, bajo tu control
• ✅ Consulta fácil: Acceso rápido desde el panel de administración
• ✅ Exportación flexible: Descarga a CSV para usar en otras herramientas
• ✅ Backup automático: Complementa tus webhooks con almacenamiento local
• ✅ Atribución de campañas: Guarda automáticamente UTM y GCLID
• ✅ Historial completo: Registro de la conversación completa con cada lead
• ✅ UUID único: Cada conversación tiene un identificador único para seguimiento