Centro de Ayuda › WhatsApp › Chatbot Designer
Guía de referencia

Guía de Widgets de Designer

Referencia de widgets, configuraciones, ejemplos de conexión, operaciones con variables y recomendaciones para revisar flujos automatizados.

Cómo utilizar esta guía

Consulta la descripción de cada widget, revisa los campos de configuración y conecta todas las salidas con el siguiente paso correspondiente. Prueba las rutas normales y alternativas antes de publicar el flujo.

01

Bienvenida

Inicia la conversación con un saludo e indica al cliente qué debe hacer después. En la biblioteca aparece como Enviar Mensaje Bienvenida!.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra el icono de lápiz y escriba un saludo breve. Utilice el selector de variables {} si necesita incluir un valor guardado en el mensaje.

2. Explique claramente la siguiente acción, como elegir un servicio o escribir una solicitud. El texto de bienvenida no configura las opciones del menú.

3. Conecte su salida al primer menú o pregunta. La biblioteca deshabilita este widget cuando ya existe una Bienvenida en el flujo.

Ejemplo y conexiones

¡Hola! Bienvenido a nuestro centro de atención. Elige una opción para comenzar.

Utilice un único punto de entrada. Conecte Bienvenida → Lista de opciones de WhatsApp y mantenga el saludo separado de las opciones.

02

Despedida

Presenta el mensaje de cierre al final de una ruta automatizada. En la biblioteca aparece como Enviar Mensaje Despedida!.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra el widget e introduzca el mensaje de despedida. Indique un siguiente paso útil sin prometer acciones que todavía no se han realizado.

2. El formulario también incluye Proceso Terminar, un campo de texto de finalización. Use una etiqueta clara y acorde con el proceso, por ejemplo Conversación finalizada.

3. Conecte a este widget las rutas que deben terminar. Si el cliente necesita una explicación, agregue un mensaje previo a la despedida.

Ejemplo y conexiones

Gracias por contactarnos. ¡Que tengas un excelente día!

Despedida es un punto de cierre. No la coloque antes de una pregunta que todavía necesita respuesta.

03

Enviar mensaje

Envía información y, opcionalmente, captura la respuesta del cliente en una variable. Permite tanto anuncios sencillos como preguntas.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Escriba el mensaje. Seleccione No en Captura Datos para informar, o Si para recoger una respuesta.

2. Para capturar datos, elija la variable de destino o cree una. Seleccione AlfaNumerico, Texto, Numerico, Fecha, Correo o URL según la respuesta esperada.

3. Configure el mínimo y máximo de caracteres, el mensaje de tipo de dato no válido y el de longitud no válida. Indique Minutos de Espera al Capturar y pulse Aplicar.

4. Utilice el valor capturado más adelante mediante el selector de variables o un Condicional. No reutilice la misma variable para respuestas que no estén relacionadas.

Ejemplo y conexiones

Pregunta: Describe brevemente en qué necesitas ayuda. Guarde la respuesta en support_reason, con una longitud de 5 a 500 caracteres y una espera de 5 minutos.

Conecte la pregunta con el paso que utiliza su respuesta. Los mensajes de validación son distintos del texto principal de la pregunta.

04

Selección múltiple

Crea un menú fijo con códigos de respuesta y etiquetas para cada opción. Resulta útil cuando se pide al cliente responder con un número.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Escriba la pregunta y use Agregar Boton para crear las opciones. En cada fila, defina el código de respuesta y el texto que verá el cliente.

2. Utilice X para retirar una opción. Mantenga códigos únicos e indique en la pregunta cómo debe responder el cliente.

3. Complete Mensaje Opcion No Valida y Minutos de Espera. Use Variable Opcion Seleccionada cuando necesite conservar la respuesta elegida.

4. Conecte la salida de cada opción con su siguiente paso. Revise las conexiones cuando agregue o retire opciones.

Ejemplo y conexiones

1 — Volver al menú; 2 — Hablar con un agente; 3 — Finalizar. Respuesta no válida: Por favor, responde 1, 2 o 3.

Conecte Volver al menú con el menú principal, Hablar con un agente con la condición de disponibilidad y Finalizar con Despedida.

05

Transferir agente

Entrega la conversación al servicio multiagente. Sus ajustes aparecen directamente en el lienzo.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Elija Seleccionar Todos para el grupo disponible, Agentes para seleccionar personas específicas o Departamentos para elegir un departamento.

2. Revise los modos No Transfiere y Forzar Transferencia según la política de atención. Confirme el comportamiento de la cola y la disponibilidad mediante una prueba controlada antes de forzar la transferencia.

