Widget

Insluitbare spraakwidget

Voeg met enkele regels code een spraak-AI-agent toe aan elke website

Met de insluitbare ThunderPhone-spraakwidget kunnen bezoekers van je website rechtstreeks vanuit de browser met een AI-agent praten. Er is geen telefoongesprek nodig -- gebruikers klikken op een knop en starten een realtime spraakgesprek mogelijk gemaakt door ThunderPhone.

De widget wordt weergegeven als een glasachtige balk die zich aanpast aan lichte en donkere thema's, met aanpasbare accentkleuren en positionering. Hij wordt gedistribueerd als het npm-pakket @thunderphone/widget en is ook beschikbaar via CDN voor omgevingen zonder bundler.

Vereisten#

Voer deze drie stappen uit in het ThunderPhone-dashboard voordat je de widget insluit:

1. Maak een publiceerbare API-sleutel

   Ga naar Ontwikkelaars in de dashboardinstellingen en maak een publiceerbare sleutel. Publiceerbare sleutels beginnen met pk_live_ en kunnen veilig in client-side code worden opgenomen.

2. Configureer toegestane domeinen

   Voeg in dezelfde instellingen voor Ontwikkelaars de domeinen toe waarop de widget wordt ingesloten. localhost is altijd toegestaan voor ontwikkeling. Jokertekens worden ondersteund (bijv. *.example.com).

3. Maak een webwidget

   Ga naar Webwidgets in het dashboard en maak een widget. Selecteer de spraakagent die je wilt beschikbaar maken en de publiceerbare sleutel die je wilt gebruiken. De spraakagent wordt automatisch bepaald op basis van de configuratie van je publiceerbare sleutel.

Snel aan de slag#

Installeer het pakket:

npm install @thunderphone/widget

Voeg de widget toe aan je app:

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

Dat is alles. Je gebruikers zien een glasachtige oproepbalk die hen met één klik verbindt met je AI-agent.

Aanpassing#

De widget heeft vier props voor de weergave:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Drie extra props passen de sessie aan in plaats van de weergave -- ze worden allemaal doorgestuurd naar het sessieverzoek wanneer een oproep start:

Zie de React-componentreferentie voor de volledige propstabel.

Gebruik voor een volledig aangepaste UI de headless-hook om de spraaksessie te beheren terwijl je je eigen interface bouwt. De hook biedt realtime audioniveaus voor het bouwen van audioreactieve visualisaties.

Integratieopties#

Kies de integratiemethode die bij je stack past:

Styling#

De widget wordt geleverd met ingebouwde lichte en donkere thema's die worden aangestuurd via de theme-prop, en een accentkleur die wordt aangestuurd via de primaryColor-prop. Voor uitgebreidere aanpassingen kun je aangepaste CSS-eigenschappen en klassen overschrijven. Bekijk de stylinggids voor meer informatie.