Widget

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 veřejně použitelný klíč API

   V nastavení dashboardu přejděte do sekce Vývojáři a vytvořte veřejně použitelný klíč. Veřejně použitelné klíče začínají na pk_live_ a lze je bezpečně zahrnout do kódu na straně klienta.

2. Nakonfigurujte povolené domény

   Ve stejném nastavení sekce Vývojáři přidejte domény, na kterých bude widget vložen. Pro vývoj je vždy povolena doména localhost. Jsou podporovány zástupné znaky (např. *.example.com).

3. Vytvořte webový widget

   V dashboardu přejděte do sekce Webové widgety a vytvořte widget. Vyberte agenta, kterého chcete zpřístupnit, a veřejně použitelný klíč, který chcete použít. Agent se automaticky určí z konfigurace vašeho veřejně použitelného klíč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 přizpůsobují relaci namísto vzhledu – všechny se při zahájení hovoru předávají do požadavku relace:

Ú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.

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.