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:
- Tạo khóa API có thể công khai
Vào Nhà phát triển trong phần cài đặt bảng điều khiển và tạo một khóa có thể công khai. Khóa có thể công khai bắt đầu bằng
pk_live_và an toàn để đưa vào mã phía client. - Cấu hình miền được phép
Trong cùng phần cài đặt Nhà phát triển, thêm các miền nơi tiện ích sẽ được nhúng.
localhostluôn được cho phép để phát triển. Hỗ trợ ký tự đại diện (ví dụ:*.example.com). - 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 bạn muốn cung cấp và khóa có thể công khai để sử dụng. Tác nhân được xác định tự động từ cấu hình khóa có thể công khai của bạn.
Bắt đầu nhanh
Cài đặt gói:
npm install @thunderphone/widgetThê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:
| Prop | Mặc định | Mô tả |
|---|---|---|
theme | 'light' | 'light' cho kính trắng, 'dark' cho kính tối |
primaryColor | '#000000' (sáng) / '#ffffff' (tối) | Màu nhấn cho nút bắt đầu, dạng sóng và chỉ báo đang kết nối |
title | 'Voice assistant' | Văn bản hiển thị trong tiện ích |
position | 'bottom-right' | Góc khung nhìn: 'bottom-right', 'bottom-left', 'top-right', 'top-left' |
<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:
| Prop | Mô tả |
|---|---|
language | Ghi đè ngôn ngữ theo phiên -- một mã hoặc locale như en, es hoặc fr-FR |
voice | Ghi đè giọng nói theo phiên -- tên giọng nói như maria |
context | Ngữ cảnh thực tế của trang hoặc website được truyền đến tác nhân (được cắt bớt phía máy chủ còn 12.000 ký tự) |
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.
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:
Thành phần UI dựng sẵn với nút điều khiển cuộc gọi và hiển thị trạng thái tích hợp. Import, truyền props, hoàn tất.
Toàn quyền kiểm soát UI. Hook useThunderPhone quản lý phiên thoại trong khi bạn xây dựng giao diện riêng.
Không cần bundler. Tải widget qua thẻ script cho trang tĩnh, WordPress và các môi trường không dùng React khác.
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.