El panel Interactions te permite definir cómo responden los elementos del flow a los eventos — como toques, apariciones de elementos y envíos de formularios. Para cada evento, asignas una o más acciones: navegar entre pantallas, mostrar u ocultar elementos, abrir URLs, establecer variables y más. Usa condiciones para personalizar el flow según los datos del usuario.

Cada interacción sigue una cadena de tres partes:

1. Elemento: El componente de pantalla que inicia la interacción — un botón, una respuesta de quiz, un campo de texto o cualquier otra cosa.
2. Disparador: El evento que activa la lógica, como un toque, la aparición de un elemento o el envío de un formulario.
3. Acción: La tarea que ejecuta el flow en respuesta. Un único disparador puede encadenar varias acciones en secuencia.

Configurar interacciones

Para configurar una interacción:

1. Selecciona un elemento en la pantalla o en el panel Layers.
2. A la derecha, cambia al panel Interactions y haz clic en Add trigger.

3. En la sección Button triggers, selecciona el tipo de trigger.

4. Haz clic en Add action, luego en el nombre de la acción y selecciona un tipo de acción en el desplegable de la ventana Edit action.

5. Configura las propiedades de la acción según el tipo de acción que hayas seleccionado.
6. Si es necesario, haz clic en Add action para añadir más acciones al mismo disparador.

Tipos de disparadores

Actualmente, puedes añadir los siguientes disparadores a tu flow:

• On tap: Inicia una acción cuando el usuario toca un elemento. Es el disparador más habitual; se usa principalmente para navegar entre pantallas.
• On screen appear: Inicia una acción en cuanto se carga una pantalla. Úsalo para lanzar una animación o registrar una impresión cuando se muestre la pantalla.

Tipos de acción

Navegar a la pantalla

Esta es la acción principal para mover a los usuarios entre pantallas. Lleva al usuario a una pantalla de destino especificada.

Para esta acción, solo necesitas configurar la pantalla de destino. Si quieres habilitar la navegación dinámica, consulta Navegación y bifurcación o la sección Acciones condicionales.

Volver atrás

Lleva al usuario a la pantalla anterior en su historial de navegación, en lugar de a la pantalla anterior en la secuencia.

Abrir URL

Abre una dirección web específica. Úsalo para enviar a los usuarios a páginas web, artículos o perfiles de redes sociales fuera de las pantallas nativas de tu app. Para esta acción, puedes configurar dos ajustes:

• URL address: Establece una URL. Además, puedes hacerla dinámica, por ejemplo, para redirigir a los usuarios a páginas distintas según su respuesta en un cuestionario o los datos que hayan enviado. Para ello, haz clic en y selecciona la variable que quieras usar.
• Open in external browser: Define dónde quieres abrir los enlaces externos. Por defecto, se abren en un navegador integrado en la app para mantener a los usuarios dentro de ella. Marca la casilla Open in external browser si prefieres abrirlos en un navegador externo.

Cerrar flow

Cierra el flow actual.

Mostrar/ocultar elementos

Muestra u oculta un elemento concreto en la pantalla.

Esta acción anula el estado inicial definido en Visibility en el panel Design. Si Visibility está configurado como Hide, la acción Show hará que el elemento aparezca.

Mostrar alerta

Muestra una ventana emergente nativa del sistema. El usuario debe pulsar Ok para continuar.

En las alertas, debes configurar el Title y el Message. En ambos campos puedes usar variables para que el contenido sea dinámico. Para ello, haz clic en y selecciona la variable que quieras usar.

Establecer variable

Actualiza el valor de una variable en el flow. Antes de añadir esta acción, crea las variables en el panel Variables de la izquierda (consulta Variables).

Haz clic en Add variable y define tantas variables y valores como necesites.

Compra

Lanza un flujo de compra directamente desde un botón o interacción en tu onboarding. Úsalo para que los usuarios se suscriban o compren un producto sin salir del flow. Puedes configurar dos comportamientos para esta acción:

• In-app store: Inicia una compra nativa. Establece Product en un producto específico, o en products.selectedProduct para la selección actual del usuario en la pantalla.
• Web payment: Envía al usuario a un paywall web en lugar de activar una compra nativa. Úsalo cuando quieras gestionar la transacción fuera de la app, por ejemplo, para ofertas de suscripción basadas en web.

Personalizado

Ejecuta una acción personalizada con nombre que tu código de app gestiona. Úsala cuando necesites un comportamiento que los tipos de acción integrados no contemplan — por ejemplo, disparar un evento in-app, aplicar un descuento o mostrar una pantalla nativa personalizada.

Para configurar una acción personalizada:

1. En la ventana Edit action, asigna un Action ID — una cadena que tu app reconocerá (por ejemplo, show_discount).
2. En el código de tu app, implementa un manejador para ese Action ID. Consulta Gestionar acciones del paywall para ver los detalles de implementación.

Acciones condicionales

Usa acciones condicionales para dividir el flow en diferentes rutas según los datos del usuario.

Algunos casos de uso habituales son:

• Tienes un cuestionario en la pantalla y quieres redirigir a los usuarios a diferentes pantallas según sus respuestas. En este caso, añade una acción condicional a un botón.
• Quieres ofrecer diferentes productos y ofertas a distintos grupos de usuarios. Colócalos en pantallas diferentes y configura condiciones en un botón de navegación.
• Quieres omitir ciertos pasos para los usuarios que ya completaron un tutorial en una sesión anterior de la app. Las acciones condicionales funcionan como una cadena if / else-if / else. La aplicación lee las reglas de arriba a abajo y se detiene en la primera coincidencia:

1. IF: El flow comprueba la condición principal.
   • ¿Es verdadera? El flow ejecuta las acciones THEN de inmediato y se detiene.
   • ¿Es falsa? El flow salta a la siguiente sección.
2. ELSE IF: Aquí puedes añadir comprobaciones adicionales (p. ej., “Si no es Premium, ¿está el usuario en un periodo de prueba?”).
3. ELSE (Fallback): Si ninguna de las reglas anteriores coincidió, el flow ejecuta las acciones de esta sección final.

Para cada regla, selecciona una variable a evaluar y una acción a ejecutar. Puedes establecer más de una acción por regla.

Para aprender a hacer elementos seleccionables y organizarlos en grupos para usarlos en condiciones, consulta Elementos seleccionables y grupos.

Solución de problemas

Cualquier acción con campos obligatorios vacíos bloquea la vista previa y la publicación. Consulta Guardar y publicar flows para ver la lista completa.