Insluitbare spraakwidget

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.

ThunderPhone widget in light and dark themes with various accent colors

Vereisten

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

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.

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).

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.

Publiceerbare sleutels (pk_live_...) zijn niet hetzelfde als je geheime API-tokens. Publiceerbare sleutels zijn bedoeld voor gebruik aan de clientzijde en zijn beperkt tot widgetsessies op je toegestane domeinen. Gebruik je geheime API-token nooit in client-side code.

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:

Prop	Standaard	Beschrijving
`theme`	`'light'`	`'light'` voor wit glas, `'dark'` voor donker glas
`primaryColor`	`'#000000'` (licht) / `'#ffffff'` (donker)	Accentkleur voor de startknop, golfvorm en verbindingsindicator
`title`	`'Voice assistant'`	Tekst die in de widget wordt weergegeven
`position`	`'bottom-right'`	Hoek van het 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"
/>

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

Prop	Beschrijving
`language`	Taaloverschrijving per sessie — een code of landinstelling zoals `en`, `es` of `fr-FR`
`voice`	Stemoverschrijving per sessie — een stemnaam zoals `maria`
`context`	Feitelijke pagina- of sitecontext die wordt doorgegeven aan de spraakagent (aan serverzijde afgekapt tot 12.000 tekens)

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:

React-component

Kant-en-klaar UI-component met ingebouwde oproepbediening en statusweergave. Importeren, props doorgeven, klaar.

Headless-hook

Volledige controle over de UI. De useThunderPhone-hook beheert de spraaksessie terwijl je je eigen interface bouwt.

CDN / script-tag

Geen bundler vereist. Laad de widget via een script-tag voor statische sites, WordPress en andere niet-React-omgevingen.

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.

Hulp nodig? Neem contact met ons op via support@thunderphone.com

​Vereisten

​Snel aan de slag

​Aanpassing

​Integratieopties

React-component

Headless-hook

CDN / script-tag

​Styling

Vereisten

Snel aan de slag

Aanpassing

Integratieopties

Styling