ÿÿ Tạo màn hình paywall cÆ¡ bản | Flow Builder | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Tạo màn hình paywall cơ bản

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

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.
Editing a default text style in the Styles panel
  1. 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.
Color styles in the Styles panel

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.
Cài đặt màn hình với Safe area tắt và bố cục Vertical / Space evenly
  1. 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.
Cấu hình fill gradient trong cài đặt màn hình

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.
Thêm nút Close vào màn hình

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.
H1 added to the screen with the Content field on the right

Äể 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.
Three-dot context menu on the close button layer showing Wrap in Horizontal Container
  1. Kéo layer H1 vào container nằm ngang vừa tạo.
Dragging the H1 layer into the new horizontal container

Äể 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í.
Nút đóng và H1 được căn chỉnh trong container ngang

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.
Body text được thêm bên dÆ°á»›i hàng tiêu Ä‘á»

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.
Danh sách icon với ba hàng tính năng

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.
Thêm phần tử Sản phẩm và cấu hình thẻ sản phẩm

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.
Cấu hình hành động Mua hàng trên nút mua hàng

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.

Nếu vị trí của bất kỳ phần tá»­ nào có vẻ quá cao hoặc quá thấp, hoặc nếu bạn muốn thêm khoảng cách ở bất kỳ đâu, hãy Ä‘iá»u chỉnh margin và padding của phần tá»­ đó.

Liên kết chân trang được cấu hình với hành động Mở URL

Các bước tiếp theo

ÿÿÿÿ