Constructor visual y lienzo de flujos
Domina el constructor visual de automatizaciones: añade disparadores, encadena acciones, crea condiciones con ramificaciones y diseña flujos arrastrando y soltando en el lienzo de React Flow.
El constructor visual
El constructor de automatizaciones usa un lienzo visual interactivo en el que conectas nodos de disparador y de acción para crear tu flujo. Funciona con React Flow, lo que te da una experiencia fluida de arrastrar y soltar.
Abrir el constructor
- Nueva automatización: Automatizaciones → "+ Nueva automatización"
- Editar una existente: haz clic en el icono de lápiz ✏️ de una tarjeta de automatización
- Desde una plantilla: página de Plantillas → "Usar plantilla" (rellena el lienzo de antemano)
Elementos del lienzo
El constructor tiene estos elementos visuales:
Tipos de nodo
| Nodo | Aspecto | Finalidad |
|---|---|---|
| Disparador | Tarjeta con borde azul e icono de disparador | Punto de partida: qué evento inicia la automatización |
| Acción | Tarjeta blanca con icono de acción | Qué ocurre: enviar un mensaje, asignar un equipo, etc. |
| Condición | Tarjeta con salidas Sí/No | Lógica de ramificación: divide el flujo según unos criterios |
| Marcador de rama | Tarjeta con contorno discontinuo | Rama Sí o No vacía, haz clic para añadir acciones |
| Fin del flujo | Indicador de bandera 🏁 | Marca el final de la automatización |
Conexiones (edges)
Los nodos se conectan mediante conexiones insertables: líneas con un botón "+" en el centro. Haz clic en el "+" para insertar una nueva acción entre dos pasos existentes.
Ramas de condición
Cuando añades un nodo Comprobar condición, se crean dos ramas:
- Rama Sí (izquierda): acciones cuando la condición se cumple
- Rama No (derecha): acciones cuando la condición no se cumple
Las ramas se dibujan con conexiones discontinuas animadas y se muestran una al lado de la otra.
Barra de herramientas del constructor
La barra de herramientas superior contiene:
- Nombre del flujo: haz clic para editarlo (por defecto "Automatización sin título")
- Ajustes de la plantilla de WhatsApp: nombre, idioma, categoría (si usas una acción de WhatsApp)
- Botón Guardar: guarda el flujo
- Botón Activar: guarda y activa la automatización
Paneles de configuración
Cuando haces clic en un nodo, se abre un panel de configuración en el lado derecho de la pantalla. Cada tipo de nodo tiene su propio panel:
- Panel de disparador: selecciona el tipo de disparador, el subevento y el retraso
- Panel de Enviar mensaje: texto de la plantilla, variables, selector de emojis
- Panel de Menú interactivo: encabezado, cuerpo, pie, elementos del menú
- Panel de Asignar equipo: selecciona el equipo de destino
- Panel de Enviar email: selecciona una plantilla de email guardada
- Panel de condición: define los criterios de comprobación
- Y más para cada tipo de acción
Añadir pasos
- Haz clic en el botón "+" de cualquier conexión entre nodos
- Aparece un menú emergente con todos los tipos de acción disponibles
- Haz clic en una acción para insertarla en esa posición
- El nuevo nodo aparece en línea, conectado con los pasos anterior y siguiente
Mover y reordenar
Los nodos de la cadena principal se pueden subir o bajar para cambiar el orden de ejecución. El lienzo se reorganiza y reconecta las conexiones automáticamente.
Controles del lienzo
- Acercar/alejar: rueda del ratón o gesto de pellizco
- Desplazar: haz clic y arrastra el fondo del lienzo
- Ajustar vista: se ajusta automáticamente tras los cambios para mostrar todos los nodos
- Fondo: patrón de puntos como referencia visual
Guardar y activar
- Guardar: conserva tu flujo sin activarlo (sigue inactivo)
- Guardar y activar: guarda y activa la automatización de inmediato
- Las automatizaciones existentes se pueden actualizar guardando sobre ellas
Probar con el Playground
Antes de activar, usa el Playground para probar tu flujo. Haz clic en el botón ▶ Playground de la barra de herramientas para abrir un panel de simulación junto a tu lienzo. Puedes enviar mensajes de prueba y ver cómo se ejecuta cada paso, sin crear tickets reales ni gastar créditos. Consulta Playground de automatizaciones: probar tus flujos para ver todos los detalles.