---
title: "Xây dựng onboarding cá nhân hóa"
description: "Hướng dẫn toàn bộ quá trình xây dựng onboarding nhiều màn hình — thiết kế màn hình, nội dung, điều hướng và phân nhánh có điều kiện — thông qua ví dụ thực tế."
---

Một flow nhiều màn hình trong Flow Builder là một chuỗi các màn hình được kết nối bằng các hành động điều hướng. Flow có thể chạy tuyến tính, hoặc phân nhánh dựa trên dữ liệu đầu vào của người dùng thu thập ở màn hình trước. Hướng dẫn này đi qua toàn bộ quy trình — tạo màn hình, xây dựng nội dung, kết nối điều hướng và thêm phân nhánh có điều kiện — sử dụng onboarding bốn màn hình làm ví dụ minh họa.

Ví dụ sử dụng:

- **Nhập tên** để lưu tên người dùng thành biến dùng cho cá nhân hóa.
- **Quiz chọn một đáp án** mà câu trả lời sẽ quyết định màn hình tiếp theo người dùng thấy.
- **Hai nhánh** với nội dung được tùy chỉnh riêng cho từng nhóm đối tượng.
- **Paywall** là màn hình cuối cùng.

Mẫu này áp dụng cho bất kỳ flow nào cá nhân hóa nội dung dựa trên dữ liệu người dùng nhập vào.

Bạn thích xem video? Hướng dẫn quickstart này đi qua cùng một quy trình từ đầu đến cuối:

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>

## Trước khi bắt đầu \{#before-you-start\}

- [Tạo sản phẩm](create-product) trong Adapty Dashboard. Flow ví dụ sử dụng hai sản phẩm — gói đăng ký Hàng năm và Hàng tháng.
- [Kết nối Adapty với App Store và Google Play](integrate-payments).

## 1. Thiết lập style dùng lại \{#1-set-up-reusable-styles\}

Style dùng lại cho phép bạn áp dụng typography và màu sắc nhất quán trên mọi màn hình chỉ với một cú nhấp. Style màu sắc có biến thể Light và Dark, để flow tự động hỗ trợ cả hai giao diện.

