> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Frame>
  <img src="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="ThunderPhone widget in light and dark themes with various accent colors" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

## Vereisten

Voer deze drie stappen uit in het [ThunderPhone-dashboard](https://app.thunderphone.com) voordat je de widget insluit:

<Steps>
  <Step title="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.
  </Step>

  <Step title="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`).
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Warning>
  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.
</Warning>

***

## Snel aan de slag

Installeer het pakket:

```bash theme={null}
npm install @thunderphone/widget
```

Voeg de widget toe aan je app:

```tsx theme={null}
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'` |

<CodeGroup>
  ```tsx Light theme (default) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

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](/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.

***

## Integratieopties

Kies de integratiemethode die bij je stack past:

<CardGroup cols={3}>
  <Card title="React-component" icon="react" href="/nl/widget/react">
    Kant-en-klaar UI-component met ingebouwde oproepbediening en statusweergave. Importeren, props doorgeven, klaar.
  </Card>

  <Card title="Headless-hook" icon="code" href="/nl/widget/headless-hook">
    Volledige controle over de UI. De `useThunderPhone`-hook beheert de spraaksessie terwijl je je eigen interface bouwt.
  </Card>

  <Card title="CDN / script-tag" icon="globe" href="/nl/widget/cdn-script-tag">
    Geen bundler vereist. Laad de widget via een script-tag voor statische sites, WordPress en andere niet-React-omgevingen.
  </Card>
</CardGroup>

***

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

<Note>
  Hulp nodig? Neem contact met ons op via [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>