Vložiteľný hlasový widget

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. Vytvorte publikovateľný kľúč API

   Prejdite do sekcie Vývojári v nastaveniach dashboardu a vytvorte publikovateľný kľúč. Publikovateľné kľúče začínajú reťazcom pk_live_ a je bezpečné ich zahrnúť do kódu na strane klienta.

2. Nakonfigurujte povolené domény

   V rovnakých nastaveniach Vývojári pridajte domény, do ktorých bude widget vložený. localhost je vždy povolený na vývoj. Podporované sú zástupné znaky (napr. *.example.com).

3. Vytvorte webový widget

   Prejdite do sekcie Webové widgety v dashboarde a vytvorte widget. Vyberte agenta, ktorého chcete sprístupniť, a publikovateľný kľúč, ktorý chcete použiť. Agent sa automaticky určí z konfigurácie vášho publikovateľného kľúč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"
/>

Tri ďalšie vlastnosti prispôsobujú reláciu namiesto vzhľadu -- všetky sa pri začatí hovoru odovzdajú požiadavke na reláciu:

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

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.