Многостраничные попапы
Многостраничные попапы позволяют создавать сложные сценарии взаимодействия прямо внутри одного виджета. Вместо одного статичного экрана вы строите цепочку шагов — с навигацией, ветвлением и условиями перехода.
Зачем нужны несколько экранов?
Обычный попап — это один экран. Но реальные сценарии часто требуют большего:
- Пошаговые формы (wizard): разбить длинную форму на несколько коротких шагов, чтобы не пугать пользователя.
- Ветвящиеся квизы: показать разные результаты в зависимости от ответов.
- Экран подтверждения: после ввода email показать "Спасибо! Проверьте почту".
- Экран ошибки: если что-то пошло не так — предложить повторить.
- Калькуляторы: собрать данные на одном шаге, показать результат на другом.
🎥
Демо многостраничного попапа — переход между экранами по кнопкам
Место для видео или скриншота
Основные понятия
Типы экранов
Каждый попап начинается с основного экрана. К нему можно добавить:
- Основной — всегда один, это главная страница попапа.
- Триггер — компактный элемент (кнопка, бейдж), по клику на который открывается основной экран.
- Экран успеха — показывается автоматически после успешной отправки формы.
- Экран ошибки — показывается при ошибке отправки.
- Произвольный экран — создавайте сколько угодно. Именно они дают свободу для wizard-ов, ветвлений и любых других сценариев.
Навигация между экранами
Перемещение пользователя между экранами работает через кнопки. У каждой кнопки (ActionButton) есть настройка "Действие", где доступны варианты:
- Перейти к экрану — переносит пользователя на выбранный экран.
- Назад — возвращает на предыдущий экран (как кнопка "Назад" в браузере).
- Остальные действия (отправить форму, закрыть попап, ссылка) работают как раньше.
🎥
Настройка кнопки — выбор действия «Перейти к экрану» и целевого экрана
Место для видео или скриншота
Как создать многостраничный попап
Шаг 1. Создайте экраны
Внизу редактора есть панель Экраны. Нажмите "Добавить" и выберите тип:
- Для wizard-а: добавьте несколько произвольных экранов ("Новый экран").
- Для формы с подтверждением: добавьте экран успеха.
- Для триггера: добавьте триггер (подробнее в документации по триггерам).
[!TIP] Произвольные экраны можно переименовать — дважды кликните на название вкладки. Так вы не запутаетесь, если экранов много.
🎥
Панель экранов — добавление нового экрана, переименование по двойному клику
Место для видео или скриншота
Шаг 2. Наполните контент
Каждый экран — это отдельный холст. Переключайтесь между вкладками и наполняйте каждый экран своим контентом: текстом, изображениями, полями ввода и кнопками.
Шаг 3. Свяжите экраны кнопками
На каждом экране разместите кнопку с действием "Перейти к экрану" и выберите, куда она ведёт. На промежуточных шагах добавьте кнопку "Назад", чтобы пользователь мог вернуться.
🎥
Пример wizard-а из трёх шагов — экраны связаны кнопками «Далее» и «Назад»
Место для видео или скриншота
Шаг 4. Проверьте в режиме просмотра
Нажмите кнопку "Просмотр" в редакторе, чтобы протестировать навигацию. Вы увидите попап так, как его увидит посетитель, и сможете пройти по всем шагам.
Условные переходы (Exit Rules)
Для продвинутых сценариев — переходы могут зависеть от данных пользователя.
Что это?
Правила переходов — это условия, которые проверяются после отправки формы. Если условие выполняется, пользователь попадает на определённый экран.
Например:
- Если в поле "Бюджет" указано больше 100 000 — показать экран "Премиум предложение".
- Если пользователь выбрал "Да, есть опыт" — перейти к расширенной форме.
Как настроить
- В панели экранов нажмите на иконку молнии рядом с нужным экраном.
- В открывшемся окне добавьте правило.
- Настройте условие: источник (поле формы / ответ квиза / контекст), имя поля, оператор (равно, содержит, больше и т.д.), значение.
- Выберите целевой экран — куда перейти, если условие выполняется.
- Если правил несколько — они проверяются по приоритету сверху вниз, срабатывает первое подходящее.
🎥
Редактор правил переходов — настройка условия и целевого экрана
Место для видео или скриншота
[!NOTE] Условия проверяются после отправки формы. Если ни одно правило не сработало — используется стандартная логика (экран успеха / экран ошибки).
Доступные операторы
| Оператор | Описание | Пример |
|----------|----------|--------|
| равно | Точное совпадение | Город = "Москва" |
| не равно | Значение отличается | Тариф ≠ "Бесплатный" |
| содержит | Подстрока | Email содержит "@gmail" |
| больше | Числовое сравнение | Бюджет > 50000 |
| меньше | Числовое сравнение | Возраст < 18 |
| заполнено | Поле не пустое | Телефон заполнен |
| не заполнено | Поле пустое | Комментарий не заполнен |
Источники данных
Условия могут проверять данные из трёх источников:
- Поле формы — значение, введённое в текстовое поле, email, телефон и т.д.
- Ответ квиза — выбранный вариант ответа в квизе.
- Контекст — внешние данные, переданные с сайта (подробнее в статье Контекстные переменные).
Примеры сценариев
Wizard регистрации
3 экрана: "Контакты" → "О компании" → "Спасибо".
- На экране "Контакты" — поля Имя, Email, кнопка "Далее" → переход к "О компании".
- На экране "О компании" — поля Компания, Должность, кнопка "Назад" и "Отправить" (submit).
- После отправки — автоматически показывается экран "Спасибо".
[!TIP] Данные со всех шагов собираются автоматически. Даже если пользователь заполнил email на первом шаге, а имя компании на втором — всё отправится вместе.
Квиз с ветвлением
Экран "Вопрос" → правила переходов → "Результат для новичков" или "Результат для экспертов".
- На экране "Вопрос" — квиз с вопросом "Ваш уровень опыта".
- Exit Rule: если ответ = "Новичок" → экран "Рекомендации для начинающих".
- Exit Rule: если ответ = "Эксперт" → экран "Продвинутое предложение".
Калькулятор стоимости
4 экрана: "Параметры" → "Доп. опции" → "Результат (стандарт)" / "Результат (премиум)".
Используйте Exit Rules с оператором "больше", чтобы перенаправить на разные экраны результатов в зависимости от суммы.
🎥
Схема ветвления — один вопрос, два разных результата
Место для видео или скриншота
Полезные советы
- Не перегружайте: 3-5 экранов — оптимально. Больше 7 — пользователь теряет интерес.
- Кнопка "Назад": всегда добавляйте на промежуточных шагах. Пользователь должен чувствовать контроль.
- Прогресс: используйте текст вроде "Шаг 2 из 3" в заголовке, чтобы пользователь видел, сколько осталось.
- Тестируйте: всегда проходите весь сценарий в режиме "Просмотр" перед публикацией.