---
title: "Các nút trong Flow Builder"
description: "Thêm và cấu hình các nút thao tác trong Flow Builder."
---

Các nút là những phần tử tương tác trong Flow Builder, phản hồi khi người dùng nhấn vào. Dùng chúng cho:
- CTA mua hàng — kết nối với sản phẩm và xử lý giao dịch tự động
- Điều hướng — chuyển người dùng giữa các màn hình (Tiếp theo, Quay lại, Đóng, Bỏ qua)
- Liên kết tiện ích — Khôi phục giao dịch, Điều khoản dịch vụ và Chính sách quyền riêng tư

:::info
Phần này mô tả Flow Builder mới, hoạt động với Adapty SDK phiên bản 4.0 trở lên.
:::

## Thêm nút \{#add-buttons\}

Để thêm bất kỳ nút nào:

1. Nhấp **+** và chọn **Button**.
2. Chọn loại nút.

    <img src="/assets/shared/img/button-type.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

3. Các nút mua hàng, liên kết và nút đóng đã được cấu hình sẵn hành động. Với liên kết, hãy [cấu hình URL để điều hướng người dùng](#links). Với các loại nút khác, vào bảng **Interactions**. Tại đó, trong phần **Button triggers**, thiết lập các [hành động](onboarding-actions) mà nút cần thực hiện.

    <img src="/assets/shared/img/button-action.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

4. Cấu hình [thiết kế nút](manage-paywall-ui-elements) trong bảng **Design**.

## Các loại nút \{#button-types\}

### Nút mua hàng \{#purchase-buttons\}

:::link
Để các nút mua hàng hoạt động, hãy gắn sản phẩm vào màn hình và thêm phần tử **Products**. Xem [hướng dẫn](paywall-product-block).
:::

Nút mua hàng khởi động in-app purchase cho sản phẩm mà người dùng đang chọn trên màn hình. SDK xử lý giao dịch tự động, nên bạn không cần xử lý mua hàng trong code ứng dụng.

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

1. Nhấp **+** và chọn **Button**, sau đó chọn một preset nút.
2. Với nút đang được chọn, mở tab **Interactions** ở 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`. Biến `products.selectedProduct` luôn trỏ đến sản phẩm hiện đang được chọn trên màn hình.

:::tip
Bạn có thể thu hút thêm sự chú ý vào nút mua hàng bằng cách thêm hiệu ứng chuyển động. Paywall Builder hiện hỗ trợ kiểu animation **Pulse**.

Cấu hình kiểu animation trong bảng **Design**.
:::

  <img src="/assets/shared/img/purchase-button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Liên kết \{#links\}

:::important
Các nút **Terms of Use** và **Privacy Policy** có sẵn hành động **Open URL**. Đặt URL đích tại đây. URL trống trong Open URL và [liên kết nội tuyến](onboarding-text#inline-link) sẽ chặn việc xem trước và xuất bản.
:::

Để tuân thủ một số yêu cầu của cửa hàng, bạn có thể thêm liên kết đến:
- Điều khoản dịch vụ
- Chính sách quyền riêng tư
- Khôi phục giao dịch

Để thêm liên kết:
1. Nhấp **+** và chọn **Button > Links**. Thao tác này sẽ thêm một hàng nút nội tuyến với các hành động được định sẵn: khôi phục giao dịch hoặc mở URL. Nếu bạn không cần tất cả các nút, hãy xóa những nút không cần thiết trong bảng layers.

    <img src="/assets/shared/img/add-links.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

2. Bây giờ, thiết lập các hành động cho nút:

   - Nút **Restore purchases** đã xử lý việc khôi phục giao dịch sẵn rồi.
   - Với mỗi liên kết còn lại:
        1. Nhấp vào nút để chọn và chuyển sang tab **Interactions** ở bên phải.
        2. Dán URL vào ô nhập liệu.
        3. Mặc định, URL sẽ mở trong trình duyệt trong ứng dụng để trải nghiệm liền mạch. Nếu muốn điều hướng người dùng đến trình duyệt bên ngoài, hãy chọn hộp kiểm **Open in external browser**.

  <img src="/assets/shared/img/pb-links.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Đóng flow \{#close-flow\}

Nút **Close** đóng flow tự động.

Để thêm nút đóng, nhấp **+** và chọn **Button > Close flow**.

    <img src="/assets/shared/img/close-flow.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

:::tip
Dùng vị trí **Absolute** để đặt nút đóng ở góc màn hình.
:::

Bạn cũng có thể cấu hình bất kỳ nút nào khác để đóng flow bằng cách dùng [hành động](onboarding-actions).

### Nút tùy chỉnh \{#custom-buttons\}

Bất kỳ nút nào bạn thêm vào đều có thể được cấu hình để thực hiện các hành động khi nhấn:
- Điều hướng đến màn hình tiếp theo
- Hiển thị cảnh báo
- Đặt [biến](onboarding-variables)
- [Hiển thị hoặc ẩn các phần tử trên màn hình](onboarding-element-visibility)
- Mở URL
- Khôi phục giao dịch
- Thực hiện hành động có điều kiện