Innebyggbar stemmewidget

Den innebyggbare stemmewidgeten fra ThunderPhone lar besøkende på nettstedet ditt snakke med en AI-agent direkte fra nettleseren. Ingen telefonsamtale nødvendig — brukere klikker på en knapp og starter en stemmesamtale i sanntid drevet av ThunderPhone. Widgeten vises som en glassmorfisk linje som tilpasser seg lyse og mørke temaer, med tilpassbare aksentfarger og plassering. Den distribueres som npm-pakken @thunderphone/widget og er også tilgjengelig via CDN for miljøer uten bundler.

ThunderPhone widget in light and dark themes with various accent colors

Forutsetninger

Før du bygger inn widgeten, fullfør disse tre trinnene i ThunderPhone Dashboard:

Opprett en publiserbar API-nøkkel

Gå til Utviklere i dashboardinnstillingene og opprett en publiserbar nøkkel. Publiserbare nøkler starter med pk_live_ og kan trygt inkluderes i klientsidekode.

Konfigurer tillatte domener

I de samme utviklerinnstillingene legger du til domenene der widgeten skal bygges inn. localhost er alltid tillatt for utvikling. Jokertegn støttes (f.eks. *.example.com).

Opprett en webwidget

Gå til Webwidgeter i dashboardet og opprett en widget. Velg agenten du vil gjøre tilgjengelig, og den publiserbare nøkkelen som skal brukes. Agenten bestemmes automatisk fra konfigurasjonen av den publiserbare nøkkelen din.

Publiserbare nøkler (pk_live_...) er ikke det samme som de hemmelige API-tokenene dine. Publiserbare nøkler er laget for bruk på klientsiden og er begrenset til widgetøkter på de tillatte domenene dine. Bruk aldri det hemmelige API-tokenet ditt i klientsidekode.

Hurtigstart

Installer pakken:

npm install @thunderphone/widget

Legg widgeten inn i appen din:

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 var alt. Brukerne dine vil se en glassmorfisk samtalelinje som kobler dem til AI-agenten din med ett enkelt klikk.

Tilpasning

Widgeten har fire props for utseende:

Prop	Standard	Beskrivelse
`theme`	`'light'`	`'light'` for hvitt glass, `'dark'` for mørkt glass
`primaryColor`	`'#000000'` (lys) / `'#ffffff'` (mørk)	Aksentfarge for startknappen, bølgeformen og tilkoblingsindikatoren
`title`	`'Voice assistant'`	Tekst som vises i widgeten
`position`	`'bottom-right'`	Hjørne i visningsområdet: `'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"
/>

Tre ekstra props tilpasser økten i stedet for utseendet — alle videresendes til øktforespørselen når en samtale starter:

Prop	Beskrivelse
`language`	Språkoverstyring per økt — en kode eller lokalitet som `en`, `es` eller `fr-FR`
`voice`	Stemmeoverstyring per økt — et stemmenavn som `maria`
`context`	Faktisk side- eller nettstedskontekst som sendes til agenten (avkortes på serversiden til 12 000 tegn)

Se referansen for React-komponenten for den fullstendige propstabellen. For et fullstendig tilpasset brukergrensesnitt kan du bruke den headless hooken til å administrere stemmeøkten mens du bygger ditt eget grensesnitt. Hooken gir deg lydnivåer i sanntid for å bygge lydreaktive visualiseringer.

Integrasjonsalternativer

Velg integrasjonsmetoden som passer teknologistakken din:

React-komponent

Ferdigbygd UI-komponent med innebygde samtalekontroller og statusvisning. Importer, send inn props, ferdig.

Headless-hook

Full kontroll over UI-et. Hooken useThunderPhone håndterer stemmeøkten mens du bygger ditt eget grensesnitt.

CDN / script-tag

Ingen bundler nødvendig. Last inn widgeten via en script-tag for statiske nettsteder, WordPress og andre ikke-React-miljøer.

Stilsetting

Widgeten leveres med innebygde lyse og mørke temaer som styres av propen theme, og en aksentfarge som styres av propen primaryColor. For mer omfattende tilpasning kan du overstyre egendefinerte CSS-egenskaper og klasser. Se veiledningen for stilsetting for detaljer.

Trenger du hjelp? Kontakt oss på support@thunderphone.com

​Forutsetninger

​Hurtigstart

​Tilpasning

​Integrasjonsalternativer

React-komponent

Headless-hook

CDN / script-tag

​Stilsetting

Forutsetninger

Hurtigstart

Tilpasning

Integrasjonsalternativer

Stilsetting