Vdelajte spletni pripomoček

Spletni pripomoček obiskovalcem vašega spletnega mesta omogoča pogovor z glasovnim agentom s klikom, pri čemer uporablja mikrofon brskalnika. Gre za ločen JavaScript / React SDK z lastno referenco SDK-ja — ta vodnik se osredotoča na nastavitev na strani ThunderPhone, ki jo pripomoček potrebuje.

Predpogoji

1. Ustvarite agenta

   Agent, katerega poziv in glas bosta uporabljena v seji pripomočka. Nastavite widget_enabled: true (privzeto).

2. Določite način usmerjanja
   • mode="agent" — en statični agent na ključ. Najpreprosteje.
   • mode="webhook" — vaš strežnik izbere agenta za vsakega obiskovalca prek web.incoming webhooka. To uporabite za prijavljene uporabnike, A/B-teste ali usmerjanje glede na stran.
3. Navedite dovoljene domene

   Objavljivi ključi so vezani na izvor. Navesti morate vsako ime gostitelja, ki bo vdelalo pripomoček. localhost / 127.0.0.1 sta med lokalnim razvojem vedno dovoljena.

Ustvarite 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 vsebuje key, ki se začne z pk_live_.... Objavljivi ključi so javni že po zasnovi — varno jih lahko vključite v paket za čelno stran. Za vsa polja glejte referenco objavljivih ključev.

Vdelajte pripomoček na svoje spletno mesto

V dokumentaciji SDK-ja pripomočka so opisane tri možnosti integracije:

Vse tri možnosti sprejmejo isti publishableKey in prikažejo gumb mikrofona ter zvočni element med klicem.

context pripomočka je skrajšan na 12.000 znakov (približno 3.400 žetonov običajnega angleškega besedila) in se všteva v doplačilo glede na velikost poziva.

Webhooki načina pripomočka

Ko je mode="webhook", ThunderPhone ob vsakem začetku seje pokliče vaš webhook_url s koristnim tovorom web.incoming. Vrnite konfiguracijo agenta, ki jo želite zagnati za tega obiskovalca — uporablja isto odzivno shemo kot telefonski klici:

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

V poziv lahko vključite kontekst iz lastne seje (katera stranka brska, na kateri strani je) in zamenjate agente za posamezne uvedbe.

Spremljajte seje

Seje gradnika so prikazane v GET /v1/calls z direction="widget" — z enakim prepisom, posnetkom, ocenjevanjem in obračunavanjem kot telefonski klici. Filtrirajte po direction, da ustvarite nadzorno ploščo samo za gradnik.

Naslednji koraki