Integrerbar stemmewidget

Tilføj en AI-stemmeagent til ethvert website med få linjer kode

ThunderPhone's indlejrbare stemmewidget lader dine webstedsbesogende tale med en AI-agent direkte fra browseren. Intet telefonopkald er nodvendigt -- brugere klikker pa en knap og starter en stemmesamtale i realtid drevet af ThunderPhone.

Widgetten vises som en glasmorfisk bjælke, der tilpasser sig lyse og morke temaer, med tilpasningsbare accentfarver og placering. Den distribueres som npm-pakken @thunderphone/widget og er ogsa tilgængelig via CDN til miljoer uden bundler.

Forudsætninger#

For du indlejrer widgetten, skal du gennemfore disse tre trin i ThunderPhone Dashboard:

1. Opret en webwidget

   Gå til Webwidgets i dashboardet, og opret en widget. Vælg den agent, du vil gøre tilgængelig. Hver widget har sin egen publicerbare nøgle (pk_live_...), som det er sikkert at inkludere i klientkode; agenten bestemmes ud fra nøglen.

2. Konfigurer tilladte domæner

   Tilføj de domæner, hvor widgetten skal indlejres, på den samme widget. Jokertegn understøttes (f.eks. *.example.com). Listen forhindrer widgetten i at fungere, hvis nogen kopierer din nøgle til et andet website; den er ikke godkendelse, da et script uden for en browser kan sende enhver Origin-header. localhost er ikke automatisk tilladt i produktion: Føj det til listen for at teste lokalt mod produktions-API'et.

3. Vælg browseroverskrivelser

   Hvis din side angiver language, voice eller context, skal du aktivere dem hver især under Browseroverskrivelser. Nye widgets accepterer ingen, og en sessionsanmodning med en indstilling, der er slået fra, fejler med 400 override_not_allowed. Se Browseroverskrivelser.

Hurtig start#

Installer pakken:

npm install @thunderphone/widget

Indsæt widgetten i din app:

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

Det er det. Dine brugere ser en glasmorfisk opkaldsbjælke, der forbinder dem med din AI-agent med et enkelt klik.

Tilpasning#

Widgetten har fire props til udseende:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Tre yderligere props tilpasser sessionen frem for udseendet -- alle videresendes til sessionsanmodningen, når et opkald starter. Hver fungerer kun, når widgettens publicerbare nøgle tillader det under browsertilsidesættelser; ellers mislykkes sessionsanmodningen med 400 override_not_allowed:

Se React-komponentreferencen for den komplette propstabel.

Brug headless-hooket til at administrere stemmesessionen, mens du bygger din egen grænseflade, hvis du vil have et fuldt tilpasset UI. Hooket eksponerer lydniveauer i realtid til opbygning af lydreaktive visualiseringer.

Hver widgetsamtale er et opkald. Den tæller med i din organisations grænse for samtidige opkald (20 igangværende opkald som standard, delt med telefonopkald og andre opkald) og en widgetgrænse på 25 aktive sessioner (eller din grænse for samtidige opkald, hvis den er højere). Ved en af grænserne kan en ny samtale ikke starte, før et opkald afsluttes.

Integrationsmuligheder#

Vælg den integrationsmetode, der passer til din stack:

Styling#

Widgetten leveres med indbyggede lyse og mørke temaer, der styres af proppen theme, samt en accentfarve, der styres af proppen primaryColor. For mere omfattende tilpasning kan du overskrive brugerdefinerede CSS-egenskaber og klasser. Se stylingguiden for detaljer.