Skip to main content
Webwidgeten giver dine besøgende på webstedet en klik-for-at-tale-samtale med en AI-agent ved hjælp af browserens mikrofon. Det er et separat JavaScript-/React-SDK med sin egen SDK-reference — denne vejledning fokuserer på den opsætning på ThunderPhone-siden, som widgeten har brug for.
Du kan gøre alt dette uden cURL: dashboardsiden Webwidgets (/dashboard/web-widgets) opretter widgeten, angiver dens tilstand og agent, administrerer tilladte domæner og giver dig indlejringskodestykket.

​
Forudsætninger

1

Opret en agent

Agenten, hvis prompt og stemme skal køre widgetsessionen. Angiv widget_enabled: true (standardindstillingen).
2

Vælg routingtalstanden

  • mode="agent" — én statisk agent pr. nøgle. Enklest.
  • mode="webhook" — din server vælger agenten pr. besøgende via en web.incoming-webhook. Brug dette til brugere, der er logget ind, A/B-tests eller routing pr. side.
3

Angiv de tilladte domæner

Udgivelsesnøgler er låst til origin. Du skal angive hvert værtsnavn, der indlejrer widgeten. localhost / 127.0.0.1 er altid tilladt under lokal udvikling.

​
Opret en udgivelsesnøgle

Svaret indeholder en key, der begynder med pk_live_.... Udgivelsesnøgler er offentlige med vilje — de kan sikkert inkluderes i din front-end-pakke. Se reference for udgivelsesnøgler for alle felter.
allowed_domains skal indeholde mindst én post. *.example.com matcher underdomæner (f.eks. api.example.com), men ikke det nøgne domæne. Nøgne jokertegn som * eller *.* afvises.

​
Tilføj widgeten på dit websted

Tre integrationsmuligheder er beskrevet i widget-SDK-dokumentationen:

React-komponent

<ThunderPhoneWidget publishableKey="pk_live_..." />.

Headless-hook

useThunderPhone() til tilpassede brugergrænseflader.

CDN-script-tag

ThunderPhone.mount({...}) til websteder uden bundler.
Alle tre accepterer den samme publishableKey og gengiver mikrofonknappen samt lydelementet under opkaldet. Widgetens context afkortes til 12.000 tegn (omtrent 3.400 tokens af typisk engelsk tekst) og tæller med i tillægget for promptstørrelse.

​
Webhooks i widgettilstand

Når mode="webhook", kalder ThunderPhone din webhook_url ved hver sessionsstart med en web.incoming-payload. Returner den agentkonfiguration, du vil køre for den besøgende — den følger samme svarskema som telefonopkald:
Du kan blande kontekst fra din egen session (hvilken kunde der browser, hvilken side de er på) ind i prompten og skifte agent pr. udrulning.

​
Overvåg sessionerne

Widget-sessioner vises i GET /v1/calls med direction="widget" — samme transskription, optagelse, bedømmelse og fakturering som telefonopkald. Filtrer efter direction for at opbygge et dashboard kun til widgets.

​
Næste trin

Reference til Widget SDK

Integrationsdetaljer for React / hooks / CDN.

Dynamisk konfiguration pr. opkald

Implementer mode="webhook"-flowet fra ende til anden.

Reference til publicerbare nøgler

Alle felter i nøgleressourcen.

API til mikrofonsessioner

Spring widgetten over; styr LiveKit direkte til tilpassede brugergrænseflader.