Insluitbare spraakwidget

Voeg met enkele regels code een spraak-AI-agent toe aan elke website

Met de insluitbare ThunderPhone-spraakwidget kunnen bezoekers van je website rechtstreeks vanuit de browser met een AI-agent praten. Er is geen telefoongesprek nodig -- gebruikers klikken op een knop en starten een realtime spraakgesprek mogelijk gemaakt door ThunderPhone.

De widget wordt weergegeven als een glasachtige balk die zich aanpast aan lichte en donkere thema's, met aanpasbare accentkleuren en positionering. Hij wordt gedistribueerd als het npm-pakket @thunderphone/widget en is ook beschikbaar via CDN voor omgevingen zonder bundler.

Vereisten#

Voer deze drie stappen uit in het ThunderPhone-dashboard voordat je de widget insluit:

1. Een webwidget maken

   Ga in het dashboard naar Webwidgets en maak een widget. Selecteer de spraakagent die je wilt beschikbaar maken. Elke widget heeft een eigen publiceerbare sleutel (pk_live_...), die je veilig in client-sidecode kunt opnemen; de agent wordt op basis van de sleutel bepaald.

2. Toegestane domeinen configureren

   Voeg bij dezelfde widget de domeinen toe waarin deze wordt ingesloten. Jokertekens worden ondersteund (bijvoorbeeld *.example.com). De lijst voorkomt dat de widget werkt wanneer iemand je sleutel naar een andere site kopieert; het is geen authenticatie, omdat een script buiten een browser elke Origin-header kan versturen. localhost is niet automatisch toegestaan in productie: voeg het aan de lijst toe om lokaal te testen met de productie-API.

3. Browseroverschrijvingen kiezen

   Als je pagina language, voice of context instelt, schakel ze dan allemaal in onder Browseroverschrijvingen. Nieuwe widgets accepteren geen enkele instelling en een sessieverzoek met een uitgeschakelde instelling mislukt met 400 override_not_allowed. Zie Browseroverschrijvingen.

Snel aan de slag#

Installeer het pakket:

npm install @thunderphone/widget

Voeg de widget toe aan je 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"
    />
  )
}

Dat is alles. Je gebruikers zien een glasachtige oproepbalk die hen met één klik verbindt met je AI-agent.

Aanpassing#

De widget heeft vier props voor de weergave:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Drie andere props passen de sessie aan in plaats van het uiterlijk -- ze worden allemaal doorgestuurd naar het sessieverzoek wanneer een oproep start. Elk werkt alleen wanneer de publiceerbare sleutel van de widget dit toestaat onder Browseroverschrijvingen; anders mislukt het sessieverzoek met 400 override_not_allowed:

Zie de React-componentreferentie voor de volledige propstabel.

Gebruik voor een volledig aangepaste UI de headless-hook om de spraaksessie te beheren terwijl je je eigen interface bouwt. De hook biedt realtime audioniveaus voor het bouwen van audioreactieve visualisaties.

Elke widgetconversatie is een oproep. Deze telt mee voor de limiet voor gelijktijdige oproepen van je organisatie (standaard 20 actieve oproepen, gedeeld met telefoon- en andere oproepen) en voor een widgetlimiet van 25 actieve sessies (of je limiet voor gelijktijdige oproepen, als die hoger is). Bij het bereiken van een van beide limieten kan geen nieuwe conversatie starten totdat een oproep eindigt.

Integratieopties#

Kies de integratiemethode die bij je stack past:

Styling#

De widget wordt geleverd met ingebouwde lichte en donkere thema's die worden aangestuurd via de theme-prop, en een accentkleur die wordt aangestuurd via de primaryColor-prop. Voor uitgebreidere aanpassingen kun je aangepaste CSS-eigenschappen en klassen overschrijven. Bekijk de stylinggids voor meer informatie.