Skip to main content
Nettwidgeten gir nettstedbesøkende en klikk-og-snakk-samtale med en stemmeagent ved hjelp av nettleserens mikrofon. Det er et separat JavaScript- / React-SDK med egen SDK-referanse — denne veiledningen fokuserer på oppsettet på ThunderPhone-siden som widgeten trenger.
Du kan gjøre alt dette uten cURL: dashbordsiden Nettwidgeter (/dashboard/web-widgets) oppretter widgeten, angir modus og agent, administrerer tillatte domener og gir deg innebyggingskodebiten.

​
Forutsetninger

1

Opprett en agent

Agenten med prompten og stemmen som skal kjøre widgetøkten. Angi widget_enabled: true (standardverdien).
2

Velg rutingmodus

  • mode="agent" — én statisk agent per nøkkel. Enklest.
  • mode="webhook" — serveren din velger agent per besøkende via en web.incoming-webhook. Bruk dette for innloggede brukere, A/B-tester eller ruting per side.
3

List opp tillatte domener

Publiserbare nøkler er låst til opprinnelse. Du må oppgi hvert vertsnavn som skal bygge inn widgeten. localhost / 127.0.0.1 er alltid tillatt under lokal utvikling.

​
Opprett en publiserbar nøkkel

Responsen inneholder en key som starter med pk_live_.... Publiserbare nøkler er offentlige av hensikt — de er trygge å inkludere i front-end-pakken din. Se referansen for publiserbare nøkler for alle felter.
allowed_domains må inneholde minst én oppføring. *.example.com matcher underdomener (f.eks. api.example.com), men ikke det nakne domenet. Nakne jokertegn som * eller *.* avvises.

​
Legg widgeten på nettstedet ditt

Tre integrasjonsalternativer dekkes i widget-SDK-dokumentasjonen:

React-komponent

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

Headless-hook

useThunderPhone() for egendefinerte grensesnitt.

CDN-skripttagg

ThunderPhone.mount({...}) for nettsteder uten bundler.
Alle tre godtar den samme publishableKey og viser mikrofonknappen samt lyd-elementet under samtalen. Widgetens context avkortes til 12 000 tegn (omtrent 3 400 tokener med typisk engelsk tekst) og teller med i tillegget for promptstørrelse.

​
Webhooks i widgetmodus

Når mode="webhook", sender ThunderPhone en forespørsel til webhook_url ved hver øktstart med en web.incoming-nyttelast. Returner agentkonfigurasjonen du vil kjøre for den besøkende — den følger samme svarskjema som telefonsamtaler:
Du kan blande kontekst fra din egen økt (hvilken kunde som besøker siden, hvilken side de er på) inn i prompten og bytte agenter per utrulling.

​
Følg med på øktene

Widget-økter vises i GET /v1/calls med direction="widget" — samme transkripsjon, opptak, vurdering og fakturering som telefonsamtaler. Filtrer etter direction for å bygge et dashbord kun for widgeten.

​
Neste trinn

Referanse for Widget SDK

Detaljer om integrasjon med React / hook / CDN.

Dynamisk konfigurasjon per samtale

Implementer flyten mode="webhook" fra ende til ende.

Referanse for publiserbare nøkler

Alle felt i nøkkelressursen.

API for mikrofonøkter

Hopp over widgeten; styr LiveKit direkte for tilpassede brukergrensesnitt.