Ugradite web-widget

Web-widget omogućuje posjetiteljima vašeg web-mjesta razgovor klikom s AI glasovnim agentom putem mikrofona preglednika. To je zaseban JavaScript / React SDK s vlastitom SDK referencom — ovaj se vodič fokusira na postavljanje na strani ThunderPhonea koje widget zahtijeva.

Preduvjeti

1. Izradite agenta

   Agent čiji će se prompt i glas koristiti tijekom sesije widgeta. Postavite widget_enabled: true (zadana vrijednost).

2. Odaberite način usmjeravanja
   • mode="agent" — jedan statični agent po ključu. Najjednostavnije.
   • mode="webhook" — vaš poslužitelj odabire agenta za svakog posjetitelja putem webhooka web.incoming. Upotrijebite ovo za prijavljene korisnike, A/B testove ili usmjeravanje po stranici.
3. Navedite dopuštene domene

   Ključevi za objavu vezani su uz izvor. Morate navesti svaki naziv hosta koji će ugraditi widget. localhost / 127.0.0.1 uvijek su dopušteni tijekom lokalnog razvoja.

Izradite ključ za objavu

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"]
  }'

Odgovor uključuje key koji počinje s pk_live_.... Ključevi za objavu namjerno su javni — sigurno ih je uključiti u front-end paket. Pogledajte referencu ključeva za objavu za sva polja.

Ugradite widget na svoje web-mjesto

Tri su mogućnosti integracije opisane u dokumentaciji SDK-a za widget:

Sve tri opcije prihvaćaju isti publishableKey i prikazuju gumb mikrofona te audioelement tijekom poziva.

context widgeta skraćuje se na 12.000 znakova (otprilike 3.400 tokena tipičnog engleskog teksta) i uračunava se u dodatnu naknadu za veličinu prompta.

Webhookovi u načinu rada widgeta

Kada je mode="webhook", ThunderPhone poziva vaš webhook_url pri svakom pokretanju sesije s teretom web.incoming. Vratite konfiguraciju agenta koju želite pokrenuti za tog posjetitelja — slijedi istu shemu odgovora kao i telefonski pozivi:

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

U prompt možete uključiti kontekst iz vlastite sesije (koji korisnik pregledava sadržaj, na kojoj se stranici nalazi) i mijenjati agente za svako uvođenje.

Pratite sesije

Sesije widgeta prikazuju se u GET /v1/calls s direction="widget" — s istim transkriptom, snimkom, ocjenjivanjem i naplatom kao i telefonski pozivi. Filtrirajte prema direction da biste izradili nadzornu ploču samo za widget.

Sljedeći koraci