Las variables te permiten mostrar contenido dinámico en tus flows: precios de productos, detalles de ofertas y otros datos que se actualizan según el contexto de cada usuario. Úsalas para controlar la visibilidad de los elementos y personalizar el contenido de las pantallas.

Para abrir la vista de gestión de variables, haz clic en en el panel izquierdo. La vista incluye tres pestañas:

• Personalizado: Variables in-flow y etiquetas personalizadas — variables que puedes definir desde tu app.
• Producto: Variables integradas que obtienen datos de productos y ofertas localizadas del store.
• Elemento: Variables vinculadas a los estados de los elementos del canvas.

Variables personalizadas

Crear una variable personalizada

1. Abre el panel Variables en el flow builder.
2. Añade una nueva variable: haz clic en .
3. Configura el Name de la variable.
4. (Opcional) Para distinguir entre distintas variables, rellena el campo Description. Al pasar el cursor sobre el nombre de la variable en el builder, verás la descripción.
5. Selecciona el Value Type: String, Number o Boolean. Solo puedes insertar una variable en un elemento de texto si su tipo es String o Number.
6. En el campo Initial value, introduce el valor que tendrá la variable cuando arranque el flow.
7. (Opcional, solo para variables String) Para establecer el valor de la variable desde el código de tu app, marca la casilla Value comes from outside the app. Esta acción es irreversible y bloquea el Value Type. La variable se convierte en un custom tag: tu app deberá asignarle un valor al cargar el flow. Si no se pasa ningún valor, los usuarios verán el valor inicial como respaldo.
8. Haz clic en Create variable.

Las variables son específicas de cada flow. Para usar una variable en otro flow, créala también allí.

Actualizar una variable mediante una interacción

Puedes actualizar el valor de una variable en tiempo de ejecución añadiendo una acción Set variable a cualquier elemento.

1. Selecciona un elemento en el lienzo.
2. En la pestaña Interactions, haz clic en Add trigger.
3. Selecciona On tap y haz clic en Add action. En el desplegable Action type, selecciona Set variable.
4. Haz clic en Add variable. Selecciona la variable y establece el nuevo valor.

Variables de producto

Las variables de producto extraen datos localizados directamente de las tiendas. Úsalas en campos de texto para mostrar precios, títulos y detalles de ofertas localizados, o en condiciones, para mostrar u ocultar contenido según la elegibilidad de la oferta. Cuando insertas una variable para un producto específico, el builder añade ese producto a la lista de la pantalla en el panel Products.

Variable	Descripción	Ejemplo
prod_title	Título localizado del producto	Premium Subscription
prod_price	Precio localizado para un período de facturación	$9.99
prod_price_per_day	Precio de la suscripción convertido a un día. Vacío para productos que no son suscripciones.	$0.33
prod_price_per_week	Precio de la suscripción convertido a una semana. Vacío para productos que no son suscripciones.	$2.33
prod_price_per_month	Precio de la suscripción convertido a un mes. Vacío para productos que no son suscripciones.	$9.99
prod_price_per_year	Precio de la suscripción convertido a un año. Vacío para productos que no son suscripciones.	$119.88
offer_price	Precio localizado de una oferta introductoria o promocional. Vacío si el usuario no es elegible para ninguna oferta.	$0.99
offer_billing_period	Período de facturación localizado de una oferta. Igual que offer_full_duration para ofertas de prueba gratuita y pago por adelantado. Vacío si el usuario no es elegible.	1 week
offer_full_duration	Duración total localizada de una oferta. Vacío si el usuario no es elegible.	1 month
is_free_trial	Devuelve true si el usuario es elegible para una oferta con prueba gratuita.	true
is_pay_up_front	Devuelve true si el usuario es elegible para una oferta de pago por adelantado.	true
is_pay_as_you_go	Devuelve true si el usuario es elegible para una oferta de pago por uso.	true

Las variables prod_price_per_* convierten el precio del período de facturación del producto al período que indiques. La conversión utiliza duraciones de período fijas, no fechas de calendario:

• 1 semana = 7 días
• 1 mes = 30 días
• 1 año = 12 meses, o 365 días

Para una suscripción mensual de $59,99, prod_price_per_week devuelve $14,00: $59,99 × 7 ÷ 30 = $13,9977, redondeado para su visualización. Un mes equivale a 30 / 7 ≈ 4,2857 semanas, por lo que multiplicar el valor semanal por 4 no devuelve el precio original.

Los valores de las variables de oferta dependen del tipo de oferta para la que el usuario es elegible. Para ilustrarlo, tomemos una suscripción semanal llamada “Premium Subscription” a $5, con tres posibles ofertas:

