Widget Suara yang Dapat Disematkan
Tambahkan agen suara AI ke situs web apa pun dengan beberapa baris kode
Widget suara ThunderPhone yang dapat disematkan memungkinkan pengunjung situs web Anda berbicara dengan agen AI langsung dari browser. Tidak memerlukan panggilan telepon -- pengguna cukup mengeklik tombol dan memulai percakapan suara real-time yang didukung oleh ThunderPhone.
Widget dirender sebagai bilah bergaya glassmorphism yang menyesuaikan dengan tema terang dan gelap, dengan warna aksen dan posisi yang dapat disesuaikan. Widget didistribusikan sebagai paket npm @thunderphone/widget dan juga tersedia melalui CDN untuk lingkungan tanpa bundler.
Prasyarat
Sebelum menyematkan widget, selesaikan tiga langkah berikut di Dashboard ThunderPhone:
- Buat kunci API yang dapat dipublikasikan
Buka Pengembang di pengaturan dashboard dan buat kunci yang dapat dipublikasikan. Kunci yang dapat dipublikasikan diawali dengan
pk_live_dan aman untuk disertakan dalam kode sisi klien. - Konfigurasikan domain yang diizinkan
Dalam pengaturan Pengembang yang sama, tambahkan domain tempat widget akan disematkan.
localhostselalu diizinkan untuk pengembangan. Karakter pengganti didukung (misalnya,*.example.com). - Buat widget web
Buka Widget Web di dashboard dan buat widget. Pilih agen yang ingin Anda tampilkan dan kunci yang dapat dipublikasikan untuk digunakan. Agen ditentukan secara otomatis dari konfigurasi kunci yang dapat dipublikasikan.
Mulai Cepat
Instal paket:
npm install @thunderphone/widgetTambahkan widget ke aplikasi Anda:
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
function App() {
return (
<ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
theme="dark"
primaryColor="#8b5cf6"
/>
)
}Selesai. Pengguna Anda akan melihat bilah panggilan bergaya glassmorphism yang menghubungkan mereka ke agen AI Anda dengan satu klik.
Kustomisasi
Widget memiliki empat prop tampilan:
| Prop | Default | Deskripsi |
|---|---|---|
theme | 'light' | 'light' untuk kaca putih, 'dark' untuk kaca gelap |
primaryColor | '#000000' (terang) / '#ffffff' (gelap) | Warna aksen untuk tombol mulai, bentuk gelombang, dan indikator penyambungan |
title | 'Voice assistant' | Teks yang ditampilkan dalam widget |
position | 'bottom-right' | Sudut viewport: '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"
/>Tiga prop lainnya menyesuaikan sesi, bukan tampilannya -- semuanya diteruskan ke permintaan sesi saat panggilan dimulai:
| Prop | Deskripsi |
|---|---|
language | Penggantian bahasa per sesi -- kode atau lokal seperti en, es, atau fr-FR |
voice | Penggantian suara per sesi -- nama suara seperti maria |
context | Konteks faktual halaman atau situs yang diteruskan ke agen (dipotong di sisi server hingga 12.000 karakter) |
Lihat referensi komponen React untuk tabel prop lengkap.
Untuk UI yang sepenuhnya kustom, gunakan hook headless untuk mengelola sesi suara sambil membangun antarmuka Anda sendiri. Hook ini menyediakan level audio real-time untuk membangun visualisasi yang reaktif terhadap audio.
Opsi Integrasi
Pilih metode integrasi yang sesuai dengan stack Anda:
Komponen UI siap pakai dengan kontrol panggilan dan tampilan status bawaan. Impor, berikan props, selesai.
Kontrol penuh atas UI. Hook useThunderPhone mengelola sesi suara saat Anda membangun antarmuka sendiri.
Tidak memerlukan bundler. Muat widget melalui tag skrip untuk situs statis, WordPress, dan lingkungan non-React lainnya.
Gaya
Widget dilengkapi tema terang dan gelap bawaan yang dikontrol oleh prop theme, serta warna aksen yang dikontrol oleh prop primaryColor. Untuk penyesuaian lebih mendalam, Anda dapat mengganti properti dan kelas kustom CSS. Lihat panduan Gaya untuk detail.