Widget

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 publicerbar API-nøgle

   Ga til Udviklere i dashboardets indstillinger, og opret en publicerbar nøgle. Publicerbare nøgler starter med pk_live_ og kan sikkert inkluderes i klientsidekode.

2. Konfigurer tilladte domæner

   Tilfoj de domæner, hvor widgetten skal indlejres, i de samme Udviklere-indstillinger. localhost er altid tilladt under udvikling. Jokere understottes (f.eks. *.example.com).

3. Opret en webwidget

   Ga til Webwidgets i dashboardet, og opret en widget. Vælg den agent, du vil eksponere, og den publicerbare nøgle, der skal bruges. Agenten findes automatisk ud fra konfigurationen af din publicerbare nøgle.

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"
/>

Yderligere tre props tilpasser sessionen frem for udseendet -- alle videresendes til sessionsanmodningen, nar et opkald starter:

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.

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.