Widget

Innebyggbar stemmewidget

Legg til en AI-stemmeagent på et hvilket som helst nettsted med noen få kodelinjer

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.

Forutsetninger#

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

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

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

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

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:

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

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:

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.