Vložitelný hlasový widget

Přidejte hlasového AI agenta na libovolný web pomocí několika řádků kódu

Vložitelný hlasový widget ThunderPhone umožňuje návštěvníkům vašeho webu mluvit s AI agentem přímo z prohlížeče. Není potřeba žádný telefonní hovor – uživatelé kliknou na tlačítko a zahájí hlasovou konverzaci v reálném čase využívající ThunderPhone.

Widget se zobrazuje jako skleněná lišta, která se přizpůsobí světlým a tmavým motivům, s přizpůsobitelnými barvami zvýraznění a umístěním. Je distribuován jako balíček npm @thunderphone/widget a pro prostředí bez bundleru je k dispozici také prostřednictvím CDN.

Předpoklady#

Před vložením widgetu dokončete tyto tři kroky v Dashboardu ThunderPhone:

1. Vytvořte webový widget

   V dashboardu přejděte do sekce Webové widgety a vytvořte widget. Vyberte agenta, kterého chcete zpřístupnit. Každý widget má vlastní publikovatelný klíč (pk_live_...), který lze bezpečně zahrnout do kódu na straně klienta; agent se určí podle klíče.

2. Nakonfigurujte povolené domény

   Do stejného widgetu přidejte domény, na kterých bude vložen. Zástupné znaky jsou podporovány (např. *.example.com). Seznam brání tomu, aby widget fungoval, když někdo zkopíruje váš klíč na jiný web; nejde o ověřování, protože skript mimo prohlížeč může odeslat libovolnou hlavičku Origin. localhost není v produkci povolen automaticky: pro místní testování vůči produkčnímu API jej přidejte do seznamu.

3. Zvolte přepsání nastavení prohlížeče

   Pokud vaše stránka nastavuje language, voice nebo context, zapněte každé z nich v části Přepsání nastavení prohlížeče. Nové widgety nepovolují žádné z nich a požadavek relace obsahující vypnuté nastavení selže s 400 override_not_allowed. Viz Přepsání nastavení prohlížeče.

Rychlý start#

Nainstalujte balíček:

npm install @thunderphone/widget

Vložte widget do aplikace:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

To je vše. Uživatelé uvidí skleněnou lištu pro volání, která je jedním kliknutím spojí s vaším AI agentem.

Přizpůsobení#

Widget má čtyři vlastnosti vzhledu:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Další tři vlastnosti upravují relaci, nikoli vzhled – všechny se při zahájení hovoru předávají v požadavku na relaci. Každá funguje pouze tehdy, když ji veřejný klíč widgetu povoluje v části Přepsání v prohlížeči; jinak požadavek na relaci selže s chybou 400 override_not_allowed:

Úplnou tabulku vlastností naleznete v referenci komponenty React.

Pro zcela vlastní uživatelské rozhraní použijte headless hook ke správě hlasové relace při vytváření vlastního rozhraní. Hook zpřístupňuje úrovně zvuku v reálném čase pro vytváření vizualizací reagujících na zvuk.

Každá konverzace ve widgetu je hovor. Započítává se do limitu souběžných hovorů vaší organizace (ve výchozím nastavení 20 probíhajících hovorů, sdílených s telefonními a dalšími hovory) a do limitu widgetu 25 aktivních relací (nebo do vašeho limitu souběžných hovorů, pokud je vyšší). Při dosažení kteréhokoli limitu nelze zahájit novou konverzaci, dokud hovor neskončí.

Možnosti integrace#

Zvolte způsob integrace, který vyhovuje vašemu stacku:

Stylování#

Widget nabízí integrovaná světlá a tmavá témata ovládaná pomocí prop theme a zvýrazňující barvu ovládanou pomocí prop primaryColor. Pro pokročilejší přizpůsobení můžete přepsat vlastní vlastnosti a třídy CSS. Podrobnosti naleznete v průvodci stylováním.