---
title: "Nút bấm trong Flow builder"
description: "Thêm và cấu hình các nút hành động trong Flow Builder."
---

:::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.
:::
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. Dùng chúng cho:
- CTA mua hàng — kết nối với sản phẩm và tự động xử lý giao dịch
- Điều hướng — di 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 mua hàng, Điều khoản dịch vụ và Chính sách bảo mật

:::tip
Đặt các CTA mua hàng, liên kết khôi phục và liên kết pháp lý vào trong [Footer](builder-containers#footer) — phần này được ghim cố định ở cuối màn hình và che phủ các phần tử cuộn phía dưới.
:::
## Thêm nút \{#add-buttons\}

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

1. Nhấn **+** 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 đều được cấu hình sẵn các hành động. Đối với liên kết, [hãy cấu hình URL để điều hướng người dùng đến đích](#links). Đối với các loại nút khác, hãy vào bảng **Interactions**. Tại đó, trong mục **Button triggers**, hãy 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](builder-styling) trong bảng **Design**.
## Các loại nút \{#button-types\}

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

:::link
Để 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 sẽ khởi động in-app purchase cho sản phẩm mà người dùng đã 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ý việc mua hàng trong code ứng dụng.

Để thêm nút mua hàng:
1. Nhấp vào **+** và chọn **Button**, sau đó chọn một preset nút.
2. Khi nút đã được chọn, mở tab **Interactions** ở bảng bên phải.
3. Nhấp vào **Add trigger** > **On tap**, sau đó nhấp vào **Add action**.
4. Đặt **Action** thành **Purchase** và **Product** thành `products.selectedProduct`. Biến `products.selectedProduct` luôn được phân giải thành sản phẩm đang được chọn trên màn hình.

:::tip
Bạn có thể thu hút sự chú ý hơn vào các nút mua hàng bằng cách thêm animation cho chú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**. Hãy đặt URL đích ở đó. Các Open URL trống 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 mua
Để thêm liên kết:
1. Nhấn **+** và chọn **Button > Links**. Thao tác này sẽ thêm một hàng các nút inline với các hành động được xác định sẵn: khôi phục giao dịch mua hoặc mở một URL. Nếu bạn không cần tất cả các nút được thêm vào, 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ờ, hãy 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 mua rồi.
   - Đối với mỗi liên kết còn lại:
        1. Nhấp vào nút để chọn nó và chuyển sang tab **Interactions** ở bên phải.
        2. Dán URL vào trường đó.
        3. Theo mặc định, URL sẽ mở trong trình duyệt trong ứng dụng để mang lại trải nghiệm liền mạch cho người dùng. Nếu bạn 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** sẽ đóng flow tự động.

Để thêm nút đóng, nhấn **+** 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 sử dụng [actions](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