Widget thoại có thể nhúng

Thêm tác nhân AI thoại vào bất kỳ trang web nào chỉ với vài dòng mã

Tiện ích giọng nói nhúng ThunderPhone cho phép khách truy cập website của bạn trò chuyện trực tiếp với tác nhân AI từ trình duyệt. Không cần gọi điện -- người dùng chỉ cần nhấp vào nút và bắt đầu cuộc trò chuyện bằng giọng nói theo thời gian thực do ThunderPhone cung cấp.

Tiện ích hiển thị dưới dạng thanh kính mờ thích ứng với giao diện sáng và tối, có màu nhấn và vị trí tùy chỉnh. Tiện ích được phân phối dưới dạng gói npm @thunderphone/widget và cũng có sẵn qua CDN cho các môi trường không dùng bundler.

Điều kiện tiên quyết#

Trước khi nhúng tiện ích, hãy hoàn tất ba bước sau trong Bảng điều khiển ThunderPhone:

1. Tạo tiện ích web

   Vào Tiện ích web trong bảng điều khiển và tạo một tiện ích. Chọn tác nhân AI bạn muốn hiển thị. Mỗi tiện ích có khóa có thể công khai riêng (pk_live_...), an toàn để đưa vào mã phía máy khách; tác nhân AI được xác định từ khóa này.

2. Cấu hình miền được phép

   Trên cùng tiện ích đó, thêm các miền nơi tiện ích sẽ được nhúng. Có hỗ trợ ký tự đại diện (ví dụ: *.example.com). Danh sách này ngăn tiện ích hoạt động khi ai đó sao chép khóa của bạn sang trang khác; đây không phải là xác thực, vì một script bên ngoài trình duyệt có thể gửi bất kỳ tiêu đề Origin nào. localhost không tự động được cho phép trong môi trường production: hãy thêm nó vào danh sách để kiểm thử cục bộ với API production.

3. Chọn ghi đè của trình duyệt

   Nếu trang của bạn đặt language, voice hoặc context, hãy bật từng mục trong Ghi đè của trình duyệt. Tiện ích mới không chấp nhận mục nào, và yêu cầu phiên chứa một thiết lập đang tắt sẽ thất bại với 400 override_not_allowed. Xem Ghi đè của trình duyệt.

Bắt đầu nhanh#

Cài đặt gói:

npm install @thunderphone/widget

Thêm tiện ích vào ứng dụng của bạn:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

Vậy là xong. Người dùng của bạn sẽ thấy một thanh cuộc gọi kính mờ kết nối họ với tác nhân AI của bạn chỉ bằng một lần nhấp.

Tùy chỉnh#

Tiện ích có bốn prop về giao diện:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Ba prop khác tùy chỉnh phiên thay vì giao diện — tất cả đều được chuyển tiếp đến yêu cầu phiên khi cuộc gọi bắt đầu. Mỗi prop chỉ hoạt động khi publishable key của widget cho phép trong Ghi đè trình duyệt; nếu không, yêu cầu phiên sẽ thất bại với 400 override_not_allowed:

Xem tham chiếu thành phần React để biết bảng prop đầy đủ.

Để có giao diện hoàn toàn tùy chỉnh, hãy sử dụng headless hook để quản lý phiên giọng nói trong khi bạn xây dựng giao diện riêng. Hook này cung cấp mức âm thanh theo thời gian thực để xây dựng các hình ảnh trực quan phản ứng với âm thanh.

Mỗi cuộc trò chuyện trên widget là một cuộc gọi. Cuộc gọi này được tính vào giới hạn cuộc gọi đồng thời của tổ chức bạn (mặc định 20 cuộc gọi đang diễn ra, dùng chung với cuộc gọi điện thoại và các cuộc gọi khác) và giới hạn widget là 25 phiên hoạt động (hoặc giới hạn cuộc gọi đồng thời của bạn, nếu cao hơn). Khi đạt một trong hai giới hạn, cuộc trò chuyện mới không thể bắt đầu cho đến khi một cuộc gọi kết thúc.

Tùy chọn tích hợp#

Chọn phương thức tích hợp phù hợp với stack của bạn:

Tùy chỉnh giao diện#

Widget đi kèm giao diện sáng và tối tích hợp, được điều khiển bằng prop theme, cùng màu nhấn được điều khiển bằng prop primaryColor. Để tùy chỉnh sâu hơn, bạn có thể ghi đè các thuộc tính tùy chỉnh và class CSS. Xem hướng dẫn tùy chỉnh giao diện để biết chi tiết.