• Pay As You Go: Las primeras 3 semanas por $3 (facturado semanalmente), luego $5/semana.
• Pay Up Front: Las primeras 3 semanas por $8 (facturado de inmediato), luego $5/semana.
• Free Trial: Primera semana gratis, luego $5/semana.

En este ejemplo, prod_title devuelve “Premium Subscription” y prod_price devuelve $5. Los valores de las variables de oferta dependen de la oferta para la que el usuario sea elegible:

Variable	Pay As You Go	Pay Upfront	Free Trial
offer_price	$3	$8	$0
offer_billing_period	1 semana	3 semanas	1 semana
offer_full_duration	3 semanas	3 semanas	1 semana

Para las ofertas de tipo Pago único anticipado y Prueba gratuita, offer_billing_period y offer_full_duration devuelven el mismo valor. Para Pago progresivo, difieren porque el período de facturación es de una semana, pero la duración total es de tres semanas.

offer_price, offer_billing_period y offer_full_duration requieren un producto con una oferta. Sin ella, el flow no se publica.

Todos estos valores provienen del store, por lo que la vista previa del builder solo resuelve algunos de ellos: los valores de oferta permanecen sin resolver en el canvas, y is_free_trial, is_pay_up_front e is_pay_as_you_go siguen la oferta que seleccionaste en la tarjeta de producto. Consulta Vista previa de productos y ofertas para previsualizar cada tipo de oferta mientras diseñas.

Variables de elemento

Las variables de elemento capturan las elecciones del usuario: qué seleccionó en los cuestionarios, en qué pestaña se encuentra y si un toggle está activado.

Los tipos de variables de elemento dependen del grupo:

• Single choice: Cuestionarios de opción única, pestañas y toggles:
  • selectedOptionId: ID del elemento para usar en condiciones
  • selectedOptionTitle: Título del elemento para usar en texto dinámico
• Multi-choice: Cuestionarios de opción múltiple:
  • selectedOptionIds: IDs del elemento para usar en condiciones
  • selectedOptionTitles: Títulos del elemento para usar en texto dinámico
• Toggle: Elementos que alternan entre activado y desactivado:
  • isActive: Valor booleano
• Product: Tarjetas de producto:
  • selectedProduct: El producto seleccionado, para usar en condiciones

Los casos de uso más habituales son:

• Mostrar contenido diferente según si el interruptor de prueba está activado.
• Navegar a los usuarios a distintas pantallas según sus respuestas al cuestionario

Usa variables en el texto

Para insertar una variable en un elemento de texto:

1. Selecciona un elemento de texto en el lienzo.
2. En la pestaña Design, busca el campo Content y escribe tu texto.
3. Haz clic en en el campo.
4. Selecciona una variable. En la pestaña Product, los productos ya incluidos en el panel Products aparecen primero. El resto de tu catálogo se muestra a continuación en Other products.

Variables de estilo

No puedes aplicar formato de texto enriquecido a una variable de forma individual. Seleccionar una variable en el campo Content y aplicar negrita, cursiva, subrayado, tachado o cambio de color no tiene ningún efecto.

Los ajustes de texto enriquecido se aplican únicamente al bloque de texto completo. Para dar estilo al texto, usa la sección Typography de la pestaña Design, o aplica un estilo de texto guardado.

Reutilizar contenido en varias pantallas

Algunos contenidos se repiten en tu flow: una etiqueta de botón como “Continuar”, una llamada a la acción recurrente o un aviso legal que aparece en varias pantallas. Lo mismo ocurre con textos más largos, como la descripción de una función reutilizada en múltiples pantallas. En lugar de escribir ese contenido en cada elemento, guárdalo en una variable personalizada. Esto resulta especialmente útil cuando diriges a distintos usuarios a diferentes pantallas pero quieres mantener un texto coherente en todas ellas.

1. Crea una variable personalizada de tipo String y establece su valor inicial con el texto que quieres reutilizar. Por ejemplo, nómbrala button.navigation y establece el valor como Continue.
   
2. Inserta esta variable en el campo Content de cada elemento donde deba aparecer el texto.

Para cambiar el texto en todas partes, actualiza el valor inicial de la variable una sola vez. Todos los elementos que usan la variable se actualizan automáticamente, así que no tienes que editar cada pantalla a mano.

Los valores de las variables personalizadas no se pueden localizar: la variable muestra el mismo valor en todos los idiomas. Para traducir el texto reutilizado, en el panel Localizations, reemplaza la variable con la traducción en cada fila que la contenga.