Когда пользователь нажимает кнопку закрытия, он собирается уйти без оплаты. Этот рецепт перехватывает первое нажатие: вместо закрытия пейвола отображается оверлей с финальным предложением. Когда пользователь закрывает это предложение, кнопка закрытия работает в штатном режиме и закрывает флоу.

Логика использует одну пользовательскую булеву переменную и одно условное действие:

• close_tapped начинается как False.
• Первое нажатие на закрытие показывает оверлей с предложением и устанавливает close_tapped в True.
• Любое последующее нажатие на закрытие закрывает флоу.

Перед началом

• Создайте экран пейвола с кнопкой закрытия — например, следуйте гайду Создание базового экрана пейвола.
• Создайте продукт с оффером для продвижения в оверлее.

1. Создайте переменную

Подробнее о пользовательских переменных см. в разделе Переменные.

1. На левой панели нажмите иконку { }, чтобы открыть Variables.
2. На вкладке Custom нажмите +.
3. Назовите переменную close_tapped и установите Value Type в значение Boolean. Оставьте Initial Value равным False.
4. Нажмите Create variable.

2. Создайте оверлей предложения

Оверлей — это контейнер, который прикреплён к экрану устройства и располагается поверх пейвола. Создайте его видимым — скрытые элементы нельзя редактировать, поэтому вы скроете его на шаге 4, когда контент будет на месте.

1. Нажмите + > Layout > Vertical Container.
2. Выделив контейнер, откройте вкладку Design и установите Position в значение Fixed. Задайте горизонтальное выравнивание Left & Right и вертикальное выравнивание Top. Поскольку вертикального центрирования нет, введите отступ сверху (например, 300), чтобы сдвинуть оверлей к середине экрана.
3. В разделе Fill задайте фон — сплошной цвет или изображение. По умолчанию контейнер прозрачный, и без заливки пейвол будет просвечивать сквозь оверлей.
4. Добавьте содержимое оффера. Выделив контейнер на панели Layers, нажмите + > Text > H2. Чтобы показать цену со скидкой, вставьте переменные оффера, например offer_price, в поле Content.
5. Нажмите + > Products, выберите пресет макета и перетащите его в оверлей. Выделите карточку продукта на канвасе и выберите продукт и оффер на вкладке Design.
6. Нажмите + > Buttons, выберите пресет кнопки и перетащите его в оверлей. На вкладке Interactions нажмите Add trigger > On tap > Add action, затем установите Action в значение Purchase, а Product — в ваш продукт с оффером.

3. Добавьте кнопку закрытия на оверлей

У оверлея должна быть своя кнопка закрытия. Её действие должно скрывать оверлей, а не закрывать флоу.

1. Выделите оверлей, нажмите + > Buttons > Close flow.
2. Выделите кнопку и откройте вкладку Interactions. В пресете уже настроено действие Close Flow. Нажмите на него и измените тип на Hide element. В качестве цели укажите контейнер оверлея.

4. Скройте оверлей

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

На панели Layers выберите контейнер оверлея и установите его состояние в Hide . Оверлей останется в дереве слоёв, но больше не будет отображаться на холсте.

5. Настройте кнопку закрытия

Замените стандартное действие кнопки закрытия на условное действие с ветвлением по close_tapped.

Подробнее об условных действиях см. в разделе Действия — Условные действия.

1. Выберите кнопку закрытия пейвола — ту, что на экране, а не кнопку закрытия оверлея.
2. Откройте вкладку Interactions, нажмите на предварительно настроенное действие Close Flow и измените его тип на Conditional Action.
3. В блоке if нажмите Add condition и задайте: close_tapped Equals False.
4. В блоке then добавьте два действия:
   • Set Variable: установите close_tapped в True.

• Show element: Укажите цель — оверлей с предложением.

  

5. В блоке else добавьте действие Close Flow.

   

Теперь первое нажатие на закрытие показывает предложение. После того как пользователь отклоняет его, повторное нажатие на закрытие соответствует ветке else и закрывает флоу.

Следующие шаги

• Сохраните и опубликуйте флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.