Ugradite web widget

Dodajte glasovnog agenta na svoju marketinšku stranicu ili stranicu za podršku jednom oznakom skripte — posjetitelji s njim razgovaraju izravno iz preglednika, bez potrebe za telefonskim brojem.

Web-widget vašim posjetiteljima web-mjesta omogućuje razgovor klikom za govor s AI glasovnim agentom putem mikrofona preglednika. To je zaseban JavaScript / React SDK s vlastitom SDK referencom — ovaj vodič usredotočen je na postavljanje na strani ThunderPhonea koje widget treba.

Preduvjeti#

1. Stvorite agenta

   Agent čiji će upit i glas pokretati sesiju 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

   Objavljivi ključevi 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.

Stvorite objavljivi ključ#

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_.... Objavljivi ključevi javni su po dizajnu — sigurno ih je uključiti u paket vašeg sučelja. Pogledajte referencu objavljivih ključeva za sva polja.

Ugradite widget na svoje web-mjesto#

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

Sve tri mogućnosti 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 uobičajenog engleskog teksta) i uračunava se u doplatu za veličinu upita.

Webhookovi načina rada widgeta#

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

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

U upit možete uključiti kontekst iz vlastite sesije (koji korisnik pregledava, na kojoj se stranici nalazi) i mijenjati agente ovisno o postupnom uvođenju.

Pratite sesije#

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

Sljedeći koraci#