Vložiteľný hlasový widget

Pridajte hlasového AI agenta na ľubovoľnú webovú stránku pomocou niekoľkých riadkov kódu

Vložiteľný hlasový widget ThunderPhone umožňuje návštevníkom vašej webovej stránky hovoriť s hlasovým agentom AI priamo z prehliadača. Telefónny hovor nie je potrebný -- používatelia kliknú na tlačidlo a začnú hlasovú konverzáciu v reálnom čase podporovanú službou ThunderPhone.

Widget sa vykresľuje ako panel so skleneným vzhľadom, ktorý sa prispôsobuje svetlým a tmavým témam, s prispôsobiteľnými zvýrazňujúcimi farbami a umiestnením. Distribuuje sa ako balík npm @thunderphone/widget a je dostupný aj prostredníctvom CDN pre prostredia bez bundlera.

Predpoklady#

Pred vložením widgetu dokončite tieto tri kroky v ThunderPhone Dashboard:

1. Vytvorenie webového widgetu

   V ovládacom paneli prejdite do sekcie Webové widgety a vytvorte widget. Vyberte agenta, ktorého chcete sprístupniť. Každý widget má vlastný publikovateľný kľúč (pk_live_...), ktorý môžete bezpečne zahrnúť do kódu na strane klienta; agent sa určí podľa kľúča.

2. Konfigurácia povolených domén

   Do toho istého widgetu pridajte domény, na ktorých bude vložený. Podporované sú zástupné znaky (napr. *.example.com). Zoznam zabráni fungovaniu widgetu, ak niekto skopíruje váš kľúč na inú lokalitu; nejde o overenie totožnosti, pretože skript mimo prehliadača môže odoslať ľubovoľnú hlavičku Origin. localhost nie je v produkcii povolený automaticky: pridajte ho do zoznamu na lokálne testovanie oproti produkčnému API.

3. Výber prepísaní prehliadača

   Ak vaša stránka nastavuje language, voice alebo context, povoľte každé z nich v sekcii Prepísania prehliadača. Nové widgety nepovoľujú žiadne a požiadavka na reláciu obsahujúca vypnuté nastavenie zlyhá s chybou 400 override_not_allowed. Pozrite si Prepísania prehliadača.

Rýchly začiatok#

Nainštalujte balík:

npm install @thunderphone/widget

Pridajte widget do svojej aplikácie:

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

Hotovo. Vaši používatelia uvidia panel hovoru so skleneným vzhľadom, ktorý ich jediným kliknutím spojí s vaším hlasovým agentom AI.

Prispôsobenie#

Widget má štyri vlastnosti vzhľadu:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Ďalšie tri vlastnosti prispôsobujú reláciu, nie vzhľad – všetky sa pri začatí hovoru odovzdajú v požiadavke na reláciu. Každá funguje iba vtedy, keď to publikovateľný kľúč widgetu povoľuje v časti Prepísania prehliadača; inak požiadavka na reláciu zlyhá s 400 override_not_allowed:

Úplnú tabuľku vlastností nájdete v referencii komponentu React.

Pre úplne vlastné používateľské rozhranie použite hook bez rozhrania na spravovanie hlasovej relácie pri vytváraní vlastného rozhrania. Hook poskytuje úrovne zvuku v reálnom čase na vytváranie vizualizácií reagujúcich na zvuk.

Každá konverzácia widgetu je hovor. Započítava sa do limitu súbežných hovorov vašej organizácie (predvolene 20 prebiehajúcich hovorov, zdieľaných s telefónnymi a inými hovormi) a do limitu widgetu 25 aktívnych relácií (alebo vášho limitu súbežných hovorov, ak je vyšší). Pri dosiahnutí ktoréhokoľvek limitu nemožno začať novú konverzáciu, kým sa hovor neskončí.

Možnosti integrácie#

Vyberte si spôsob integrácie, ktorý vyhovuje vášmu technologickému stacku:

Štýlovanie#

Widget obsahuje vstavané svetlé a tmavé témy ovládané propom theme a zvýrazňujúcu farbu ovládanú propom primaryColor. Pre rozsiahlejšie prispôsobenie môžete prepísať vlastné vlastnosti a triedy CSS. Podrobnosti nájdete v príručke štýlovania.