Skip to main content
A webes widget lehetővé teszi, hogy webhelye látogatói a böngésző mikrofonját használva, kattintással indított beszélgetést folytassanak egy AI-ügynökkel. Ez egy különálló JavaScript-/React SDK saját SDK-referenciával — ez az útmutató a widget működéséhez szükséges ThunderPhone-oldali beállításokra összpontosít.
Mindezt cURL nélkül is elvégezheti: a vezérlőpult Webes widgetek oldala (/dashboard/web-widgets) létrehozza a widgetet, beállítja annak módját és ügynökét, kezeli az engedélyezett domaineket, és átadja a beágyazási kódrészletet.

​
Előfeltételek

1

Ügynök létrehozása

Az az ügynök, amelynek promptja és hangja futtatja a widget munkamenetét. Állítsa be a widget_enabled: true értéket (ez az alapértelmezett).
2

Az útválasztási mód kiválasztása

  • mode="agent" — kulcsonként egy statikus ügynök. Ez a legegyszerűbb.
  • mode="webhook" — a szervere látogatónként választja ki az ügynököt egy web.incoming webhook segítségével. Használja ezt bejelentkezett felhasználókhoz, A/B tesztekhez vagy oldalankénti útválasztáshoz.
3

Az engedélyezett domainek felsorolása

A publikálható kulcsok origóhoz kötöttek. Meg kell adnia minden olyan gazdagépnevet, amely beágyazza a widgetet. A localhost / 127.0.0.1 helyi fejlesztés során mindig engedélyezett.

​
Publikálható kulcs létrehozása

A válasz tartalmaz egy pk_live_... előtaggal kezdődő key értéket. A publikálható kulcsok kialakításuk szerint nyilvánosak — biztonságosan beépíthetők a front-end csomagjába. Az összes mezőért lásd a Publikálható kulcsok referenciáját.
Az allowed_domains mezőnek legalább egy bejegyzést kell tartalmaznia. A *.example.com illeszkedik az aldomainekre (például api.example.com), de nem az alapszintű domainre. Az olyan általános helyettesítő karakterek, mint a * vagy a *.*, elutasításra kerülnek.

​
A widget beágyazása a webhelyére

Három integrációs lehetőséget ismertet a widget SDK dokumentációja:

React-komponens

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

Headless hook

useThunderPhone() egyéni felhasználói felületekhez.

CDN-szkriptcímke

ThunderPhone.mount({...}) csomagkezelőt nem használó webhelyekhez.
Mindhárom ugyanazt a publishableKey értéket fogadja el, és megjeleníti a mikrofon gombot, valamint a hívás közbeni hangelemet. A widget context értéke 12 000 karakterre van csonkítva (ez nagyjából 3400 tokennyi tipikus angol szöveg), és beleszámít a promptméret-felárba.

​
Webhookok widget módban

Ha a mode="webhook", a ThunderPhone minden munkamenet indításakor meghívja az Ön webhook_url végpontját egy web.incoming adattartalommal. Adja vissza az adott látogatóhoz futtatni kívánt ügynökkonfigurációt — ez ugyanazt a válaszsémát követi, mint a telefonhívások:
Saját munkamenetéből származó környezetet is beépíthet a promptba (melyik ügyfél böngészik, melyik oldalon tart), és bevezetésenként cserélheti az ügynököket.

​
Munkamenetek megfigyelése

A widget-munkamenetek a GET /v1/calls végponton jelennek meg direction="widget" értékkel — ugyanazzal az átirattal, felvétellel, értékeléssel és számlázással, mint a telefonhívások esetében. Szűrjön a direction alapján, hogy csak widgetes irányítópultot hozzon létre.

​
Következő lépések

Widget SDK-referencia

React / hook / CDN integrációs részletek.

Dinamikus hívásonkénti konfiguráció

Valósítsa meg a mode="webhook" folyamatot teljes körűen.

Publikálható kulcsok referenciája

A kulcserőforrás minden mezője.

Mikrofonmunkamenetek API-ja

Hagyja ki a widgetet; egyéni felhasználói felületekhez közvetlenül vezérelje a LiveKit-et.