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 nettwidget

   Gå til Nettwidgeter i dashbordet og opprett en widget. Velg agenten du vil eksponere. Hver widget har sin egen publiserbare nøkkel (pk_live_...), som er trygg å inkludere i kode på klientsiden. Agenten bestemmes ut fra nøkkelen.

2. Konfigurer tillatte domener

   Legg til domenene der widgeten skal bygges inn, i den samme widgeten. Jokertegn støttes (f.eks. *.example.com). Listen hindrer at widgeten fungerer når noen kopierer nøkkelen din til et annet nettsted. Den er ikke autentisering, siden et skript utenfor en nettleser kan sende en hvilken som helst Origin-header. localhost er ikke automatisk tillatt i produksjon: legg den til i listen for å teste lokalt mot produksjons-API-et.

3. Velg overstyringer i nettleseren

   Hvis siden din angir language, voice eller context, aktiver hver av dem under Overstyringer i nettleseren. Nye widgeter tillater ingen, og en sesjonsforespørsel med en innstilling som er deaktivert, mislykkes med 400 override_not_allowed. Se Overstyringer i nettleseren.

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 flere rekvisitter tilpasser økten i stedet for utseendet -- alle videresendes til øktforespørselen når en samtale starter. Hver fungerer bare når widgetens publiserbare nøkkel tillater det under Nettleseroverstyringer; ellers mislykkes øktforespørselen med 400 override_not_allowed:

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.

Hver widgetsamtale er en samtale. Den teller mot organisasjonens grense for samtidige samtaler (20 pågående samtaler som standard, delt med telefon- og andre samtaler) og en widgetgrense på 25 aktive økter (eller grensen for samtidige samtaler, hvis den er høyere). Ved en av grensene kan en ny samtale ikke starte før en samtale avsluttes.

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.