---
title: "Maak een webwidget in het dashboard"
description: "Stel vanaf de pagina Webwidgets een klik-om-te-praten-widget voor je site in — geen API-aanroepen vereist."
---

Met de pagina **Webwidgets** (`/dashboard/web-widgets`) maak en beheer je
de publiceerbare sleutels die de insluitbare spraakwidget van ThunderPhone
mogelijk maken. Alles wat de [API-versie van deze handleiding](/nl/guides/embed-web-widget)
met cURL doet, doe je op deze pagina met een formulier — en bovendien wordt de
insluitcode voor je gegenereerd.

## Een widget maken

<Steps>
  <Step title="Klik op Nieuwe widget en kies een modus">
    - **Agentmodus** — de widget gebruikt altijd één agent die je uit
      de vervolgkeuzelijst kiest. De eenvoudigste configuratie.
    - **Webhookmodus** — bij elke widgetsessie roept ThunderPhone
      je webhook-URL aan en retourneert je server de agentconfiguratie
      voor die bezoeker (routing per pagina, ingelogde gebruikers, uitrol).
      Laat de URL leeg om de standaardwebhook van je organisatie te gebruiken;
      wanneer je een nieuwe URL invoert, kun je die ook als standaard voor de organisatie instellen.
  </Step>
  <Step title="Vermeld de toegestane domeinen">
    Er is minstens één domein vereist en browsers kunnen alleen
    sessies starten vanaf de hostnamen die je vermeldt. Jokertekens voor subdomeinen zoals
    `*.example.com` zijn toegestaan (ze komen overeen met subdomeinen, niet met het hoofddomein);
    losse jokertekens zoals `*` worden geweigerd. De lijst voorkomt informeel
    hergebruik van je sleutel op andere sites, maar is geen authenticatie: een script
    buiten een browser kan elke `Origin`-header verzenden. `localhost` is niet
    automatisch toegestaan in productie; voeg het toe aan de lijst om lokaal
    te testen met de productie-API.
  </Step>
  <Step title="Kies de browseroverschrijvingen">
    Vink elke sessie-instelling aan die je pagina verzendt: **Paginacontext**,
    **Variabelen**, **Stem**, **Taal**. Nieuwe widgets accepteren geen instellingen en
    een sessieverzoek met een uitgeschakelde instelling mislukt met `400`.
    Je sleutel is openbaar, dus sta alleen toe wat je gebruikt. Zie
    [Browseroverschrijvingen](/nl/guides/embed-web-widget).
  </Step>
  <Step title="Geef de widget een naam, schakel deze in en maak deze aan">
    De schakelaar **Widget inschakelen** bepaalt of de sleutel
    sessies accepteert — je kunt een widget uitgeschakeld maken en deze bij de lancering inschakelen.
  </Step>
</Steps>

## De insluitcode ophalen

Direct na het maken (of via de knop **Insluiten** in elke rij) genereert een
insluitdialoog gebruiksklare code met je publiceerbare sleutel al
ingevuld:

- **React** — een `<ThunderPhoneWidget />`-snippet voor apps met een bundler.
- **Script-tag** — een CDN-combinatie van `<script>` en stylesheet voor elke site.

De dialoog toont ook een voorbeeld van basisopties voor de weergave — titel, primaire
kleur, hoekpositie en licht/donker-thema — en verwerkt je keuzes
in de snippet. Zie de [widget SDK-documentatie](/nl/widget/overview) voor de volledige referentie van props,
stylinghooks en de headless-optie.

<Note>
  Publiceerbare sleutels (`pk_live_…`) zijn openbaar van opzet — ze kunnen veilig in
  frontendcode worden gebruikt. Kopieer er op elk moment een met de kopieerknop in de betreffende rij.
</Note>

## Widgets beheren vanuit de lijst

Elke rij kan direct worden bewerkt:

- **Modus / Agent** — wissel tussen agent- en webhookmodus, of wijzig
  de spraakagent, met keuzelijsten in de rij.
- **Domeinen** — voeg toegestane domeinen toe of verwijder ze als chips.
- **Inschakelen/uitschakelen** — een schakelaar per widget; uitgeschakelde widgets
  stoppen onmiddellijk met het accepteren van sessies.
- **Overdragen aan organisatie** — kopieer of verplaats de widget naar een andere organisatie
  waartoe je behoort (verplaatsen verwijdert hem hier).
- **Verwijderen** — trekt de publiceerbare sleutel in; de widget werkt
  onmiddellijk niet meer op alle domeinen. Dit kan niet ongedaan worden gemaakt.

Widgetsessies verschijnen in de [oproepgeschiedenis](/nl/guides/review-calls) met hetzelfde
transcript, dezelfde opname en beoordeling als telefoongesprekken.

## Volgende stappen

<CardGroup cols={2}>
  <Card title="Widget SDK-referentie" icon="window-maximize" href="/nl/widget/overview">
    Details over de React-component, headless-hook en het CDN-script.
  </Card>
  <Card title="Routering in webhookmodus" icon="bolt" href="/nl/guides/dynamic-call-config">
    Retourneer agentconfiguratie per bezoeker vanaf je server.
  </Card>
</CardGroup>