Skip to main content
Webbwidgeten ger dina webbplatsbesökare ett klicka-för-att-prata-samtal med en AI-röstagent via webbläsarens mikrofon. Det är ett separat JavaScript-/React-SDK med en egen SDK-referens — den här guiden fokuserar på konfigurationen på ThunderPhone-sidan som widgeten behöver.
Du kan göra allt detta utan cURL: dashboardsidan Webbwidgetar (/dashboard/web-widgets) skapar widgeten, anger dess läge och agent, hanterar tillåtna domäner och ger dig inbäddningssnutten.

​
Förutsättningar

1

Skapa en agent

Agenten vars prompt och röst ska köras i widgetsessionen. Ange widget_enabled: true (standardvärdet).
2

Välj routningsläge

  • mode="agent" — en statisk agent per nyckel. Enklast.
  • mode="webhook" — din server väljer agent per besökare via en web.incoming-webhook. Använd detta för inloggade användare, A/B-tester eller routning per sida.
3

Lista tillåtna domäner

Publicerbara nycklar är låsta till ursprung. Du måste ange varje värdnamn som ska bädda in widgeten. localhost / 127.0.0.1 är alltid tillåtna under lokal utveckling.

​
Skapa en publicerbar nyckel

Svaret innehåller en key som börjar med pk_live_.... Publicerbara nycklar är offentliga avsiktligt — de kan säkert inkluderas i ditt frontend-paket. Se referensen för publicerbara nycklar för alla fält.
allowed_domains måste innehålla minst en post. *.example.com matchar underdomäner (t.ex. api.example.com) men inte den rena domänen. Rena jokertecken som * eller *.* avvisas.

​
Lägg till widgeten på din webbplats

Tre integrationsalternativ beskrivs i widgetens SDK-dokumentation:

React-komponent

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

Headless-hook

useThunderPhone() för anpassade användargränssnitt.

CDN-skripttagg

ThunderPhone.mount({...}) för webbplatser utan paketerare.
Alla tre accepterar samma publishableKey och renderar mikrofonknappen samt ljudelementet under samtal. Widgetens context trunkeras till 12 000 tecken (ungefär 3 400 token av typisk engelsk text) och räknas in i tillägget för promptstorlek.

​
Webhooks i widgetläge

När mode="webhook" används anropar ThunderPhone din webhook_url vid varje sessionsstart med en web.incoming-payload. Returnera den agentkonfiguration du vill köra för den besökaren — den följer samma svarsschema som telefonsamtal:
Du kan blanda in kontext från din egen session (vilken kund som surfar, vilken sida de är på) i prompten och byta agent per utrullning.

​
Övervaka sessionerna

Widgetsessioner visas i GET /v1/calls med direction="widget" — samma transkribering, inspelning, bedömning och fakturering som telefonsamtal. Filtrera efter direction för att skapa en dashboard endast för widgeten.

​
Nästa steg

Referens för widget-SDK

Integrationsdetaljer för React / hook / CDN.

Dynamisk konfiguration per samtal

Implementera flödet mode="webhook" från början till slut.

Referens för publicerbara nycklar

Alla fält i nyckelresursen.

API för mikrofonsessioner

Hoppa över widgeten; styr LiveKit direkt för anpassade användargränssnitt.