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:

1. Buat widget web

   Buka Widget Web di dasbor dan buat widget. Pilih agen yang ingin Anda tampilkan. Setiap widget memiliki kunci yang dapat dipublikasikan sendiri (pk_live_...), yang aman disertakan dalam kode sisi klien; agen ditentukan dari kunci tersebut.

2. Konfigurasikan domain yang diizinkan

   Pada widget yang sama, tambahkan domain tempat widget akan disematkan. Karakter pengganti didukung (misalnya, *.example.com). Daftar ini mencegah widget berfungsi ketika seseorang menyalin kunci Anda ke situs lain; ini bukan autentikasi, karena skrip di luar browser dapat mengirim header Origin apa pun. localhost tidak diizinkan secara otomatis dalam produksi: tambahkan ke daftar untuk menguji secara lokal terhadap API produksi.

3. Pilih penggantian browser

   Jika halaman Anda menetapkan language, voice, atau context, aktifkan masing-masing di bawah Penggantian browser. Widget baru tidak menerima penggantian apa pun, dan permintaan sesi yang membawa pengaturan yang dinonaktifkan gagal dengan 400 override_not_allowed. Lihat Penggantian browser.

Mulai Cepat#

Instal paket:

npm install @thunderphone/widget

Tambahkan 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:

<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 tampilan -- semuanya diteruskan ke permintaan sesi saat panggilan dimulai. Masing-masing hanya berfungsi jika kunci publik widget mengizinkannya melalui Override browser; jika tidak, permintaan sesi gagal dengan 400 override_not_allowed:

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.

Setiap percakapan widget adalah sebuah panggilan. Ini diperhitungkan dalam batas panggilan bersamaan organisasi Anda (secara default 20 panggilan sedang berlangsung, dibagikan dengan panggilan telepon dan panggilan lainnya) serta batas widget sebesar 25 sesi aktif (atau batas panggilan bersamaan Anda, jika lebih tinggi). Pada salah satu batas tersebut, percakapan baru tidak dapat dimulai hingga sebuah panggilan berakhir.

Opsi Integrasi#

Pilih metode integrasi yang sesuai dengan stack Anda:

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.