---
title: "Variables"
description: "Usa variables para mostrar datos dinámicos en tus flows."
---

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 elementos y personalizar el contenido de las pantallas.

Para abrir el panel de variables, haz clic en el icono **{ }** en el panel izquierdo. El panel tiene tres pestañas:
- **[Personalizadas](#custom-variables)**: Variables que creas y gestionas tú mismo.
- **[Producto](#product-variables)**: Variables integradas que extraen datos localizados de productos y ofertas del store.
- **[Elemento](#element-variables)**: Variables vinculadas a los estados de los elementos en el lienzo.
## Variables personalizadas \{#custom-variables\}
### Crear una variable personalizada \{#create-a-custom-variable\}

1. En el panel de variables, haz clic en **+**.
2. Escribe un nombre para la variable.
3. Selecciona un tipo: String, Number o Boolean.
4. Establece un valor inicial. Este es el valor que tendrá la variable cuando comience el flow.
5. Haz clic en **Create variable**.

:::tip
Usa puntos en los nombres para agrupar variables relacionadas — por ejemplo, `user.score` o `user.goal`.
:::

### Actualizar una variable mediante una interacción \{#update-a-variable-via-an-interaction\}

:::link
Consulta el artículo de [Acciones](onboarding-actions) para más detalles.
:::

Puedes actualizar el valor de una variable en tiempo de ejecución añadiendo una acción **Set up variables** 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 up variables**.
4. Haz clic en **Add variable**. Selecciona la variable y establece el nuevo valor.
:::tip
Por ejemplo, puedes asignar un valor diferente a `user.goal` según la respuesta que seleccione el usuario en un cuestionario y, a continuación, usar esa variable para llevarlo a una pantalla diferente.
:::

## Variables de producto \{#product-variables\}

Las variables de producto obtienen datos localizados directamente de las stores. Úsalas en campos de texto para mostrar precios localizados, títulos y detalles de ofertas, o en condiciones para mostrar u ocultar contenido según la elegibilidad de la oferta.
| 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 dividido entre los días del período de facturación. Vacío para productos que no son suscripciones. | $0.33 |
| `prod_price_per_week` | Precio de la suscripción dividido entre las semanas del período de facturación. Vacío para productos que no son suscripciones. | $2.33 |
| `prod_price_per_month` | Precio de la suscripción ajustado a un mes. Vacío para productos que no son suscripciones. | $9.99 |
| `prod_price_per_year` | Precio de la suscripción ajustado 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 |
:::tip
Usa `is_free_trial`, `is_pay_up_front` e `is_pay_as_you_go` con visibilidad condicional para mostrar u ocultar elementos según la oferta para la que el usuario sea elegible. Por ejemplo, muestra una línea de tiempo de prueba gratuita solo cuando `is_free_trial` sea `true`.
:::

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 pago por adelantado y prueba gratuita, `offer_billing_period` y `offer_full_duration` devuelven el mismo valor. En cambio, para Pago por uso, difieren porque el período de facturación es una semana, pero la duración total es de tres semanas.

:::note
Para obtener más información sobre las ofertas y cómo configurarlas, consulta [Ofertas](offers).
:::
## Variables de elemento \{#element-variables\}

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

Los tipos de variables de elemento dependen del grupo:
- **Opción única**: Cuestionarios de opción única y pestañas:
    - `selected_id`: ID del elemento para usar en condiciones
    - `selected_title`: Título del elemento para usar en texto dinámico
- **Opción múltiple**: Cuestionarios de opción múltiple:
    - `selected_ids`: IDs de elementos para usar en condiciones
    - `selected_titles`: Títulos de elementos para usar en texto dinámico
- **Toggle**: Toggle de prueba:
    - `is_selected`: Valor booleano
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](onboarding-navigation-branching) según sus respuestas al cuestionario
## Usar variables en texto \{#use-variables-in-text\}

Para insertar una variable en un elemento de texto:

1. Selecciona un elemento de texto en el canvas.
2. En la pestaña **Design**, busca el campo **Content** y escribe tu texto.
3. Haz clic en el icono **{ }** del campo.
4. Selecciona una variable de la lista.

:::tip
También puedes usar variables en otros elementos:
- Usa variables en enlaces y alertas para hacerlos dinámicos
- Crea condiciones dinámicas basadas en variables. Por ejemplo, la condición puede ser `if experience.current > experience.target, navigate to...`
:::

### Variables de estilo \{#style-variables\}

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](onboarding-text#set-up-text-styles) guardado.
### Reutilizar contenido en varias pantallas \{#reuse-content-across-screens\}

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](#create-a-custom-variable) 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.