Integrerbar stemmewidget

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.

ThunderPhone widget in light and dark themes with various accent colors

Forudsætninger

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

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.

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

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.

Publicerbare nøgler (pk_live_...) er ikke det samme som dine hemmelige API-tokens. Publicerbare nøgler er designet til brug pa klientsiden og er afgrænset til widgetsessioner pa dine tilladte domæner. Brug aldrig dit hemmelige API-token i klientsidekode.

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:

Prop	Standard	Beskrivelse
`theme`	`'light'`	`'light'` til hvidt glas, `'dark'` til morkt glas
`primaryColor`	`'#000000'` (lys) / `'#ffffff'` (mork)	Accentfarve til startknappen, bolgeformen og forbindelsesindikatoren
`title`	`'Voice assistant'`	Tekst, der vises i widgetten
`position`	`'bottom-right'`	Hjorne i viewporten: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Prop	Beskrivelse
`language`	Sprogtilsidesættelse pr. session — en kode eller landestandard som `en`, `es` eller `fr-FR`
`voice`	Stemmetilsidesættelse pr. session — et stemmenavn som `maria`
`context`	Faktuel side- eller webstedskontekst, der sendes til agenten (afkortes pa serversiden til 12.000 tegn)

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:

React-komponent

Færdigbygget UI-komponent med indbyggede opkaldskontroller og statusvisning. Importer, angiv props, færdig.

Headless-hook

Fuld kontrol over brugergrænsefladen. Hooket useThunderPhone administrerer stemmesessionen, mens du bygger din egen brugergrænseflade.

CDN / script-tag

Ingen bundler nødvendig. Indlæs widgetten via et script-tag til statiske websites, WordPress og andre ikke-React-miljøer.

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.

Brug for hjælp? Kontakt os på support@thunderphone.com

​Forudsætninger

​Hurtig start

​Tilpasning

​Integrationsmuligheder

React-komponent

Headless-hook

CDN / script-tag

​Styling

Forudsætninger

Hurtig start

Tilpasning

Integrationsmuligheder

Styling