Xây dựng paywall với nút bật/tắt dùng thử

Nút bật/tắt dùng thử cho phép bạn chuyển đổi paywall giữa các sản phẩm có dùng thử miễn phí và các sản phẩm không có. Nhưng bản thân nút bật/tắt chỉ là một công tắc: bật hoặc tắt. Bạn tự viết các quy tắc để hiển thị đúng thẻ sản phẩm, và các quy tắc để thay đổi sản phẩm nào đang được chọn.

Công thức này hướng dẫn bạn cách thiết lập các quy tắc và xây dựng một paywall hoạt động hoàn chỉnh với tính năng bật/tắt toggle.

Trước khi bắt đầu

• Xây dựng màn hình paywall — ví dụ, làm theo công thức Tạo màn hình paywall cơ bản.
• Tạo sản phẩm và thêm ưu đãi dùng thử vào sản phẩm.

1. Thêm các thẻ sản phẩm

1. Nhấp vào menu Add Element + > Paywall & Commerce > Products và chọn một preset.
2. Chọn một thẻ — trên canvas hoặc trong bảng Layers. Gán một sản phẩm cho thẻ đó, và để trống Select offer (optional).
3. Lặp lại cho từng gói bạn bán — một thẻ cho mỗi gói, không có trial.
4. Nhân đôi mỗi thẻ. Trên mỗi bản sao, chọn ưu đãi trial từ Select offer (optional).

Mỗi gói giờ có hai thẻ trỏ vào cùng một sản phẩm — một thẻ có ưu đãi, và một thẻ không có.

2. Thêm nút bật/tắt dùng thử

1. Nhấn + > Paywall & Commerce > Trial Toggle.

   

2. Đảm bảo nút bật/tắt thuộc một nhóm có thể chọn đúng loại. Nhấn vào vùng trống trên canvas để mở Screen settings. Trong Selectable groups, mở trial_toggle, đặt Group Type thành Toggle, rồi nhấn Save. Hộp thoại hiển thị biến chúng ta sẽ dùng để xác định nút bật/tắt có đang bật không: trial_toggle.isActive.

3. Chỉnh sửa nhãn của toggle.

Để toggle ở trạng thái tắt theo mặc định. Toggle dùng thử được chọn sẵn có thể bị App Store từ chối vì đây là dark pattern — xem Toggles.

3. Hiển thị đúng card cho từng trạng thái toggle

Trong tab Design của từng card, dưới mục Visibility, chọn Conditional và thiết lập điều kiện:

4. Chọn thẻ hiển thị khi toggle thay đổi

Các thẻ giờ đã thay đổi theo toggle, nhưng sản phẩm được chọn thì không. Một thẻ bị ẩn vẫn ở trạng thái được chọn, và hành động Purchase vẫn nhắm vào nó — vì vậy người dùng bật thử nghiệm vẫn có thể bị tính phí.

Thêm một Conditional Action vào toggle để reset lựa chọn về thẻ đang hiển thị mỗi khi nhấn.

1. Trong bảng Layers, chọn container Trial toggle.

2. Mở tab Interactions, thêm trigger On tap và một Conditional Action:

   Block	What to configure
   if	trial_toggle.isActive Equals True
   then	Select Product, pointing at a card with the trial
   else	Select Product, pointing at the same product without the trial

5. Cập nhật nhãn nút

Lời kêu gọi hành động nên hiển thị khác đi khi bản dùng thử đang được kích hoạt.

1. Chọn phần tử văn bản của nút.

2. Trong tab Design, bên dưới Content, chọn Conditional và nhấp Edit conditions.

3. Điền vào các khối:

   Khối	Nội dung cần cấu hình
   if	trial_toggle.isActive Equals True
   then	Nhãn dùng thử, ví dụ: Start your free trial
   else	Nhãn tiêu chuẩn, ví dụ: Purchase

Để tìm hiểu thêm về văn bản có điều kiện, xem Thêm văn bản có điều kiện.