Để xem hướng dẫn đầy đủ, xem [Tùy chỉnh element — Style dùng lại](builder-styling#reusable-styles).

Để thiết lập style:

1. Trong bảng bên trái, mở bảng **Styles** Styles.
2. Ở tab **Colors**, nhấp **Plus Create style** và thêm các màu bạn sẽ dùng lại. Với mỗi màu, chọn giá trị Light, chuyển sang tab Dark và chọn giá trị Dark.

3. Ở tab **Text**, nhấp vào một style hiện có để chỉnh font, độ đậm và kích thước, hoặc nhấp **Plus Create style** để thêm preset tùy chỉnh.

## 2. Tạo các màn hình \{#2-create-the-screens\}

Một flow là một chuỗi các màn hình. Cấu hình màn hình đầu tiên với nền tảng chung — bố cục, nền và safe area — sau đó nhân bản nó cho các màn hình còn lại. Như vậy, mọi màn hình đều có cùng nền tảng và bạn chỉ cần thiết lập một lần.

Để tìm hiểu thêm về quản lý màn hình, xem [Màn hình và Layer — Quản lý màn hình](paywall-layout-and-products#manage-screens).

Để thiết lập các màn hình:

1. Nhấp vào vùng trống trên canvas của màn hình đầu tiên để mở cài đặt màn hình.
2. Trong **System UI**, tắt **Safe area** để nền và các element căn theo cạnh có thể kéo dài đến mép màn hình.
3. Trong **Fill**, chọn loại nền và cấu hình nó — ví dụ: **Image** Image hiển thị phía sau mọi màn hình của flow.
4. Trong **Layout**, đặt hướng thành **Vertical** Vertical và chọn cách phân bổ phù hợp với thiết kế của bạn.

5. Trong phần **Screens** của bảng bên trái, nhấp menu ba chấm Context menu trên màn hình đầu tiên và chọn **Duplicate**. Lặp lại cho đến khi có bốn màn hình — nhánh thứ hai sẽ được thêm sau bằng cách nhân bản từ nhánh đầu tiên.
6. Đổi tên mỗi màn hình theo vai trò của nó — trong ví dụ: `Welcome`, `Quiz`, `Rock path` và `Paywall`.

## 3. Xây dựng màn hình giới thiệu \{#3-build-the-introduction-screen\}

Màn hình đầu tiên thường tạo ấn tượng ban đầu — tiêu đề, danh sách tính năng và lời kêu gọi hành động dẫn vào phần còn lại của flow. Trong ví dụ, đây là màn hình Welcome.

Nhấp màn hình **Welcome** trong bảng **Screens**, sau đó thêm các element:

1. Thêm ảnh chính. Nhấp **+** > **Media** > **Image**, tải ảnh lên và điều chỉnh margin nếu cần.

2. Thêm tiêu đề: nhấp **+** > **Text**, chọn style heading từ các text style đã lưu, và chỉnh trường **Content**.

3. Thêm danh sách tính năng. Nhấp **+** > **List** > **Icon Cards**, sau đó chỉnh icon và nhãn trong mỗi card.

4. Thêm nút điều hướng chính ở phía dưới. Nút này sẽ được gán hành động ở bước điều hướng.

## 4. Xây dựng màn hình nhập liệu và quiz \{#4-build-the-input-and-quiz-screen\}

Màn hình thứ hai thu thập dữ liệu từ người dùng. Trong ví dụ, nó hỏi tên và một câu trả lời chọn một quyết định người dùng sẽ thấy nhánh nào tiếp theo.

Để tìm hiểu thêm về nhập liệu và quiz, xem [Nhập liệu và form](builder-inputs-and-forms) và [Khảo sát và quiz](onboarding-quizzes).

Nhấp màn hình **Quiz** trong bảng **Screens**, sau đó thêm các element. Mỗi nhóm trên màn hình — intro, câu hỏi + nhập liệu, câu hỏi + quiz — nằm trong Vertical Container riêng để các element liên quan gắn kết trực quan.

1. Thêm tiêu đề và nội dung intro. Nhấp **+** > **Text** > **H1** cho tiêu đề và **+** > **Text** > **Body** cho phần nội dung hỗ trợ.
2. Nhóm phần intro. Nhấp **+** > **Layout** > **Vertical Container**, kéo container mới lên đầu cây layer, sau đó kéo H1 và body vào bên trong.

3. Thêm câu hỏi đầu tiên và nhập liệu. Nhấp **+** > **Text** cho caption câu hỏi, sau đó nhấp **+** > **Inputs** > **Text** cho trường nhập.
4. Đặt **Element ID** của trường nhập trong tab **Design** — trong ví dụ là `name`. Điều này giúp giá trị được lưu thành biến mà các màn hình khác có thể tham chiếu.

5. Nhóm caption và trường nhập trong Vertical Container tương tự như phần intro.
6. Thêm câu hỏi thứ hai và quiz. Nhấp **+** > **Text** cho caption, sau đó nhấp **+** > **Quiz** và chọn preset bố cục như Icon Options. Cấu hình các lựa chọn — trong ví dụ là `Rock` và `Hip hop`.
7. Nhóm caption và quiz trong Vertical Container tương tự.
8. Đặt ID cho các lựa chọn. Chọn từng lựa chọn quiz, mở tab **Interactions**, và đặt **Element ID** của nó. Các ID này được tham chiếu trong điều hướng có điều kiện sau này.

9. Chuyển quiz sang chọn một: nhấp vùng trống trên canvas để mở **Screen settings**, kéo xuống **Selectable Groups**, nhấp tên nhóm quiz, và đặt loại thành **Single choice**.

10. Thêm nút chính ở phía dưới — đây là nút Next kích hoạt phân nhánh.

## 5. Xây dựng nhánh đầu tiên \{#5-build-the-first-branching-path\}

Mỗi màn hình nhánh tùy chỉnh nội dung cho một nhóm đối tượng. Trong ví dụ, nhánh Rock có nội dung tập trung vào rock — playlist, nghệ sĩ và gợi ý.

Để tìm hiểu thêm về biến, xem [Biến](onboarding-variables).

Để xây dựng màn hình:

1. Trong bảng **Screens**, nhấp màn hình **Rock path**.
2. Thêm tiêu đề. Đặt con trỏ vào trường **Content** ở vị trí muốn cá nhân hóa, nhấp icon biến Variable icon, và mở tab **Elements**. Chọn màn hình chứa trường nhập — trong ví dụ là **Quiz** — sau đó chọn biến giá trị của trường nhập. Bộ chọn sẽ tự động phân giải thành `<elementId>.value` — trong ví dụ là `name.value`. Khi chạy, tiêu đề sẽ hiển thị nội dung người dùng đã nhập.

3. Thêm nội dung body dưới dạng các element text bổ sung, được điều chỉnh cho nhóm đối tượng của nhánh này.
4. Thêm nút chính ở phía dưới.

## 6. Xây dựng nhánh thứ hai \{#6-build-the-second-branching-path\}

Các màn hình nhánh thường có cùng bố cục — chỉ thay đổi nội dung. Nhân bản màn hình nhánh đầu tiên và cập nhật nội dung.

Để nhân bản và cập nhật:

1. Trong bảng **Screens**, chọn màn hình nhánh đầu tiên và nhấn ⌘D / Ctrl+D để nhân bản. Bản sao xuất hiện ở cuối danh sách màn hình.
2. Đổi tên bản sao — trong ví dụ là `Hip hop path` — và kéo nó đến đúng vị trí trong danh sách màn hình, để nó nằm cạnh màn hình gốc.

3. Cập nhật nội dung body cho nhóm đối tượng kia. Tiêu đề cá nhân hóa vẫn hoạt động — biến được giữ nguyên.

## 7. Xây dựng paywall \{#7-build-the-paywall\}

Màn hình cuối cùng là paywall — nơi người dùng có thể đăng ký. Để xem hướng dẫn chi tiết hơn về cơ chế paywall, xem [Tạo màn hình paywall cơ bản](basic-paywall-screen). Phiên bản dưới đây tóm tắt hướng dẫn đó.

Nhấp màn hình **Paywall** trong bảng **Screens**, sau đó thêm các element:

1. Thêm **Horizontal Container** ở trên cùng và thêm nút **Close** vào bên trong. Preset Close đã được cấu hình sẵn.
2. Thêm ảnh chính, tiêu đề (dùng cùng biến cá nhân hóa như trên các màn hình nhánh), và subheading làm nội dung hỗ trợ.

3. Thêm sản phẩm: nhấp **+** > **Products** và chọn **Vertical List**. Gán từng card một sản phẩm từ dropdown trong tab **Design**.
4. Nhấp card của sản phẩm mặc định và bật **Set as default product** để nó được chọn sẵn khi màn hình tải.

5. Thêm nút mua. Nhấp **+** > **Buttons** và chọn preset. Trong tab **Interactions**, nhấp **Add trigger** > **On tap** > **Add action** và đặt **Action** thành **Purchase** với **Product** là `products.selectedProduct`.

6. Thêm template **Button** > **Links** vào màn hình. Nó bao gồm ba link ở footer: Restore Purchases, Terms of Use và Privacy Policy.

    Link Restore đã được cấu hình sẵn. Để cấu hình các link còn lại, chọn element nút, mở tab **Interactions**, và đặt đích cho hành động **Open URL**.

## 8. Kết nối điều hướng giữa các màn hình \{#8-wire-navigation-between-the-screens\}

Các màn hình không tự động kết nối với nhau. Dùng trigger **On tap** và hành động **Navigate to** để kết nối nút chính của mỗi màn hình với màn hình tiếp theo. Màn hình phân nhánh dựa trên dữ liệu người dùng sẽ dùng **Conditional action** thay thế.

Để tìm hiểu thêm về điều hướng và hành động có điều kiện, xem [Điều hướng và tương tác](onboarding-navigation-branching) và [Hành động — Hành động có điều kiện](onboarding-actions#conditional-actions).

Để kết nối điều hướng cho flow ví dụ:

1. **Điều hướng tĩnh từ màn hình giới thiệu.** Mở màn hình Welcome, chọn nút chính, và chuyển sang tab **Interactions**. Nhấp **Add trigger** > **On tap** > **Add action**, đặt **Action** thành **Navigate to**, và chọn màn hình tiếp theo — trong ví dụ là màn hình Quiz.

2. **Điều hướng có điều kiện từ quiz.** Mở màn hình Quiz, chọn nút Next, và thêm trigger **On tap** với **Conditional action**. Thiết lập quy tắc IF/ELSE:
   - Trong bộ chọn biến, mở tab **Elements**, chọn màn hình **Quiz**, và chọn `quiz.selectedOptionId`.
   - Dùng toán tử **Equals** và so sánh với ID của một trong các lựa chọn — trong ví dụ là lựa chọn Rock.
   - **IF** điều kiện khớp, kích hoạt **Navigate to** và chọn màn hình nhánh đầu tiên.
   - **ELSE**, kích hoạt **Navigate to** và chọn màn hình nhánh thứ hai.

3. **Điều hướng tĩnh từ mỗi nhánh đến paywall.** Lặp lại mẫu từ bước 1 trên mỗi màn hình nhánh, với paywall là đích đến.

## Các bước tiếp theo \{#next-steps\}

- [Lưu và xuất bản flow](builder-save-publish).
- [Thêm flow vào placement](create-placement) để bắt đầu hiển thị cho người dùng.
- Để có flow riêng cho từng đối tượng (thay vì phân nhánh trong flow), hãy tạo phân khúc đối tượng và gán các flow khác nhau trên trang Placement.