---
title: "Показ предложения при нажатии кнопки закрытия"
description: "Перехватите первое нажатие кнопки закрытия, чтобы показать финальное предложение перед уходом пользователя с пейвола."
---

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

Логика использует одну пользовательскую булеву переменную и одно условное действие:
- `close_tapped` начинается как `False`.
- Первое нажатие на закрытие показывает оверлей с предложением и устанавливает `close_tapped` в `True`.
- Любое последующее нажатие на закрытие закрывает флоу.
## Перед началом \{#before-you-start\}

- Создайте экран пейвола с кнопкой закрытия — например, следуйте гайду [Создание базового экрана пейвола](basic-paywall-screen).
- [Создайте продукт](create-product) с [оффером](offers) для продвижения в оверлее.
## 1. Создайте переменную \{#1-create-the-variable\}

Подробнее о пользовательских переменных см. в разделе [Переменные](onboarding-variables#custom-variables).

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

## 2. Создайте оверлей предложения \{#2-build-the-offer-overlay\}

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

## 3. Добавьте кнопку закрытия на оверлей \{#3-add-the-dismiss-button-to-the-overlay\}

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

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

## 4. Скройте оверлей \{#hide-the-overlay\}

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

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

## 5. Настройте кнопку закрытия \{#5-set-up-the-close-button\}

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

Подробнее об условных действиях см. в разделе [Действия — Условные действия](onboarding-actions#conditional-actions).
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** и закрывает флоу.
## Следующие шаги \{#next-steps\}

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