---
title: "Hiển thị ưu đãi khi người dùng nhấn đóng"
description: "Chặn lần nhấn đóng đầu tiên để hiển thị ưu đãi cơ hội cuối cùng trước khi người dùng rời khỏi paywall."
---

Khi người dùng nhấn nút đóng, họ sắp rời đi mà không thanh toán. Recipe này chặn lần nhấn đóng đầu tiên: thay vì đóng paywall, nó hiển thị một overlay ưu đãi cơ hội cuối cùng. Khi người dùng tắt ưu đãi đó, nút đóng hoạt động bình thường và đóng flow.

Logic này chỉ cần một biến Boolean tùy chỉnh và một hành động có điều kiện:
- `close_tapped` bắt đầu là `False`.
- Lần đầu tiên nhấn đóng sẽ hiển thị overlay ưu đãi và đặt `close_tapped` thành `True`.
- Bất kỳ lần nhấn đóng nào sau đó sẽ đóng flow.
## Trước khi bắt đầu \{#before-you-start\}

- Xây dựng màn hình paywall có nút đóng — ví dụ, làm theo hướng dẫn [Tạo màn hình paywall cơ bản](basic-paywall-screen).
- [Tạo một sản phẩm](create-product) kèm [ưu đãi](offers) để quảng bá trong overlay.
## 1. Tạo biến \{#create-the-variable\}

Để tìm hiểu thêm về biến tùy chỉnh, xem [Biến](onboarding-variables#custom-variables).

1. Trong bảng bên trái, nhấp vào biểu tượng **{ }** để mở **Variables**.
2. Trên tab **Custom**, nhấp **+**.
3. Đặt tên biến là `close_tapped` và đặt **Value Type** thành **Boolean**. Giữ **Initial Value** là **False**.
4. Nhấp **Create variable**.

## 2. Xây dựng lớp phủ ưu đãi \{#2-build-the-offer-overlay\}

Lớp phủ là một container ghim vào màn hình thiết bị và nằm trên paywall. Hãy để nó hiển thị trong lúc xây dựng — các phần tử ẩn không thể chỉnh sửa được, vì vậy bạn sẽ ẩn nó ở bước 4, sau khi đã đặt nội dung vào đúng chỗ.
1. Nhấn **+** > **Layout** > **Vertical Container**.
2. Với container đã được chọn, mở tab **Design** và đặt **Position** thành **Fixed**. Đặt căn chỉnh ngang thành **Left & Right** và căn chỉnh dọc thành **Top**. Vì không có tùy chọn căn giữa theo chiều dọc, hãy nhập giá trị offset từ trên xuống (ví dụ: `300`) để đưa overlay về giữa màn hình.
3. Trong mục **Fill**, đặt nền — màu đơn sắc hoặc hình ảnh. Container mặc định trong suốt, vì vậy nếu không có fill, paywall phía dưới overlay vẫn sẽ hiển thị.
4. Thêm nội dung ưu đãi. Với container đã chọn trong panel **Layers**, nhấn **+** > **Text** > **H2**. Để hiển thị giá đã giảm, chèn [biến ưu đãi](onboarding-variables#product-variables) như `offer_price` vào trường **Content**.
5. Nhấn **+** > **Products**, chọn một preset bố cục, rồi kéo vào overlay. Chọn thẻ sản phẩm trên canvas và chọn sản phẩm cùng ưu đãi trong tab **Design**.
6. Nhấn **+** > **Buttons**, chọn một preset nút, rồi kéo vào overlay. Trong tab **Interactions**, nhấn **Add trigger** > **On tap** > **Add action**, sau đó đặt **Action** thành **Purchase** và **Product** thành sản phẩm ưu đãi của bạn.

## 3. Thêm nút đóng vào overlay \{#3-add-the-dismiss-button-to-the-overlay\}

Overlay cần có nút đóng riêng. Hành động của nút này phải ẩn overlay — không phải đóng flow.

1. Chọn overlay, nhấn **+** > **Buttons** > **Close flow**.
2. Với nút đã được chọn, mở tab **Interactions**. Preset đi kèm với hành động **Close Flow** được cấu hình sẵn. Nhấn vào hành động đó và đổi kiểu thành **Hide element**. Đặt mục tiêu là container của overlay.
:::important
Đừng để nguyên hành động **Close Flow** mặc định trên nút đóng của overlay — nó sẽ đóng toàn bộ flow thay vì ẩn overlay.
:::

## 4. Ẩn overlay \{#hide-the-overlay\}

Overlay phải luôn ẩn cho đến lần đầu người dùng nhấn nút đóng.

Trong bảng **Layers**, chọn container overlay và đặt trạng thái của nó thành **Hide** Hide. Overlay vẫn còn trong cây layer nhưng không còn hiển thị trên canvas nữa.

## 5. Thiết lập nút đóng \{#5-set-up-the-close-button\}

Thay thế hành động mặc định của nút đóng bằng một hành động có điều kiện phân nhánh dựa trên `close_tapped`.

Để tìm hiểu thêm về hành động có điều kiện, xem [Hành động — Hành động có điều kiện](onboarding-actions#conditional-actions).
1. Chọn nút đóng của paywall — nút trên màn hình, không phải nút đóng của overlay.
2. Mở tab **Interactions**, nhấp vào action **Close Flow** đã được cấu hình sẵn, và đổi loại của nó thành **Conditional Action**.
3. Trong khối **if**, nhấp **Add condition** và đặt: `close_tapped` **Equals** **False**.
4. Trong khối **then**, thêm hai action:
    - **Set Variable**: Đặt `close_tapped` thành **True**.
- **Show element**: Đặt mục tiêu là lớp phủ ưu đãi.

      
5. Trong khối **else**, thêm action **Close Flow**.

   
Bây giờ lần nhấn đóng đầu tiên sẽ hiển thị ưu đãi. Sau khi người dùng bỏ qua ưu đãi đó, nhấn đóng lần nữa sẽ khớp với nhánh **else** và đóng flow.
## Các bước tiếp theo \{#next-steps\}

- [Lưu và xuất bản flow của bạn](builder-save-publish).
- [Thêm flow vào một placement](create-placement) để bắt đầu hiển thị cho người dùng.