Đây là mẫu paywall phổ biến nhất. Bạn có thể dùng nó như một màn hình độc lập, hoặc đặt ở cuối một flow nhiều màn hình. Một màn hình paywall tiêu chuẩn bao gồm tiêu đề, mô tả giá trị, danh sách tính năng, danh sách sản phẩm, nút mua hàng và các liên kết ở phần cuối để khôi phục giao dịch, điều khoản sử dụng và chính sách bảo mật.

Trước khi bắt đầu

• Tạo sản phẩm trong Adapty Dashboard.
• Kết nối Adapty với App Store và Google Play.

1. Thiết lập styles có thể tái sử dụng

Styles có thể tái sử dụng cho phép bạn áp dụng cùng một kiểu chữ và màu sắc trên mọi màn hình chỉ với một cú nhấp. Mỗi flow mới đều có sẵn một bộ text styles mặc định (H1, Body, Button Label, v.v.) — hãy điều chỉnh chúng cho phù hợp với thiết kế của bạn trước khi bắt đầu thêm các phần tử. Thêm color styles cho các màu thương hiệu mà bạn sẽ dùng xuyên suốt màn hình.

Để xem hướng dẫn đầy đủ, tham khảo Styles và giao diện — Styles có thể tái sử dụng.

Để thiết lập styles:

1. Trong bảng bên trái, mở bảng Styles .
2. Trong tab Text, nhấp vào một style hiện có để chỉnh sửa font, độ đậm, kích thước và màu sắc. Chỉ thêm style mới nếu các style mặc định không đáp ứng được nhu cầu của bạn.

3. Trong tab Colors, nhấp vào Create style và thêm các màu bạn định tái sử dụng trên màn hình.

2. Thiết lập bố cục màn hình

Bản thân màn hình đóng vai trò như một container chứa mọi thứ bạn thêm vào. Hãy cấu hình bố cục, nền và padding trước để các phần tử bạn thêm vào sau này được phân bổ đúng cách.

Để xem danh sách đầy đủ các thuộc tính màn hình, xem Screens and layers — Screen settings.

Để cấu hình màn hình:

1. Nhấp vào vùng trống trên canvas để chọn màn hình. Bảng bên phải sẽ chuyển sang cài đặt màn hình.
2. Trong System UI, tắt Safe area để nội dung kéo dài đến mép màn hình.
3. Trong Layout, đặt hướng thành Vertical và phân phối thành Space evenly.

4. Trong mục Fill, chọn loại nền — màu đơn, gradient, hoặc hình ảnh. Ví dụ này dùng Gradient với hai điểm màu.

3. Thêm nút đóng

Nút đóng giúp người dùng thoát khỏi paywall. Preset Close đã được cấu hình sẵn — không cần thiết lập thêm hành động.

1. Trên canvas, nhấp +.
2. Chọn Buttons > Close.

4. Thêm tiêu đề và ghép với nút đóng

H1 nằm cạnh nút đóng ở phía trên màn hình. Để căn chúng theo chiều ngang, hãy bọc cả hai vào một container ngang.

Để thêm tiêu đề:

1. Nhấn + > Text > H1.
2. Chọn H1, mở tab Design ở bảng bên phải và chỉnh nội dung trong trường Content.

Để nhóm tiêu đề với nút đóng:

1. Trong bảng Layers, nhấp vào menu ba chấm trên layer nút đóng và chọn Wrap > Wrap in Horizontal Container.

2. Kéo layer H1 vào container nằm ngang vừa tạo.

Để căn chỉnh hai phần tử:

1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 sao cho chúng hiển thị thoải mái trên cùng một dòng.
2. Khi container ngang được chọn, thiết lập căn chỉnh và phân phối trong bảng bên phải để các phần tử hiển thị đúng vị trí.

5. Thêm mô tả giá trị

Một dòng body ngắn bên dưới tiêu đề giải thích những gì người dùng nhận được từ gói đăng ký.

1. Nhấp + > Text > Body.
2. Khi phần tử body được chọn, chỉnh sửa văn bản trong trường Content trên tab Design.

6. Thêm danh sách tính năng

Danh sách tính năng làm nổi bật những gì người dùng nhận được khi mở khóa gói đăng ký. Mỗi hàng gồm một biểu tượng, tiêu đề tính năng và mô tả ngắn.

Xem toàn bộ các preset danh sách tại Elements — List.

Để thêm danh sách tính năng:

1. Nhấn + > List và chọn một preset danh sách. Icon List là lựa chọn phổ biến nhất cho paywall.
2. Chọn từng hàng, sau đó chỉnh tiêu đề và mô tả trong trường Content.
3. Để thêm hoặc xóa hàng, chọn danh sách và dùng các điều khiển hàng trong bảng Layers.

7. Thêm danh sách sản phẩm

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký mà người dùng có thể lựa chọn. Phần tử Products hiển thị một thẻ cho mỗi sản phẩm được gán cho màn hình, và một thẻ sẽ tự động được đánh dấu là mặc định.

Để biết thêm về cách quản lý sản phẩm, xem Thiết lập mua hàng.

Để thêm và cấu hình sản phẩm:

1. Nhấp vào + > Products và chọn một bố cục preset. Vertical List là phổ biến nhất.
2. Chọn từng thẻ sản phẩm trên canvas và chọn một sản phẩm từ dropdown trong tab Design. Dropdown hiển thị mọi sản phẩm đã được cấu hình trong Adapty Dashboard.
3. Để thay đổi lựa chọn mặc định, chọn thẻ bạn muốn và bật Set as default product trong tab Design.
4. Để tùy chỉnh badge giảm giá, mở rộng thẻ sản phẩm trong bảng Layers, chọn layer badge và chỉnh sửa văn bản của nó trong trường Content. Ẩn badge trên các thẻ khác bằng cách bật/tắt biểu tượng mắt bên cạnh mỗi layer badge.

8. Thêm nút mua hàng

Nút mua hàng sẽ khởi động in-app purchase cho sản phẩm mà người dùng đã chọn. Biến products.selectedProduct luôn trỏ đến sản phẩm đang được chọn trên màn hình.

Để thêm nút mua hàng:

1. Nhấn + > Buttons và chọn một kiểu nút.
2. Khi nút được chọn, mở tab Interactions ở bảng bên phải.
3. Nhấn Add trigger > On tap, sau đó nhấn Add action.
4. Đặt Action thành Purchase và Product thành products.selectedProduct.

9. Thêm liên kết footer

Footer chứa các liên kết đến điều khoản sử dụng và chính sách bảo mật (bắt buộc theo yêu cầu của cửa hàng) và một nút để khôi phục các lần mua trước đó.

Để thêm liên kết footer:

1. Nhấn + > Buttons > Links. Thao tác này sẽ thêm một hàng gồm Restore Purchases, Terms of Use và Privacy Policy.
2. Trong bảng Layers, chọn nút Terms of Use. Mở tab Interactions — hành động Open URL đã được gắn sẵn. Nhấn vào hành động đó và nhập URL đích.
3. Lặp lại tương tự với nút Privacy Policy bằng URL chính sách bảo mật của bạn.
4. Giữ nguyên nút Restore Purchases. Hành động của nút này đã được cấu hình sẵn.

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.