Дизайн онбордингов

Warning

С 1 октября 2026 года нельзя создавать новые пейволы и онбординги в устаревшем Paywall Builder и Onboarding Builder, и их поддержка прекращается. Опубликованные пейволы и онбординги продолжат работать в ваших приложениях, и вы по-прежнему сможете их редактировать. Создавайте новые в Flow & Paywall Builder — подробнее об изменениях читайте в статье Deprecation of Paywall Builder and Onboarding Builder.

Конструктор онбордингов для мобильных приложений без написания кода — это мощный и гибкий инструмент, который поможет вам обеспечить пользователям лучший опыт онбординга. Чтобы получить отличный результат, не нужно быть ни разработчиком, ни дизайнером.

Экраны онбординга

Онбординг состоит из нескольких экранов, которые вы добавляете и оформляете.

Пользователи будут переходить между ними, нажимая кнопку.

Tip

Если часть ваших пользователей нуждается в немного другом флоу (например, в фитнес-приложении вы хотите показывать разные изображения «цели» в зависимости от пола пользователя), создавать отдельные онбординги не нужно.

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

Элементы онбординга

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

Доступны следующие группы элементов:

Containers: Контейнеры позволяют настроить гибкую раскладку. Например, если вы хотите добавить текст в две колонки, добавьте Columns, а затем перетащите два текстовых блока в Columns на левой панели. Или, если вы добавляете карусель, нужно добавить изображения в элементы Media внутри неё.
Typography: Добавляйте предварительно отформатированные текстовые блоки и настраивайте их внешний вид по мере необходимости.
Media & Display: Помимо изображений и видео, можно добавлять анимированные графики, демонстрирующие ценность вашего приложения и мотивирующие пользователей.

Поддерживаемые форматы видео: MP4 и WebM. Максимальный размер медиафайла — 15 МБ.

Если вы хотите добавить неподдерживаемый анимированный элемент (например, Lottie), можно конвертировать его в видео (например, с помощью этого инструмента) и вставить как видео.
Quiz: Создавайте короткие опросы с текстовыми и графическими вариантами ответов, чтобы персонализировать онбординг и лучше узнать своих пользователей.
Inputs: Собирайте данные от пользователей.
Buttons: Кнопки позволяют пользователям переходить между экранами, закрывать онбординг или переходить к пейволу. Можно также добавлять глянцевые или анимированные кнопки, чтобы привлечь внимание пользователей и повысить конверсию из установки в покупку.
Loaders: Анимированные лоадеры удерживают внимание пользователей в процессе ожидания.
User engagement: Добавляйте отзывы, списки email-адресов пользователей и обратные отсчёты.

Note

В рамках группы Media & Display можно также добавить пользовательский HTML-код, если встроенных возможностей кастомизации недостаточно.

Однако пользовательские HTML-элементы не предзагружаются и не кешируются, поэтому Raw HTML рекомендуется использовать только для небольших и лёгких элементов.

ID элемента и ID действия

Если вы хотите использовать кнопку для пользовательских действий, назначьте ей action ID и используйте его в исходном коде. Action ID позволяет одинаково обрабатывать разные кнопки с одним и тем же action ID.

Если вы хотите обрабатывать пользовательский ввод в конкретном поле (например, сохранять возраст или email), назначьте ему element ID и используйте его в исходном коде для связывания вопросов с ответами. Element ID можно использовать в онбординге только один раз.

Параметры кастомизации

В конструкторе доступны следующие параметры кастомизации:

Вкладка Styles: Настройте внешний вид элемента.
Вкладка Element: Задайте атрибуты элемента: видимость, действия при нажатии кнопок и другие свойства, не связанные с внешним видом элемента.
Вкладка Screen: Настройте общую конфигурацию экрана: заголовок или отображение счётчика экранов.

Копирование экранов и элементов

Если вы создали онбординг и хотите повторно использовать его части, или хотите внести небольшие изменения и запустить A/B-тесты, можно скопировать один или несколько экранов из одного онбординга в другой.

Чтобы скопировать экраны, откройте конструктор онбордингов и выполните одно из следующих действий:

Кликните правой кнопкой мыши по отдельному экрану и выберите Copy
Выберите нужный экран и нажмите Ctrl+C (Windows) или ⌘+C (Mac)

Также можно копировать отдельные элементы или текстовые блоки — как в рамках одного онбординга, так и между разными онбордингами.

Копирование экранов из web-to-app воронок

Если вы используете web-to-app воронки, созданные в FunnelFox, и хотите использовать экраны из воронок в онбордингах, это можно быстро сделать, скопировав экраны в конструкторе воронок и вставив их в конструктор онбордингов:

В конструкторе воронок FunnelFox кликните правой кнопкой мыши по экрану и выберите Copy, или выберите экран и нажмите Ctrl+C/⌘+C.
Откройте конструктор онбордингов.
Кликните правой кнопкой мыши по экрану, ниже которого хотите вставить скопированный экран, и выберите Paste, или выберите его и нажмите Ctrl+V/⌘+V. Скопированный экран будет вставлен ниже выбранного.