Skip to main content
Webový widget umožňuje návštěvníkům vašeho webu zahájit konverzaci s hlasovým agentem s AI kliknutím a pomocí mikrofonu v prohlížeči. Jde o samostatné JavaScriptové / React SDK s vlastní referencí SDK — tento průvodce se zaměřuje na nastavení na straně ThunderPhone, které widget potřebuje.
Vše můžete provést bez cURL: stránka Webové widgety v dashboardu (/dashboard/web-widgets) vytvoří widget, nastaví jeho režim a agenta, spravuje povolené domény a poskytne vám kód pro vložení.

​
Předpoklady

1

Vytvořte agenta

Agent, jehož prompt a hlas budou použity během relace widgetu. Nastavte widget_enabled: true (výchozí hodnota).
2

Rozhodněte o režimu směrování

  • mode="agent" — jeden statický agent pro každý klíč. Nejjednodušší možnost.
  • mode="webhook" — váš server vybere agenta pro každého návštěvníka prostřednictvím webhooku web.incoming. Použijte pro přihlášené uživatele, A/B testy nebo směrování podle stránky.
3

Uveďte povolené domény

Publikovatelné klíče jsou omezené na origin. Musíte uvést každý název hostitele, který bude widget vkládat. Během lokálního vývoje jsou vždy povoleny localhost / 127.0.0.1.

​
Vytvořte publikovatelný klíč

Odpověď obsahuje key začínající na pk_live_.... Publikovatelné klíče jsou záměrně veřejné — můžete je bezpečně zahrnout do balíčku front-endu. Všechna pole najdete v referenci publikovatelných klíčů.
allowed_domains musí obsahovat alespoň jednu položku. *.example.com odpovídá subdoménám (např. api.example.com), ale nikoli samotné doméně. Samostatné zástupné znaky jako * nebo *.* jsou odmítnuty.

​
Vložte widget na svůj web

V dokumentaci SDK widgetu jsou popsány tři možnosti integrace:

Komponenta React

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

Headless hook

useThunderPhone() pro vlastní uživatelská rozhraní.

Značka skriptu CDN

ThunderPhone.mount({...}) pro weby bez bundleru.
Všechny tři přijímají stejný publishableKey a vykreslují tlačítko mikrofonu spolu se zvukovým prvkem během hovoru. context widgetu je zkrácen na 12 000 znaků (přibližně 3 400 tokenů běžného anglického textu) a započítává se do příplatku za velikost promptu.

​
Webhooky v režimu widgetu

Když je nastaveno mode="webhook", ThunderPhone při každém zahájení relace zavolá vaše webhook_url s daty web.incoming. Vraťte konfiguraci agenta, kterou chcete pro daného návštěvníka použít — řídí se stejným schématem odpovědi jako telefonní hovory:
Do promptu můžete přidat kontext z vlastní relace (který zákazník prochází web, na jaké stránce se nachází) a měnit agenty podle jednotlivých nasazení.

​
Sledování relací

Relace widgetu se zobrazují v GET /v1/calls s direction="widget" — mají stejný přepis, nahrávku, hodnocení i účtování jako telefonní hovory. Filtrujte podle direction a vytvořte si panel pouze pro widget.

​
Další kroky

Referenční dokumentace SDK widgetu

Podrobnosti integrace React / hook / CDN.

Dynamická konfigurace pro jednotlivé hovory

Implementujte tok mode="webhook" od začátku do konce.

Referenční dokumentace publikovatelných klíčů

Každé pole prostředku klíče.

API relací mikrofonu

Přeskočte widget; pro vlastní uživatelská rozhraní ovládejte LiveKit přímo.