Vdeljiv glasovni pripomoček

Vdeljivi glasovni pripomoček ThunderPhone obiskovalcem vašega spletnega mesta omogoča, da se z agentom UI pogovarjajo neposredno iz brskalnika. Telefonski klic ni potreben -- uporabniki kliknejo gumb in začnejo glasovni pogovor v realnem času, ki ga omogoča ThunderPhone.

Pripomoček se prikaže kot steklena vrstica, ki se prilagaja svetlim in temnim temam ter omogoča prilagodljive poudarjene barve in položaj. Distribuira se kot paket npm @thunderphone/widget, za okolja brez združevalnika pa je na voljo tudi prek CDN-ja.

Predpogoji

Pred vdelavo pripomočka v nadzorni plošči ThunderPhone dokončajte te tri korake:

1. Ustvarite ključ API za objavo

   V nastavitvah nadzorne plošče odprite Razvijalci in ustvarite ključ za objavo. Ključi za objavo se začnejo s pk_live_ in jih lahko varno vključite v kodo na strani odjemalca.

2. Konfigurirajte dovoljene domene

   V istih nastavitvah Razvijalci dodajte domene, na katerih bo pripomoček vdelan. localhost je vedno dovoljen za razvoj. Podprti so nadomestni znaki (na primer *.example.com).

3. Ustvarite spletni pripomoček

   Na nadzorni plošči odprite Spletni pripomočki in ustvarite pripomoček. Izberite agenta, ki ga želite izpostaviti, ter ključ za objavo, ki ga želite uporabiti. Agent se samodejno določi iz konfiguracije vašega ključa za objavo.

Hiter začetek

Namestite paket:

npm install @thunderphone/widget

Dodajte pripomoček v svojo aplikacijo:

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 vse. Vaši uporabniki bodo videli stekleno vrstico za klic, ki jih z enim klikom poveže z vašim agentom UI.

Prilagajanje

Pripomoček ima štiri lastnosti videza:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Še tri lastnosti prilagajajo sejo namesto videza -- vse se ob začetku klica posredujejo zahtevi za sejo:

Za celotno tabelo lastnosti glejte referenco komponente React.

Za popolnoma prilagojen uporabniški vmesnik uporabite headless hook za upravljanje glasovne seje, medtem ko izdelujete svoj vmesnik. Hook omogoča dostop do ravni zvoka v realnem času za izdelavo vizualizacij, odzivnih na zvok.

Možnosti integracije

Izberite način integracije, ki ustreza vašemu okolju:

Slog

Gradnik vključuje vgrajeni svetlo in temno temo, ki ju nadzoruje lastnost theme, ter poudarno barvo, ki jo nadzoruje lastnost primaryColor. Za podrobnejšo prilagoditev lahko preglasite lastnosti CSS po meri in razrede. Za podrobnosti si oglejte vodnik za oblikovanje.