Developer cookbook

Bygg inn nettwidgeten

Legg en stemmeagent på markedsførings- eller supportsiden din med én enkelt script-tag – besøkende snakker med den direkte fra nettleseren, uten behov for telefonnummer.

Nettwidgeten gir besøkende på nettstedet ditt en klikk-for-å-snakke-samtale med en stemmeagent ved å bruke nettleserens mikrofon. Det er et separat JavaScript- / React-SDK med sin egen SDK-referanse — denne veiledningen fokuserer på oppsettet på ThunderPhone-siden som widgeten trenger.

Forutsetninger#

1. Opprett en agent

   Agenten hvis prompt og stemme skal kjøre widgetøkten. Angi widget_enabled: true (standardverdien).

2. Velg rutingsmodus
   • 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#

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

Responsen inneholder en key som starter med pk_live_.... Publiserbare nøkler er offentlige av hensikt — det er trygt å inkludere dem i front-end-pakken din. Se referansen for publiserbare nøkler for alle felter.

Legg widgeten på nettstedet ditt#

Tre integrasjonsalternativer dekkes i widget-SDK-dokumentasjonen:

Alle tre godtar samme publishableKey og viser mikrofonknappen samt lydelementet 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", kaller ThunderPhone webhook_url ved hver øktstart med en web.incoming-nyttelast. Returner agentkonfigurasjonen du vil kjøre for den besøkende — den følger samme responsformat som telefonsamtaler:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

Du kan blande inn kontekst fra din egen økt (hvilken kunde som surfer, hvilken side de er på) i prompten og bytte agent per utrulling.

Overvåk ø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 dashboard kun for widgeten.

Neste steg#