---
title: "Создайте персонализированный онбординг"
description: "Пошаговое руководство по созданию многоэкранного онбординга — экраны, контент, навигация и условные переходы — на основе готового примера."
---

Пошаговая инструкция по созданию многоэкранного флоу в Flow Builder — это последовательность экранов, связанных навигационными действиями. Флоу может быть линейным или ветвиться в зависимости от ввода пользователя на предыдущем экране. В этом гайде разобран полный процесс: создание экранов, наполнение контентом, настройка навигации и добавление условных переходов — на примере четырёхэкранного онбординга.

В примере используется:
- **Поле ввода имени** — имя пользователя становится переменной для персонализации.
- **Квиз с одним вариантом ответа** — выбранный ответ определяет, какой экран увидит пользователь следующим.
- **Два пути ветвления** с текстом, адаптированным под каждый сегмент аудитории.
- **Пейвол** в качестве финального экрана.

Этот же подход применим к любому флоу, который персонализирует контент на основе данных от пользователя.

Предпочитаете видеоформат? В этом quickstart-туториале показан весь процесс от начала до конца:
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
## Перед началом работы \{#before-you-start\}

- [Создайте продукты](create-product) в дашборде Adapty. В примере используются два — годовая и месячная подписка.
- [Подключите Adapty к App Store и Google Play](integrate-payments).
## 1. Настройте переиспользуемые стили \{#1-set-up-reusable-styles\}

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