3. Active Habilitar horario habil cuando la transferencia deba respetar el horario de atención configurado.

4. Revise las salidas Transferido y Fuera de horario. Prepare una ruta útil para el segundo caso, como informar el horario de atención y después mostrar la despedida.

Ejemplo y conexiones

Menú principal → Condicional que comprueba agentes conectados → Transferir agente. Si no hay agentes conectados, muestre un mensaje de disponibilidad.

Tener agentes conectados no garantiza atención inmediata. Explique al cliente qué puede esperar antes de transferirlo.

06

Condicional

Evalúa una variable y dirige la conversación según se cumpla o no la regla configurada.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Elija la variable, el operador de comparación y el valor con el que se comparará. Utilice un operador adecuado para el tipo de dato.

2. Los operadores de texto incluyen Contiene, Es Igual a, No es Igual a, No Contiene, Comienza Con y Termina Con. Vacío y No Vacío comprueban si existe un valor.

3. Los operadores numéricos incluyen Mayor Que, Menor Que, Menor o Igual Que y Mayor o Igual Que. El formulario también ofrece comparaciones de arreglos y una condición de agente conectado.

4. Utilice Agregar Mas Condicional para ampliar la regla y Aplicar para confirmarla. Revise ambas rutas al combinar condiciones.

Ejemplo y conexiones

Si system_cantidad_agentes_logueados es mayor que 0, conecte Cumple con Transferir agente y No cumple con un mensaje de falta de disponibilidad.

Cumple indica que se satisface la regla; No cumple indica lo contrario. Conecte ambos resultados para evitar que la conversación quede sin continuación.

07

Botones de WhatsApp

Presenta botones seleccionables de WhatsApp debajo de un mensaje.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Escriba una pregunta breve y use Agregar Boton para crear las etiquetas. Utilice textos distintos, concisos y que describan la acción de cada botón.

2. Use X para retirar un botón. El control Archivos permite asociar un adjunto cuando sea necesario.

3. Use Variable Opcion Seleccionada para conservar la respuesta. Defina Mensaje Opcion No Valida para una respuesta no admitida.

4. Conecte la salida de cada botón con el siguiente widget correspondiente. Compruebe la presentación final en el canal de WhatsApp de destino.

Ejemplo y conexiones

Botones: Información, Soporte y Hablar con un agente. Cada opción abre su rama correspondiente.

Elija este widget para un menú compacto que se pueda tocar. Utilice Lista de opciones de WhatsApp cuando necesite organizar la selección en categorías.

08

Botón web interna

Envía un mensaje con un botón que abre la página web configurada.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Complete Mensaje, Texto del boton y Pagina web. El mensaje y la URL admiten referencias a variables como {{support_reason}}.

2. La URL final debe comenzar con http:// o https://. Utilice el selector {} para insertar valores que ya estén asignados.

3. Revise las advertencias del formulario. Se señalan el mensaje vacío, la URL vacía y la falta de conexión con el siguiente widget.

4. Pulse Aplicar cambios y conecte el paso siguiente. Valide el destino en el canal previsto antes de ponerlo en funcionamiento.

Ejemplo y conexiones

Mensaje: Abre nuestro centro de ayuda. Botón: Centro de ayuda. URL: https://example.com/help.

Este widget abre una página. Generar enlace web es el widget específico para continuar la conversación en un chat web configurado.

09

Lista de opciones de WhatsApp

Construye una lista de selección de WhatsApp con categorías y opciones.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Configure el título del mensaje, el mensaje principal y el texto utilizado para abrir la lista.

2. Use Agregar Categoria para agrupar opciones relacionadas y + Agregar Opcion para agregarlas dentro de la categoría. Escriba el título de cada categoría y opción.

3. Use X para retirar elementos. En Respuesta, el formulario utiliza Guardar Texto Boton; seleccione una variable de destino para conservar el texto elegido.

4. Pulse Guardar Cambios y conecte la salida de cada opción con la rama correspondiente.

Ejemplo y conexiones

Atención al cliente / ¿En qué podemos ayudarte hoy? / Ver opciones. En Servicios: Información, Soporte técnico y Hablar con un agente.

Use nombres de categorías y opciones que el cliente entienda de inmediato. Compruebe cada salida después de editar la lista.

10

Enviar correo

Redacta un correo como parte del flujo. Permite enviar notificaciones o resúmenes cuando la integración de correo está configurada.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Complete Asunto, De, Para y, opcionalmente, Cc. El formulario indica que las direcciones múltiples se separan por comas.

