> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tạo tiện ích web trong dashboard

> Thiết lập tiện ích nhấp để trò chuyện cho trang web của bạn từ trang Tiện ích web — không cần gọi API.

Trang **Tiện ích web** (`/dashboard/web-widgets`) tạo và quản lý
các khóa có thể xuất bản cung cấp năng lượng cho tiện ích giọng nói nhúng của ThunderPhone.
Mọi thao tác mà [phiên bản API của hướng dẫn này](/vi/guides/embed-web-widget)
thực hiện bằng cURL, trang này thực hiện bằng biểu mẫu — đồng thời tạo mã nhúng
cho bạn.

## Tạo tiện ích

<Steps>
  <Step title="Nhấp vào Tiện ích mới và chọn chế độ">
    * **Chế độ tác nhân AI** — tiện ích luôn chạy một tác nhân AI mà bạn chọn từ
      danh sách thả xuống. Thiết lập đơn giản nhất.
    * **Chế độ webhook** — trong mỗi phiên tiện ích, ThunderPhone gọi
      URL webhook của bạn và máy chủ của bạn trả về cấu hình tác nhân AI
      cho khách truy cập đó (định tuyến theo trang, người dùng đã đăng nhập, triển khai dần).
      Để trống URL để sử dụng webhook mặc định của tổ chức; khi nhập URL mới,
      bạn cũng có thể đặt URL đó làm mặc định của tổ chức.
  </Step>

  <Step title="Liệt kê các miền được phép">
    Khóa có thể xuất bản bị khóa theo origin: cần có ít nhất một miền,
    và tiện ích chỉ hoạt động trên các hostname bạn liệt kê. Ký tự đại diện
    cho miền con như `*.example.com` được chấp nhận (chúng khớp với miền con,
    không khớp với miền gốc); ký tự đại diện độc lập như `*` sẽ bị từ chối.
    `localhost` và `127.0.0.1` luôn được phép, nên quá trình phát triển cục bộ
    hoạt động mà không cần liệt kê chúng.
  </Step>

  <Step title="Đặt tên, bật và tạo">
    Công tắc **Bật tiện ích** kiểm soát việc khóa có chấp nhận
    phiên hay không — bạn có thể tạo tiện ích ở trạng thái tắt rồi bật khi ra mắt.
  </Step>
</Steps>

## Lấy mã nhúng

Ngay sau khi tạo (hoặc qua nút **Nhúng** của từng hàng), hộp thoại nhúng
tạo mã sẵn sàng để dán với khóa có thể xuất bản của bạn đã được điền
vào:

* **React** — đoạn mã `<ThunderPhoneWidget />` cho ứng dụng dùng bundler.
* **Thẻ script** — cặp CDN `<script>` + stylesheet cho mọi trang web.

Hộp thoại cũng xem trước các tùy chọn giao diện cơ bản — tiêu đề, màu
chính, vị trí góc và giao diện sáng/tối — rồi đưa các lựa chọn của bạn
vào đoạn mã. Để xem tài liệu đầy đủ về prop, hook tạo kiểu và tùy chọn
headless, hãy xem [tài liệu SDK tiện ích](/vi/widget/overview).

<Note>
  Khóa có thể xuất bản (`pk_live_…`) được công khai theo thiết kế — an toàn để đưa vào
  mã front-end. Sao chép bất kỳ khóa nào bằng nút sao chép trên hàng tương ứng.
</Note>

## Quản lý tiện ích từ danh sách

Mỗi hàng có thể chỉnh sửa trực tiếp:

* **Chế độ / Tác nhân AI** — chuyển giữa chế độ tác nhân AI và webhook, hoặc thay đổi
  tác nhân AI, bằng các danh sách chọn trực tiếp.
* **Miền** — thêm hoặc xóa các miền được phép dưới dạng chip.
* **Bật/tắt** — một công tắc cho mỗi tiện ích; tiện ích bị tắt sẽ
  ngừng chấp nhận phiên ngay lập tức.
* **Chuyển sang tổ chức** — sao chép hoặc di chuyển tiện ích sang tổ chức khác
  mà bạn thuộc về (di chuyển sẽ xóa tiện ích ở đây).
* **Xóa** — thu hồi khóa có thể xuất bản; tiện ích ngừng hoạt động
  ngay lập tức trên mọi miền. Không thể hoàn tác thao tác này.

Các phiên tiện ích xuất hiện trong [lịch sử cuộc gọi](/vi/guides/review-calls) với
cùng bản chép lời, bản ghi và chấm điểm như cuộc gọi điện thoại.

## Bước tiếp theo

<CardGroup cols={2}>
  <Card title="Tài liệu tham khảo SDK tiện ích" icon="window-maximize" href="/vi/widget/overview">
    Chi tiết về thành phần React, hook headless và script CDN.
  </Card>

  <Card title="Định tuyến chế độ webhook" icon="bolt" href="/vi/guides/dynamic-call-config">
    Trả về cấu hình tác nhân AI theo từng khách truy cập từ máy chủ của bạn.
  </Card>
</CardGroup>