Đâ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 nó ở cuối một flow gồm 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 ở chân trang để 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 các style tái sử dụng

Các style 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 cho mọi màn hình chỉ với một cú nhấp chuột. Mỗi flow mới đều đi kèm bộ text style 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 style cho các màu thương hiệu bạn sẽ dùng xuyên suốt màn hình.

Xem hướng dẫn đầy đủ tại Định dạng phần tử — Reusable styles.

Để thiết lập các style:

1. Trong bảng bên trái, mở bảng Styles .
2. Trên 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 chưa đáp ứng được nhu cầu của bạn.

3. Trên tab Colors, nhấp Create style và thêm các màu bạn muốn tái sử dụng trong 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ò là 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 sau phân bổ đúng cách.

Xem danh sách đầy đủ các thuộc tính màn hình tại Màn hình và layer — Cài đặt màn hình.

Để 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 rìa màn hình.
3. Trong Layout, đặt hướng thành Vertical và phân bổ thành Space evenly.

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

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 nó với nút đóng

H1 nằm cạnh nút đóng ở đầu màn hình. Để căn chỉnh chúng theo chiều ngang, hãy bọc cả hai trong một horizontal container.

Để thêm tiêu đề:

1. Nhấp + > Text > H1.
2. Khi H1 được chọn, mở tab Design trong bảng bên phải và chỉnh sửa văn bản 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 horizontal container mới.

Để 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 nằm gọn trên cùng một hàng.
2. Khi horizontal container được chọn, đặt căn chỉnh và phân bổ trong bảng bên phải để các phần tử thẳng hàng đúng cách.

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ì có trong gói đăng ký khi mở khóa. Mỗi hàng có một biểu tượng, tên tính năng và mô tả ngắn.

Xem đầy đủ các preset danh sách tại Phần tử — List.

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

1. Nhấp + > List và chọn một list preset. Icon List là lựa chọn phổ biến nhất cho paywall.
2. Khi mỗi hàng được chọn, chỉnh sửa 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ý để người dùng 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ẻ được tự động đánh dấu là mặc định.

Để biết thêm về quản lý sản phẩm, xem Thiết lập giao dịch mua.

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

1. Nhấp + > Products và chọn một layout 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ị tất cả sản phẩm đã được cấu hình trong Adapty Dashboard.
3. Để thay đổi sản phẩm được 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 nhãn giảm giá, mở rộng thẻ sản phẩm trong bảng Layers, chọn layer nhãn, và chỉnh sửa văn bản trong trường Content. Ẩn nhãn 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 nhãn.

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

Nút mua hàng bắt đầu in-app purchase cho sản phẩm mà người dùng đã chọn. Biến products.selectedProduct luôn phân giải thành sản phẩm đang được chọn trên màn hình.

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

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

9. Thêm các liên kết chân trang

Chân trang 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 (theo yêu cầu của các cửa hàng ứng dụng) và một nút để khôi phục giao dịch trước đó.

Để thêm các liên kết chân trang:

1. Nhấp + > Buttons > Links. Thao tác này thêm một hàng với 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ấp vào hành động và nhập URL đích.
3. Lặp lại 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ó đã đượ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.