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

• 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.
• Tạo một sản phẩm kèm ưu đãi để quảng bá trong overlay.

1. Tạo biến

Để tìm hiểu thêm về biến tùy chỉnh, xem Biến.

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

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 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

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.

4. Ẩn 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 . 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

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.

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

• Lưu và xuất bản flow của bạn.
• Thêm flow vào một placement để bắt đầu hiển thị cho người dùng.