---
title: "Переменные"
description: "Используйте переменные для отображения динамических данных в ваших флоу."
---

Переменные позволяют отображать динамический контент во флоу — цены на продукты, детали предложений и другие данные, которые меняются в зависимости от контекста конкретного пользователя. Используйте их для управления видимостью элементов и персонализации содержимого экранов.

Чтобы открыть панель переменных, нажмите значок **{ }** на левой панели. Панель содержит три вкладки:
- **[Пользовательские](#custom-variables)**: Переменные, которые вы создаёте и настраиваете самостоятельно.
- **[Продуктовые](#product-variables)**: Встроенные переменные, подтягивающие локализованные данные о продукте и офере из стора.
- **[Элементные](#element-variables)**: Переменные, привязанные к состояниям элементов на холсте.
## Пользовательские переменные \{#custom-variables\}
### Создание кастомной переменной \{#create-a-custom-variable\}

1. На панели переменных нажмите **+**.
2. Введите имя переменной.
3. Выберите тип: String, Number или Boolean.
4. Задайте начальное значение — это значение, которое переменная принимает при запуске флоу.
5. Нажмите **Create variable**.

:::tip
Используйте точки в именах, чтобы группировать связанные переменные — например, `user.score` или `user.goal`.
:::

### Обновление переменной через взаимодействие \{#update-a-variable-via-an-interaction\}

:::link
Подробнее — в статье [Действия](onboarding-actions).
:::

Вы можете обновить значение переменной в рантайме, добавив действие **Set up variables** к любому элементу.

1. Выберите элемент на канвасе.
2. На вкладке **Interactions** нажмите **Add trigger**.
3. Выберите **On tap** и нажмите **Add action**. В выпадающем списке **Action type** выберите **Set up variables**.
4. Нажмите **Add variable**. Выберите переменную и задайте новое значение.
:::tip
Например, можно присвоить разные значения переменной `user.goal` в зависимости от ответа пользователя в квизе, а затем использовать эту переменную для перехода на нужный экран.
:::

## Переменные продукта \{#product-variables\}

Переменные продукта берут локализованные данные напрямую из сторов. Используйте их в текстовых полях для отображения локализованных цен, названий и деталей офферов, а также в условиях для показа или скрытия контента в зависимости от доступности оффера.
| Переменная | Описание | Пример |
| :--- | :--- | :--- |
| `prod_title` | Локализованное название продукта | Premium Subscription |
| `prod_price` | Локализованная цена за один расчётный период | $9.99 |
| `prod_price_per_day` | Цена подписки, делённая на количество дней в расчётном периоде. Пустая для разовых покупок. | $0.33 |
| `prod_price_per_week` | Цена подписки, делённая на количество недель в расчётном периоде. Пустая для разовых покупок. | $2.33 |
| `prod_price_per_month` | Цена подписки, приведённая к одному месяцу. Пустая для разовых покупок. | $9.99 |
| `prod_price_per_year` | Цена подписки, приведённая к одному году. Пустая для разовых покупок. | $119.88 |
| `offer_price` | Локализованная цена introductory offer или promotional offer. Пустая, если пользователь не имеет права на оффер. | $0.99 |
| `offer_billing_period` | Локализованный расчётный период оффера. Совпадает с `offer_full_duration` для триальных и pay-upfront офферов. Пустая, если пользователь не имеет права на оффер. | 1 week |
| `offer_full_duration` | Локализованная полная длительность оффера. Пустая, если пользователь не имеет права на оффер. | 1 month |
| `is_free_trial` | Возвращает `true`, если пользователь имеет право на оффер с бесплатным пробным периодом. | true |
| `is_pay_up_front` | Возвращает `true`, если пользователь имеет право на pay-up-front оффер. | true |
| `is_pay_as_you_go` | Возвращает `true`, если пользователь имеет право на pay-as-you-go оффер. | true |
:::tip
Используйте `is_free_trial`, `is_pay_up_front` и `is_pay_as_you_go` с условной видимостью, чтобы показывать или скрывать элементы в зависимости от того, какой оффер доступен пользователю. Например, показывайте таймлайн бесплатного пробного периода только когда `is_free_trial` равно `true`.
:::

Значения переменных оффера зависят от типа оффера, на который имеет право пользователь. Для примера рассмотрим недельную подписку «Premium Subscription» за $5 с тремя возможными офферами:
- **Pay As You Go**: Первые 3 недели за $3 (списывается еженедельно), затем $5/неделю.
- **Pay Up Front**: Первые 3 недели за $8 (списывается сразу), затем $5/неделю.
- **Free Trial**: Первая неделя бесплатно, затем $5/неделю.

В этом примере `prod_title` возвращает «Premium Subscription», а `prod_price` возвращает $5. Значения переменных оффера зависят от того, на какой оффер имеет право пользователь:

| Переменная | Pay As You Go | Pay Upfront | Free Trial |
| :--- | :--- | :--- | :--- |
| `offer_price` | $3 | $8 | $0 |
| `offer_billing_period` | 1 неделя | 3 недели | 1 неделя |
| `offer_full_duration` | 3 недели | 3 недели | 1 неделя |
Для предложений Pay Upfront и Free Trial `offer_billing_period` и `offer_full_duration` возвращают одинаковое значение. Для Pay As You Go они различаются, поскольку расчётный период составляет одну неделю, а полная продолжительность — три недели.

:::note
Подробнее о предложениях и их настройке см. в разделе [Предложения](offers).
:::
## Переменные элементов \{#element-variables\}

Переменные элементов фиксируют выбор пользователя — что он выбрал в квизах, на какой вкладке находится и включён ли переключатель триала.

Тип переменной зависит от группы:
- **Одиночный выбор**: Квизы с одиночным выбором и вкладки:
    - `selected_id`: ID элемента для использования в условиях
    - `selected_title`: заголовок элемента для использования в динамическом тексте
- **Множественный выбор**: Квизы с множественным выбором:
    - `selected_ids`: ID элементов для использования в условиях
    - `selected_titles`: заголовки элементов для использования в динамическом тексте
- **Переключатель**: Переключатель триала:
    - `is_selected`: булево значение
Распространённые сценарии использования:
- Отображение разного контента в зависимости от того, включён ли переключатель пробного периода.
- [Переход пользователей на разные экраны](onboarding-navigation-branching) в зависимости от их ответов в квизе
## Использование переменных в тексте \{#use-variables-in-text\}

Чтобы вставить переменную в текстовый элемент:

1. Выберите текстовый элемент на холсте.
2. На вкладке **Design** найдите поле **Content** и введите текст.
3. Нажмите на иконку **{ }** в поле.
4. Выберите переменную из списка.

:::tip
Переменные можно также использовать в других элементах:
- Используйте переменные в ссылках и алертах, чтобы сделать их динамическими
- Создавайте динамические условия на основе переменных. Например, условие может выглядеть так: `if experience.current > experience.target, navigate to...`
:::

### Переменные стилей \{#style-variables\}

Применить форматирование к отдельной переменной нельзя. Если выделить переменную в поле **Content** и попытаться сделать её жирной, курсивной, подчёркнутой, зачёркнутой или изменить её цвет — ничего не произойдёт.

Форматирование применяется только ко всему текстовому блоку целиком. Чтобы стилизовать текст, используйте раздел **Typography** на вкладке **Design** или выберите сохранённый [стиль текста](onboarding-text#set-up-text-styles).
### Повторное использование контента на разных экранах \{#reuse-content-across-screens\}

Некоторый контент повторяется на нескольких экранах флоу — например, подпись кнопки «Продолжить», призыв к действию или дисклеймер, который показывается на нескольких экранах. То же касается более длинных текстов — например, описания функции, которое используется на нескольких экранах. Вместо того чтобы вводить этот контент в каждый элемент вручную, сохраните его в кастомной переменной. Это удобно, когда вы направляете разных пользователей на разные экраны, но хотите, чтобы формулировки везде были одинаковыми.
1. [Создайте пользовательскую переменную](#create-a-custom-variable) типа String и задайте её начальное значение как текст, который хотите переиспользовать. Например, назовите её `button.navigation` и установите значение `Continue`.
   
2. Вставьте эту переменную в поле **Content** каждого элемента, где должен появляться этот текст.
Чтобы изменить текст везде сразу, достаточно один раз обновить начальное значение переменной. Все элементы, использующие её, обновятся автоматически — редактировать каждый экран вручную не нужно.