Подробные инструкции смотрите в разделе [Стилизация элементов — Переиспользуемые стили](builder-styling#reusable-styles).

Чтобы настроить стили:
1. На левой панели откройте панель **Styles** Styles.
2. На вкладке **Colors** нажмите **Plus Create style** и добавьте цвета, которые будете переиспользовать. Для каждого цвета выберите значение в режиме Light, затем переключитесь на вкладку Dark и выберите значение для тёмного режима.

3. На вкладке **Text** нажмите на существующий стиль, чтобы изменить шрифт, начертание и размер, или нажмите **Plus Create style**, чтобы добавить собственные пресеты.

## 2. Создайте экраны \{#2-create-the-screens\}

Флоу — это последовательность экранов. Настройте первый экран с общей основой — макетом, фоном и безопасной зоной — а затем продублируйте его для остальных. Так все экраны будут иметь одинаковую основу, и вам нужно настроить её только один раз.

Подробнее об управлении экранами см. в разделе [Экраны и слои — Управление экранами](paywall-layout-and-products#manage-screens).

Чтобы настроить экраны:
1. Нажмите на пустую область холста на первом экране, чтобы открыть настройки экрана.
2. В разделе **System UI** отключите **Safe area**, чтобы фоны и элементы, выровненные по краям, могли выходить за границы экрана.
3. В разделе **Fill** выберите тип фона и настройте его — например, **Image** Image, которое будет отображаться позади каждого экрана флоу.
4. В разделе **Layout** установите направление **Vertical** Vertical и выберите распределение, подходящее для вашего дизайна.

5. В разделе **Screens** левой панели нажмите на три точки Контекстное меню рядом с первым экраном и выберите **Duplicate**. Повторяйте, пока не получите четыре экрана — второй разветвлённый путь добавим позже, продублировав первый.
6. Переименуйте каждый экран в соответствии с его ролью — в нашем примере: `Welcome`, `Quiz`, `Rock path` и `Paywall`.

## 3. Создайте экран приветствия \{#build-the-introduction-screen\}

Первый экран задаёт тон всему флоу — заголовок, список возможностей и призыв к действию, открывающий остальные экраны. В нашем примере это экран Welcome.

Нажмите на экран **Welcome** в панели **Screens**, затем добавьте элементы:

1. Добавьте основное изображение. Нажмите **+** > **Media** > **Image**, загрузите изображение и при необходимости настройте отступы.

2. Добавьте заголовок: нажмите **+** > **Text**, выберите стиль заголовка из сохранённых текстовых стилей и отредактируйте поле **Content**.

3. Добавьте список функций. Нажмите **+** > **List** > **Icon Cards**, затем отредактируйте иконку и подпись в каждой карточке.

4. Добавьте основную кнопку навигации внизу. Действие для неё будет подключено на шаге настройки навигации.

## 4. Создайте экран с вводом и опросом \{#build-the-input-and-quiz-screen\}

Второй экран собирает данные от пользователя. В нашем примере он запрашивает имя и предлагает выбрать один вариант ответа, от которого зависит дальнейший путь пользователя.

Подробнее об элементах ввода и опросах читайте в разделах [Поля ввода и формы](builder-inputs-and-forms) и [Опросы и квизы](onboarding-quizzes).

Нажмите на экран **Quiz** в панели **Screens** и добавьте элементы. Каждая группа на экране — вступление, вопрос + поле ввода, вопрос + квиз — размещается в собственном вертикальном стеке, чтобы связанные элементы оставались визуально сгруппированными.
1. Добавьте заголовок и текст вступления. Нажмите **+** > **Text** > **H1** для заголовка и **+** > **Text** > **Body** для сопроводительного текста.
2. Сгруппируйте вступление. Нажмите **+** > **Layout** > **Vertical Stack**, перетащите новый стек в самый верх дерева слоёв, затем перетащите H1 и текст внутрь него.

3. Добавьте первый вопрос и поле ввода. Нажмите **+** > **Text** для подписи вопроса, затем **+** > **Inputs** > **Text** для поля.
4. Задайте **Element ID** поля ввода на вкладке **Design** — в нашем примере это `name`. Это делает значение доступным как переменную, на которую могут ссылаться другие экраны.

5. Сгруппируйте подпись и поле ввода в Vertical Stack так же, как и вводный экран.
6. Добавьте второй вопрос и квиз. Нажмите **+** > **Text** для подписи, затем **+** > **Quiz** и выберите пресет макета, например Icon Options. Настройте варианты ответов — в нашем примере `Rock` и `Hip hop`.
7. Сгруппируйте подпись и квиз в Vertical Stack аналогичным образом.
8. Задайте ID опций. Выберите каждый вариант квиза, откройте вкладку **Interactions** и задайте его **Element ID**. Эти ID используются в условной навигации далее.

9. Переключите квиз в режим единственного выбора: кликните на пустое место на холсте, чтобы открыть **Screen settings**, прокрутите вниз до **Selectable Groups**, кликните на название группы квиза и установите тип **Single choice**.

10. Добавьте основную кнопку внизу — это кнопка «Далее», которая запускает ветвление.

## 5. Создайте первую ветку пути \{#build-the-first-branching-path\}

Каждый экран пути адаптирует контент под определённый сегмент аудитории. В нашем примере ветка Rock содержит контент, связанный с роком: плейлисты, исполнителей и рекомендации.

Подробнее о переменных — в разделе [Переменные](onboarding-variables).

Чтобы создать экран:
1. На панели **Screens** нажмите на экран **Rock path**.
2. Добавьте заголовок. Установите курсор в поле **Content** там, где должна появиться персонализация, нажмите на иконку переменной Variable icon и откройте вкладку **Elements**. Выберите экран, на котором находится поле ввода — в нашем примере **Quiz** — затем выберите переменную значения этого поля. Picker разрешает её как `<elementId>.value` — в нашем примере `name.value`. Во время выполнения заголовок обновится тем, что ввёл пользователь.

3. Добавьте основной текст как дополнительные текстовые элементы, адаптированные под сегмент аудитории для этого пути.
4. Добавьте основную кнопку внизу.

## 6. Создайте второй вариант пути \{#build-the-second-branching-path\}

Экраны пути обычно имеют одинаковую структуру — меняется только текст. Продублируйте первый экран пути и обновите содержимое.

Чтобы продублировать и обновить:

1. На панели **Screens** выберите первый экран пути и нажмите ⌘D / Ctrl+D, чтобы продублировать его. Копия появится в конце списка экранов.
2. Переименуйте копию — в нашем примере `Hip hop path` — и перетащите её на нужное место в списке экранов, рядом с тем экраном, который вы дублировали.

3. Обновите основной текст для другого сегмента аудитории. Персонализированный заголовок продолжит работать — переменная сохраняется.

## 7. Создайте пейвол \{#build-the-paywall\}

Последний экран — пейвол, где пользователь может оформить подписку. Подробное описание механики пейволов см. в [Создание базового экрана пейвола](basic-paywall-screen). Версия ниже — краткий вариант того же руководства.

Нажмите на экран **Paywall** на панели **Screens** и добавьте элементы:

1. Добавьте **Horizontal Stack** в верхней части и поместите внутрь кнопку **Close**. Пресет Close уже настроен заранее.
2. Добавьте основное изображение, заголовок (с той же переменной персонализации, что и на экранах пути) и подзаголовок в качестве вспомогательного текста.

3. Добавьте продукты: нажмите **+** > **Products** и выберите **Vertical List**. Назначьте каждой карточке продукт из выпадающего списка на вкладке **Design**.
4. Нажмите на карточку продукта по умолчанию и включите **Set as default product**, чтобы он был выбран при загрузке экрана.

5. Добавьте кнопку покупки. Нажмите **+** > **Buttons** и выберите пресет. На вкладке **Interactions** нажмите **Add trigger** > **On tap** > **Add action** и установите **Action** в значение **Purchase**, а **Product** — `products.selectedProduct`.

6. Добавьте ссылки в подвал. Нажмите **+** > **Buttons** > **Links** — строка содержит Restore Purchases, Terms of Use и Privacy Policy. Ссылка Restore уже настроена. Для Terms и Privacy выделите текст каждой ссылки в поле **Content**, нажмите на иконку ссылки в панели форматирования и вставьте URL.

## 8. Настройте навигацию между экранами \{#wire-navigation-between-the-screens\}

Экраны не связываются друг с другом автоматически. Используйте триггеры **On tap** и действия **Navigate to**, чтобы соединить основную кнопку каждого экрана со следующим. Если экран ветвится в зависимости от ввода пользователя, вместо этого применяется **Conditional action**.

Подробнее о навигации и условных действиях — в разделах [Навигация и взаимодействие](onboarding-navigation-branching) и [Действия — Условные действия](onboarding-actions#conditional-actions).

Чтобы настроить навигацию для примера флоу:
1. **Статическая навигация с экрана приветствия.** Откройте экран Welcome, выберите основную кнопку и перейдите на вкладку **Interactions**. Нажмите **Add trigger** > **On tap** > **Add action**, установите **Action** в значение **Navigate to** и выберите следующий экран — в нашем примере это экран Quiz.

2. **Условная навигация из квиза.** Откройте экран Quiz, выберите кнопку Next и добавьте триггер **On tap** с **Conditional action**. Настройте правило IF/ELSE:
   - В выборщике переменных откройте вкладку **Elements**, выберите экран **Quiz** и укажите `quiz.selectedOptionId`.
   - Используйте оператор **Equals** и сравните с ID одного из вариантов — в нашем примере это вариант Rock.
   - **IF** условие совпадает, добавьте **Navigate to** и выберите первый экран пути.
   - **ELSE** добавьте **Navigate to** и выберите второй экран пути.

3. **Статическая навигация с каждого пути ветвления на пейвол.** Повторите шаг 1 на каждом экране пути, указав пейвол в качестве назначения.

## Следующие шаги \{#next-steps\}

- [Сохраните и опубликуйте флоу](builder-save-publish).
- [Добавьте флоу в плейсмент](create-placement), чтобы начать показывать его пользователям.
- Для флоу с таргетингом на конкретные аудитории (вместо ветвления внутри флоу) создайте сегменты аудиторий и назначьте разные флоу на странице плейсмента.