2. Escriba el cuerpo del mensaje y utilice los controles {} para insertar variables existentes en los campos que lo admiten.

3. Use Archivos si el correo necesita un adjunto y después pulse Aplicar.

4. Verifique la configuración del remitente y utilice un destinatario de pruebas autorizado antes de habilitar el paso en un flujo real.

Ejemplo y conexiones

Asunto: Solicitud de soporte. Cuerpo: Solicitud del cliente: {{support_reason}}. Envíe el correo únicamente a la dirección del equipo autorizada para este proceso.

Configure un paso adecuado después del correo. Una configuración guardada no demuestra por sí sola que el mensaje se haya entregado.

11

Archivos

Agrega un paso de entrega de archivos a la conversación. Su menú abre la ventana de selección de archivos.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra el menú de opciones del nodo para mostrar la biblioteca. Revise las miniaturas y los nombres de los archivos disponibles.

2. Seleccione el archivo necesario y use Agregar archivos para asociarlo. La barra de herramientas también incluye Archivos para gestionar los recursos.

3. Revise la vista previa del nodo y confirme que esté seleccionado el documento o contenido multimedia correcto.

4. Conecte el siguiente paso y compruebe que el archivo abra correctamente en el canal de destino. Si ayuda al cliente, agregue antes un widget Enviar mensaje con una explicación.

Ejemplo y conexiones

Enviar mensaje: Aquí tienes nuestra guía de inicio. Después, Archivos entrega la guía y un menú ofrece ayuda adicional.

La disponibilidad y entrega dependen del archivo cargado y del canal. No asuma que todos los formatos se comportan de la misma manera.

12

Solicitud API

Conecta el flujo con un servicio externo. El formulario ofrece GET y POST, una URL externa y controles para los datos de la solicitud y la asignación de la respuesta.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Elija GET para consultar datos o POST cuando lo requiera la especificación del servicio. Complete URL externa con el endpoint documentado del servicio.

2. Abra Parametros para los parámetros de la solicitud y Encabezados para los encabezados necesarios. Opciones Avanzadas admite configuración en JSON.

3. Use Respuesta En Variables para asignar campos de la respuesta a variables del flujo. El campo de ruta muestra un ejemplo con corchetes: [status][0].

4. Probar solicitud ejecuta una solicitud real: utilice un entorno de pruebas autorizado. Aplique la configuración y compruebe que los pasos posteriores contemplen valores ausentes o inesperados.

Ejemplo y conexiones

Consulte el estado de un caso de soporte, guárdelo en case_status y utilice Condicional para elegir el siguiente mensaje.

Este widget realiza una integración. Un mensaje posterior muestra el resultado; asignar un campo a una variable no lo explica automáticamente al cliente.

13

Selección múltiple dinámica API

Genera opciones a partir de los datos de una variable, normalmente obtenidos de una respuesta API. Así evita mantener cada opción de forma manual.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Escriba la pregunta y elija la variable en Seleccionar Variable a Recorrer.

2. Use Opcion Recorrer para indicar el campo de cada elemento. El formulario muestra el ejemplo ['name']. Las conversiones opcionales son fecha a texto y hora de 24 a 12 horas.

3. Defina la opción fija adicional, el mensaje de opción no válida y el tiempo de espera en minutos.

4. Use Variable Opcion Seleccionada para conservar el elemento elegido. Revise Probar opciones dinámicas con datos de ejemplo adecuados y pulse Aplicar.

Ejemplo y conexiones

Después de consultar las citas disponibles por API, muestre cada cita con su nombre u hora e incluya una opción fija para volver.

Los datos de origen deben tener la estructura que espera la expresión de cada elemento. Prepare una ruta para datos vacíos o no disponibles antes de mostrar el menú.

14

Manejo de variables

Transforma o asigna valores para otros widgets. Un nodo puede incluir varias operaciones agregadas mediante Agregar Manejo.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra Manejo de Variables y elija una operación. Pulse Agregar Manejo para insertar su configuración.

2. Seleccione la variable de destino y complete los valores de origen, el formato o la expresión que requiera la operación.

3. Para Obtener Fecha Actual, el formulario ofrece DD-MM-YYYY, YYYY-MM-DD y YYYY/MM/DD, junto con el selector de variable de destino.

4. Revise las operaciones y pulse Aplicar Cambios. Use nombres claros y ordene el flujo para que cada valor exista antes de consultarlo.

Ejemplo y conexiones

