---
title: "Biến (Variables)"
description: "Sử dụng biến để hiển thị dữ liệu động trong flow của bạn."
---

Biến cho phép bạn hiển thị nội dung động trong flow — giá sản phẩm, thông tin ưu đãi, và các dữ liệu khác cập nhật theo ngữ cảnh của từng người dùng. Dùng chúng để kiểm soát khả năng hiển thị của phần tử và cá nhân hóa nội dung màn hình.

Để mở bảng biến, nhấn vào biểu tượng **{ }** ở bảng bên trái. Bảng có ba tab:

- **[Custom](#custom-variables)**: Biến bạn tự tạo và quản lý.
- **[Product](#product-variables)**: Biến tích hợp sẵn, tự động lấy dữ liệu sản phẩm và ưu đãi đã được bản địa hóa từ cửa hàng.
- **[Element](#element-variables)**: Biến gắn với trạng thái của các phần tử trên canvas.

## Biến tùy chỉnh (Custom variables) \{#custom-variables\}

### Tạo biến tùy chỉnh \{#create-a-custom-variable\}

1. Trong bảng biến, nhấn **+**.
2. Nhập tên cho biến.
3. Chọn kiểu dữ liệu: String, Number, hoặc Boolean.
4. Đặt giá trị khởi tạo. Đây là giá trị biến sẽ giữ khi flow bắt đầu.
5. Nhấn **Create variable**.

:::tip
Dùng dấu chấm trong tên để nhóm các biến liên quan — ví dụ: `user.score` hoặc `user.goal`.
:::

### Cập nhật biến thông qua tương tác \{#update-a-variable-via-an-interaction\}

:::link
Xem bài viết [Actions](onboarding-actions) để biết thêm chi tiết.
:::

Bạn có thể cập nhật giá trị biến trong lúc chạy bằng cách thêm hành động **Set up variables** vào bất kỳ phần tử nào.

1. Chọn một phần tử trên canvas.
2. Trong tab **Interactions**, nhấn **Add trigger**.
3. Chọn **On tap** rồi nhấn **Add action**. Từ dropdown **Action type**, chọn **Set up variables**.
4. Nhấn **Add variable**. Chọn biến và đặt giá trị mới.

:::tip
Ví dụ, bạn có thể gán giá trị khác nhau cho `user.goal` tùy theo câu trả lời bài kiểm tra mà người dùng chọn, rồi dùng biến đó để điều hướng họ đến màn hình khác nhau.
:::

## Biến sản phẩm (Product variables) \{#product-variables\}

Biến sản phẩm tự động lấy dữ liệu đã bản địa hóa trực tiếp từ các cửa hàng ứng dụng. Dùng chúng trong các trường văn bản để hiển thị giá, tiêu đề và thông tin ưu đãi đã được bản địa hóa, hoặc trong các điều kiện để hiện/ẩn nội dung dựa trên điều kiện đủ điều kiện nhận ưu đãi của người dùng.

| Biến | Mô tả | Ví dụ |
| :--- | :--- | :--- |
| `prod_title` | Tiêu đề sản phẩm đã bản địa hóa | Premium Subscription |
| `prod_price` | Giá đã bản địa hóa cho một chu kỳ thanh toán | $9.99 |
| `prod_price_per_day` | Giá gói đăng ký chia cho số ngày trong chu kỳ thanh toán. Để trống nếu không phải gói đăng ký. | $0.33 |
| `prod_price_per_week` | Giá gói đăng ký chia cho số tuần trong chu kỳ thanh toán. Để trống nếu không phải gói đăng ký. | $2.33 |
| `prod_price_per_month` | Giá gói đăng ký quy đổi theo tháng. Để trống nếu không phải gói đăng ký. | $9.99 |
| `prod_price_per_year` | Giá gói đăng ký quy đổi theo năm. Để trống nếu không phải gói đăng ký. | $119.88 |
| `offer_price` | Giá đã bản địa hóa của ưu đãi giới thiệu hoặc ưu đãi. Để trống nếu người dùng không đủ điều kiện nhận bất kỳ ưu đãi nào. | $0.99 |
| `offer_billing_period` | Chu kỳ thanh toán đã bản địa hóa của ưu đãi. Giống `offer_full_duration` đối với ưu đãi dùng thử miễn phí và ưu đãi trả trước. Để trống nếu người dùng không đủ điều kiện. | 1 week |
| `offer_full_duration` | Toàn bộ thời hạn đã bản địa hóa của ưu đãi. Để trống nếu người dùng không đủ điều kiện. | 1 month |
| `is_free_trial` | Trả về `true` nếu người dùng đủ điều kiện nhận ưu đãi dùng thử miễn phí. | true |
| `is_pay_up_front` | Trả về `true` nếu người dùng đủ điều kiện nhận ưu đãi trả trước. | true |
| `is_pay_as_you_go` | Trả về `true` nếu người dùng đủ điều kiện nhận ưu đãi trả theo kỳ. | true |

:::tip
Dùng `is_free_trial`, `is_pay_up_front` và `is_pay_as_you_go` với tính năng hiển thị có điều kiện để hiện hoặc ẩn phần tử dựa trên ưu đãi mà người dùng đủ điều kiện nhận. Ví dụ, chỉ hiển thị dòng thời gian dùng thử miễn phí khi `is_free_trial` là `true`.
:::

Giá trị của biến ưu đãi phụ thuộc vào loại ưu đãi mà người dùng đủ điều kiện nhận. Để minh họa, hãy lấy một gói đăng ký hàng tuần tên "Premium Subscription" với giá $5, có ba ưu đãi khả dụng:

- **Pay As You Go**: 3 tuần đầu với giá $3 (tính theo tuần), sau đó $5/tuần.
- **Pay Up Front**: 3 tuần đầu với giá $8 (tính một lần ngay lập tức), sau đó $5/tuần.
- **Free Trial**: Tuần đầu miễn phí, sau đó $5/tuần.

Trong ví dụ này, `prod_title` trả về "Premium Subscription" và `prod_price` trả về $5. Giá trị của biến ưu đãi phụ thuộc vào ưu đãi mà người dùng đủ điều kiện nhận:

| Biến | Pay As You Go | Pay Upfront | Free Trial |
| :--- | :--- | :--- | :--- |
| `offer_price` | $3 | $8 | $0 |
| `offer_billing_period` | 1 week | 3 weeks | 1 week |
| `offer_full_duration` | 3 weeks | 3 weeks | 1 week |

Với ưu đãi Pay Upfront và Free Trial, `offer_billing_period` và `offer_full_duration` trả về cùng một giá trị. Với Pay As You Go, hai giá trị này khác nhau vì chu kỳ thanh toán là một tuần nhưng tổng thời hạn là ba tuần.

:::note
Để tìm hiểu thêm về ưu đãi và cách cấu hình, xem [Offers](offers).
:::

## Biến phần tử (Element variables) \{#element-variables\}

Biến phần tử ghi lại lựa chọn của người dùng — những gì họ đã chọn trong bài kiểm tra, tab nào họ đang xem, và nút bật/tắt dùng thử có đang bật không.

Kiểu biến phần tử phụ thuộc vào nhóm:
- **Single choice**: Bài kiểm tra chọn một đáp án và tab:
    - `selected_id`: ID phần tử để dùng trong điều kiện
    - `selected_title`: Tiêu đề phần tử để dùng trong văn bản động
- **Multi-choice**: Bài kiểm tra chọn nhiều đáp án:
    - `selected_ids`: Các ID phần tử để dùng trong điều kiện
    - `selected_titles`: Các tiêu đề phần tử để dùng trong văn bản động
- **Toggle**: Nút bật/tắt dùng thử:
    - `is_selected`: Giá trị Boolean

Các trường hợp sử dụng phổ biến bao gồm:
- Hiển thị nội dung khác nhau tùy theo nút bật/tắt dùng thử có đang bật hay không.
- [Điều hướng người dùng đến các màn hình khác nhau](onboarding-navigation-branching) dựa trên câu trả lời bài kiểm tra của họ

## Dùng biến trong văn bản \{#use-variables-in-text\}

Để chèn biến vào phần tử văn bản:

1. Chọn một phần tử văn bản trên canvas.
2. Trong tab **Design**, tìm trường **Content** và nhập văn bản của bạn.
3. Nhấn vào biểu tượng **{ }** trong trường đó.
4. Chọn biến từ danh sách.

:::tip
Bạn cũng có thể dùng biến trong các phần tử khác:
- Dùng biến trong liên kết và cảnh báo để tạo nội dung động
- Tạo điều kiện động dựa trên biến. Ví dụ, điều kiện có thể là `if experience.current > experience.target, navigate to...`
:::

### Định dạng biến \{#style-variables\}

Bạn không thể áp dụng định dạng văn bản phong phú cho một biến riêng lẻ. Việc chọn biến trong trường **Content** và áp dụng in đậm, in nghiêng, gạch chân, gạch ngang, hoặc thay đổi màu sắc sẽ không có hiệu lực.

Cài đặt văn bản phong phú chỉ áp dụng cho toàn bộ khối văn bản. Để định dạng văn bản, dùng phần **Typography** trong tab **Design**, hoặc áp dụng [kiểu văn bản](onboarding-text#set-up-text-styles) đã lưu.

### Tái sử dụng nội dung trên nhiều màn hình \{#reuse-content-across-screens\}

Một số nội dung lặp lại trong flow của bạn — nhãn nút như "Continue", lời kêu gọi hành động thường xuyên, hoặc một tuyên bố miễn trách hiển thị trên nhiều màn hình. Điều tương tự áp dụng cho văn bản dài hơn, chẳng hạn như mô tả tính năng được tái sử dụng trên nhiều màn hình. Thay vì nhập nội dung này vào từng phần tử, hãy lưu vào một biến tùy chỉnh. Điều này hữu ích khi bạn điều hướng người dùng khác nhau đến các màn hình khác nhau nhưng muốn cách diễn đạt nhất quán trên tất cả.

1. [Tạo một biến tùy chỉnh](#create-a-custom-variable) kiểu String và đặt giá trị khởi tạo là văn bản bạn muốn tái sử dụng. Ví dụ, đặt tên là `button.navigation` và giá trị là `Continue`.
   
2. Chèn biến này vào trường **Content** của từng phần tử mà văn bản cần xuất hiện.

Để thay đổi văn bản ở mọi nơi, chỉ cần cập nhật giá trị khởi tạo của biến một lần. Mọi phần tử sử dụng biến đó sẽ tự động cập nhật, giúp bạn không phải chỉnh sửa từng màn hình thủ công.