---
title: "Insluitbare spraakwidget"
description: "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](https://app.thunderphone.com) voordat je de widget insluit:
Ga in het dashboard naar **Webwidgets** en maak een widget. Selecteer de spraakagent die je wilt beschikbaar maken. Elke widget heeft een eigen publiceerbare sleutel (`pk_live_...`), die je veilig in client-sidecode kunt opnemen; de agent wordt op basis van de sleutel bepaald.
Voeg bij dezelfde widget de domeinen toe waarin deze wordt ingesloten. Jokertekens worden ondersteund (bijvoorbeeld `*.example.com`). De lijst voorkomt dat de widget werkt wanneer iemand je sleutel naar een andere site kopieert; het is geen authenticatie, omdat een script buiten een browser elke `Origin`-header kan versturen. `localhost` is niet automatisch toegestaan in productie: voeg het aan de lijst toe om lokaal te testen met de productie-API.
Als je pagina `language`, `voice` of `context` instelt, schakel ze dan allemaal in onder **Browseroverschrijvingen**. Nieuwe widgets accepteren geen enkele instelling en een sessieverzoek met een uitgeschakelde instelling mislukt met `400 override_not_allowed`. Zie [Browseroverschrijvingen](/nl/guides/embed-web-widget).
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.
Widgetsessies eindigen standaard na 30 minuten, of eerder als de maximale gespreksduur van de agent korter is. Wijzig de limiet per sleutel met `max_call_duration_seconds` op de [publiceerbare sleutel](/api-reference/publishable-keys) (tot 6 uur), of stel deze in op `null` om de eigen limiet van de agent te gebruiken.
---
## Snel aan de slag
Installeer het pakket:
```bash
npm install @thunderphone/widget
```
Voeg de widget toe aan je app:
```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
function App() {
return (
)
}
```
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'` |
```tsx Light theme (default)
```
```tsx Dark theme with custom color
```
Drie andere props passen de sessie aan in plaats van het uiterlijk -- ze worden allemaal doorgestuurd naar het sessieverzoek wanneer een oproep start. Elk werkt alleen wanneer de publiceerbare sleutel van de widget dit toestaat onder **Browseroverschrijvingen**; anders mislukt het sessieverzoek met `400 override_not_allowed`:
| 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](/nl/widget/react) voor de volledige propstabel.
Gebruik voor een volledig aangepaste UI de [headless-hook](/nl/widget/headless-hook) om de spraaksessie te beheren terwijl je je eigen interface bouwt. De hook biedt realtime audioniveaus voor het bouwen van audioreactieve visualisaties.
Elke widgetconversatie is een oproep. Deze telt mee voor de [limiet voor gelijktijdige oproepen](/api-reference/introduction#call-limits) van je organisatie (standaard 20 actieve oproepen, gedeeld met telefoon- en andere oproepen) en voor een widgetlimiet van 25 actieve sessies (of je limiet voor gelijktijdige oproepen, als die hoger is). Bij het bereiken van een van beide limieten kan geen nieuwe conversatie starten totdat een oproep eindigt.
---
## Integratieopties
Kies de integratiemethode die bij je stack past:
Kant-en-klaar UI-component met ingebouwde oproepbediening en statusweergave. Importeren, props doorgeven, klaar.
Volledige controle over de UI. De `useThunderPhone`-hook beheert de spraaksessie terwijl je je eigen interface bouwt.
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](/nl/widget/styling) voor meer informatie.
Hulp nodig? Neem contact met ons op via [support@thunderphone.com](mailto:support@thunderphone.com)