Guarde la fecha actual en request_date e incluya {{request_date}} en un mensaje de resumen.

Consulte la referencia de operaciones al final del manual. Manejo de variables prepara datos; utilice Enviar mensaje para mostrar el resultado al cliente.

15

URL corta

Crea un enlace corto a partir de una URL y guarda el resultado en una variable para reutilizarlo.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra Url Corta y elija Variable asignar, que recibirá el resultado. Si es necesario, utilice Crear Nueva Variable.

2. Introduzca la URL de origen en el campo de valor. Use {} cuando parte o toda la dirección provenga de una variable existente.

3. Pulse Aplicar Cambios y conecte un mensaje o botón posterior que utilice el resultado.

4. Confirme que el enlace generado lleve al destino correcto antes de utilizarlo en un flujo de clientes.

Ejemplo y conexiones

Convierta una URL larga de seguimiento en short_link y envíe: Consulta tu solicitud aquí: {{short_link}}.

El nodo prepara el enlace. Para entregarlo, incluya la variable de destino en un mensaje posterior dirigido al cliente.

16

Tiempo de espera

Pausa el flujo durante la cantidad de segundos configurada antes de continuar con el siguiente paso conectado.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Abra el widget. La configuración indica un rango de 2 a 40 segundos.

2. Introduzca la duración necesaria y pulse Aplicar Cambios.

3. Conecte el paso que debe ejecutarse después de la pausa. Use esperas breves cuando aporten claridad a la secuencia.

4. Distinga este temporizador del tiempo máximo para responder que se configura en una pregunta o menú.

Ejemplo y conexiones

Enviar mensaje → Tiempo de espera de 2 segundos → Archivos. La pausa separa la introducción del archivo adjunto.

La pausa no captura una respuesta ni confirma que un agente o servicio externo haya terminado su trabajo.

17

IA PDF

Utiliza un PDF de referencia y una pregunta guardada en una variable para obtener una respuesta de IA, que se asigna a otra variable.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Introduzca la Clave API de la integración mediante el procedimiento de configuración autorizado.

2. Seleccione Variable que contiene la pregunta y Variable contiene respuesta de IA PDF. Utilice variables diferentes para pregunta y respuesta.

3. Elija el archivo de referencia y escriba las Instrucciones complementarias para orientar el alcance y el estilo de la respuesta.

4. Pulse Aplicar Cambios. Conecte un mensaje que muestre la respuesta y una ruta alternativa clara hacia un agente si el cliente necesita más ayuda.

Ejemplo y conexiones

Capture la pregunta en support_reason, consulte la guía de servicio aprobada y guarde la respuesta en pdf_answer. Después muestre {{pdf_answer}}.

Utilice un documento de referencia actualizado y revise la calidad de las respuestas. La captura muestra los campos de configuración sin credenciales.

18

Generar enlace web

Crea un enlace para continuar la conversación en un chat web seleccionado, con el mismo número de teléfono. El formulario se titula Generar enlace web.

Captura de configuración del widget en Chatbot Designer
Vista del widget en Designer

Configuración

1. Elija el chat web de destino. El formulario muestra los chats del canal web del mismo chatbot; el destino debe existir previamente.

2. Cree o seleccione la variable que guardará la URL. El mensaje siguiente utiliza esa variable para enviar el enlace.

3. Defina el plazo de primer ingreso en minutos y el tiempo para retomar el chat en horas. Los valores predeterminados son 60 minutos y 24 horas; 0 horas impide volver después de completar.

4. Seleccione las variables adicionales que se compartirán. Se copian por nombre al ingresar y deben existir también en el destino. El teléfono siempre se transmite; el nombre se copia cuando tiene valor.

Ejemplo y conexiones

Generar enlace web → Enviar mensaje con {{web_chat_url}}. Después, el formulario indica agregar Esperar chat web.

El destino y la variable de URL son obligatorios. El formulario menciona Esperar chat web, pero este complemento no figuraba entre los 18 widgets de la biblioteca revisada.

Referencia de operaciones con variables

En Manejo de variables, seleccione una operación y pulse Agregar Manejo. Los campos cambian según la operación elegida. Asigne los resultados a variables que puedan consultar los widgets posteriores.

Convertir Hora 18:00 a 6:00 pm

Convierte una hora de formato de 24 horas a una representación de 12 horas.

Convertir Fecha a Texto

Convierte una fecha en texto para utilizarla en un mensaje dirigido al cliente.

Condicional Si

