Многостраничные попапы

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

Обычный попап — это один экран. Но реальные сценарии часто требуют большего:

• Пошаговые формы (wizard): разбить длинную форму на несколько коротких шагов, чтобы не пугать пользователя.
• Ветвящиеся квизы: показать разные результаты в зависимости от ответов.
• Экран подтверждения: после ввода email показать "Спасибо! Проверьте почту".
• Экран ошибки: если что-то пошло не так — предложить повторить.
• Калькуляторы: собрать данные на одном шаге, показать результат на другом.

Каждый попап начинается с основного экрана. К нему можно добавить:

• Основной — всегда один, это главная страница попапа.
• Тизер — компактный элемент (кнопка, бейдж), по клику на который открывается основной экран.
• Экран успеха — показывается автоматически после успешной отправки формы.
• Экран ошибки — показывается при ошибке отправки.
• Произвольный экран — создавайте сколько угодно. Именно они дают свободу для wizard-ов, ветвлений и любых других сценариев.

Перемещение пользователя между экранами работает через кнопки. У каждой кнопки (ActionButton) есть настройка "Действие", где доступны варианты:

• Перейти к экрану — переносит пользователя на выбранный экран.
• Назад — возвращает на предыдущий экран (как кнопка "Назад" в браузере).
• Остальные действия (отправить форму, закрыть попап, ссылка, переход по правилам) работают как раньше.

---

Внизу редактора есть панель Экраны. Нажмите "Добавить" и выберите тип:

• Для wizard-а: добавьте несколько произвольных экранов ("Новый экран").
• Для формы с подтверждением: добавьте экран успеха.
• Для тизера: добавьте Тизер — подробнее в статье Тизер.

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

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

Нажмите кнопку "Просмотр" в редакторе, чтобы протестировать навигацию. Вы увидите попап так, как его увидит посетитель, и сможете пройти по всем шагам.

---

Для продвинутых сценариев — переходы могут зависеть от данных пользователя.

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

Например:

• Если в поле "Бюджет" указано больше 100 000 — показать экран "Премиум предложение".
• Если пользователь выбрал "Да, есть опыт" — перейти к расширенной форме.

1. В панели экранов нажмите на иконку молнии рядом с нужным экраном.
2. В открывшемся окне добавьте правило.
3. Настройте условие: источник (поле формы / ответ квиза / контекст), имя поля, оператор (равно, содержит, больше и т.д.), значение.
4. Выберите целевой экран — куда перейти, если условие выполняется.
5. Если правил несколько — они проверяются по приоритету сверху вниз, срабатывает первое подходящее.

Условия могут проверять данные из трёх источников:

• Поле формы — значение, введённое в текстовое поле, email, телефон и т.д.
• Ответ квиза — выбранный вариант ответа в квизе.
• Контекст — внешние данные, переданные с сайта (подробнее в статье Контекстные переменные).

---

3 экрана: "Контакты" → "О компании" → "Спасибо".

1. На экране "Контакты" — поля Имя, Email, кнопка "Далее" → переход к "О компании".
2. На экране "О компании" — поля Компания, Должность, кнопка "Назад" и "Отправить" (submit).
3. После отправки — автоматически показывается экран "Спасибо".

Экран "Вопрос" → правила переходов → "Результат для новичков" или "Результат для экспертов".

1. На экране "Вопрос" — квиз с вопросом "Ваш уровень опыта".
2. Exit Rule: если ответ = "Новичок" → экран "Рекомендации для начинающих".
3. Exit Rule: если ответ = "Эксперт" → экран "Продвинутое предложение".

4 экрана: "Параметры" → "Доп. опции" → "Результат (стандарт)" / "Результат (премиум)".

Используйте Exit Rules с оператором "больше", чтобы перенаправить на разные экраны результатов в зависимости от суммы.

---

• Не перегружайте: 3-5 экранов — оптимально. Больше 7 — пользователь теряет интерес.
• Кнопка "Назад": всегда добавляйте на промежуточных шагах. Пользователь должен чувствовать контроль.
• Прогресс: используйте текст вроде "Шаг 2 из 3" в заголовке, чтобы пользователь видел, сколько осталось.
• Тестируйте: всегда проходите весь сценарий в режиме "Просмотр" перед публикацией.