Vložitelný hlasový widget

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.

Widget ThunderPhone ve světlém a tmavém motivu s různými barvami zvýraznění

Předpoklady

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

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.

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

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.

Veřejně použitelné klíče (pk_live_...) nejsou stejné jako vaše tajné tokeny API. Veřejně použitelné klíče jsou určeny pro použití na straně klienta a jsou omezeny na relace widgetu na vašich povolených doménách. Tajný token API nikdy nepoužívejte v kódu na straně klienta.

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:

Vlastnost	Výchozí hodnota	Popis
`theme`	`'light'`	`'light'` pro bílé sklo, `'dark'` pro tmavé sklo
`primaryColor`	`'#000000'` (světlý) / `'#ffffff'` (tmavý)	Barva zvýraznění pro tlačítko spuštění, průběh zvukové vlny a indikátor připojování
`title`	`'Voice assistant'`	Text zobrazený ve widgetu
`position`	`'bottom-right'`	Roh zobrazovací oblasti: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Vlastnost	Popis
`language`	Přepsání jazyka pro jednotlivou relaci – kód nebo národní prostředí, například `en`, `es` nebo `fr-FR`
`voice`	Přepsání hlasu pro jednotlivou relaci – název hlasu, například `maria`
`context`	Faktický kontext stránky nebo webu předaný agentovi (na straně serveru zkrácený na 12 000 znaků)

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

Komponenta React

Předpřipravená komponenta uživatelského rozhraní s integrovanými ovládacími prvky hovoru a zobrazením stavu. Importujte, předejte props a máte hotovo.

Headless hook

Úplná kontrola nad uživatelským rozhraním. Hook useThunderPhone spravuje hlasovou relaci, zatímco si vytváříte vlastní rozhraní.

CDN / značka script

Není vyžadován bundler. Načtěte widget pomocí značky script pro statické weby, WordPress a další prostředí mimo React.

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.

Potřebujete pomoc? Kontaktujte nás na adrese support@thunderphone.com

​Předpoklady

​Rychlý start

​Přizpůsobení

​Možnosti integrace

Komponenta React

Headless hook

CDN / značka script

​Stylování

Předpoklady

Rychlý start

Přizpůsobení

Možnosti integrace

Stylování