Agrega una asignación o transformación condicional para el caso que cumple la regla. Revise los campos de la condición seleccionada.

Condicional Sino

Configura el caso alternativo de un tratamiento condicional de valores.

Extraer Palabras Separadas

Extrae partes de un texto mediante los ajustes de separación de la operación.

Cambiar Formato Fecha

Cambia la representación de una fecha al formato requerido por un paso posterior.

Obtener Fecha Actual

Guarda la fecha actual. Los formatos disponibles incluyen DD-MM-YYYY, YYYY-MM-DD y YYYY/MM/DD.

Obtener Hora Actual (22:00:00)

Guarda la hora actual en la representación de 24 horas indicada por la opción.

Concatenar Variables

Une los valores de varias variables en un resultado, como un nombre o resumen.

Operaciones Basicas (+ - x /)

Realiza sumas, restas, multiplicaciones o divisiones con valores numéricos adecuados.

Extraer Datos JSON String

Extrae un valor de un texto que contiene JSON mediante los campos de extracción configurados.

Guardar Resumen Variable

Utiliza la operación de guardar resumen para conservar el valor de resumen configurado.

Ejemplo de flujo de servicio al cliente

Este patrón de nueve nodos utiliza siete tipos de widgets y tres nodos Enviar mensaje. Ofrece información, recoge una solicitud de soporte y permite transferir la conversación a un agente.

Bienvenida → Lista de opciones de WhatsApp. Salude al cliente y presente Información, Soporte técnico y Hablar con un agente.

Información → Enviar mensaje → Selección múltiple. Explique el horario o los servicios y ofrezca Volver al menú, Hablar con un agente y Finalizar.

Soporte técnico → Enviar mensaje con captura → Condicional. Solicite el motivo de soporte y guárdelo en support_reason.

Hablar con un agente → Condicional. Compare system_cantidad_agentes_logueados con 0 mediante Mayor Que.

Cumple → Transferir agente. Envíe la conversación a los agentes o al departamento seleccionados según la política de atención.

No cumple o Fuera de horario → Enviar mensaje → Despedida. Explique la falta de disponibilidad y cierre cordialmente.

Selección múltiple: Volver al menú → Lista de opciones de WhatsApp; Hablar con un agente → Condicional; Finalizar → Despedida.

Por qué funciona este orden

El primer menú identifica la intención del cliente. La rama de soporte recoge el contexto antes de transferirlo. La condición de disponibilidad separa el intento de transferencia de la ruta sin agentes, y la despedida proporciona un cierre claro.

Variables del ejemplo

menu_choice guarda la selección principal. support_reason conserva la solicitud escrita. system_cantidad_agentes_logueados aporta el valor de la comparación de disponibilidad. Use el selector para elegir el identificador exacto de cada variable existente.

Revisión de configuración y solución de problemas

Una rama se detiene inesperadamente

Revise la conexión de salida del widget anterior. Compruebe cada opción del menú y ambas salidas de Condicional. Sin conexión indica que una salida no tiene destino.

El flujo utiliza un valor vacío

Confirme que la variable exista y tenga un valor antes de utilizarla. En una respuesta API, revise la estructura real de la respuesta y la ruta de extracción seleccionada.

El menú rechaza una respuesta aparentemente válida

Revise los códigos o etiquetas y el mensaje de opción no válida. Confirme que las instrucciones coincidan con el tipo de menú que ve el cliente.

La transferencia no funciona como se esperaba

Revise los agentes o el departamento seleccionados, el estado de conexión, el modo de transferencia y el horario hábil. Compruebe el comportamiento de la cola con una prueba, no solo a partir del diseño.

El enlace web no está listo

Seleccione el chat web de destino y la variable de URL. Revise el plazo de primer ingreso, el tiempo para volver y los nombres de variables en ambos bots. Siga la secuencia de continuación que indica el widget.

Falla una integración

Para API, revise método, endpoint, encabezados, parámetros, opciones JSON y asignación de respuesta. Para correo, revise remitente y destinatarios. Para IA PDF, compruebe credenciales, archivo de referencia y variables de entrada y salida.

El editor sigue mostrando cambios sin guardar

Aplique el formulario abierto, guarde el flujo y confirme Guardado. Guardar el diseño no demuestra que una acción externa o entrega por el canal haya tenido éxito.

Antes de publicar

Revise bienvenida y despedida, pruebe cada opción, compruebe respuestas inválidas y vacías, confirme las rutas alternativas y valide archivos e integraciones con datos de prueba autorizados. Mantenga una ruta clara hacia la atención humana.