Open in

React-komponent

Bädda in ThunderPhones röstwidget i en React-applikation

Komponenten ThunderPhoneWidget renderar ett glasliknande samtalsfält med inbyggda kontroller för att stänga av ljudet, avsluta samtalet och visa anslutningsstatus. Det är det snabbaste sättet att lägga till röst-AI i en React-app.

Installation

npm install @thunderphone/widget

Grundläggande användning

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}

Egenskaper

Komponenten accepterar följande egenskaper via ThunderPhoneWidgetProps:

Egenskap	Typ	Krävs	Standard	Beskrivning
`publishableKey`	`string`	Ja	--	Publicerbar API-nyckel (`pk_live_...`) från Webbwidgetar i instrumentpanelen. Agenten fastställs automatiskt utifrån nyckelns widgetkonfiguration.
`theme`	`'light' \| 'dark'`	Nej	`'light'`	Färgschema. Tillämpar klassen `tp--light` eller `tp--dark` på widgetens rot.
`primaryColor`	`string`	Nej	`'#000000'` (ljus) / `'#ffffff'` (mörk)	CSS-färgsträng som används som accentfärg (samtalsknapp, vågform, aktiva indikatorer).
`title`	`string`	Nej	`'Voice assistant'`	Text som visas i widgetfältet.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nej	`'bottom-right'`	Fast position i visningsområdet för widgeten.
`apiBase`	`string`	Nej	`'https://api.thunderphone.com/v1'`	Åsidosättning av API-bas-URL.
`language`	`string`	Nej	--	Språkåsidosättning per session -- en språkkod eller språkinställning som `en`, `es` eller `fr-FR`. När den inte anges används agentens konfigurerade språk. Kräver `language` under nyckelns webbläsaråsidosättningar.
`voice`	`string`	Nej	--	Röståsidosättning per session -- ett röstnamn som `maria`. När den inte anges används agentens konfigurerade röst. Kräver `voice` under nyckelns webbläsaråsidosättningar.
`context`	`string`	Nej	--	Faktabaserad sid- eller webbplatskontext per session som skickas till agenten (till exempel information om sidan som besökaren tittar på). Kapas på serversidan till 12 000 tecken. Kräver `context` under nyckelns webbläsaråsidosättningar.
`onConnect`	`() => void`	Nej	--	Anropas när röstsessionen ansluts.
`onDisconnect`	`() => void`	Nej	--	Anropas när sessionen avslutas.
`onError`	`(error) => void`	Nej	--	Anropas vid fel. Objektet `error` har fälten `error` (kod) och `message`.
`className`	`string`	Nej	--	Ytterligare CSS-klassnamn som tillämpas på widgetbehållaren.
`ringtone`	`boolean \| string`	Nej	`false`	Spela en ringsignal under anslutningen. `true` för standardringsignalen eller en URL-sträng för anpassat ljud.

Exempel

Mörkt tema med anpassad färg

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
      title="Talk to our AI"
    />
  )
}

Anpassad position

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}

Språk, röst och kontext per session

Propsen language, voice och context vidarebefordras till sessionsbegäran (POST /widget/session) när ett samtal startar och åsidosätter röstagentens konfigurerade standardvärden för den sessionen. Aktivera varje prop du använder under Webbläsaråsidosättningar för widgeten i instrumentpanelen (eller i nyckelns allowed_overrides). Nya widgetar accepterar inga, och en sessionsbegäran som innehåller en som är avstängd misslyckas med 400 override_not_allowed; se Webbläsaråsidosättningar.

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function PricingPageWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      language="es"
      voice="maria"
      context="Page: Pricing. Plans: Starter $29/mo, Pro $99/mo. Annual billing saves 20%."
    />
  )
}

Använd context för att ge röstagenten faktakunskap om sidan som besökaren är på -- produktinformation, priser eller sidsspecifika vanliga frågor. Röstagenten behandlar den som sidinnehåll, inte som instruktioner. Den trunkeras på serversidan till 12 000 tecken.

Med händelseåteranrop

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function SupportWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      onConnect={() => {
        console.log('Voice session connected')
        analytics.track('widget_call_started')
      }}
      onDisconnect={() => {
        console.log('Voice session ended')
        analytics.track('widget_call_ended')
      }}
      onError={(error) => {
        console.error(`Widget error: ${error.error} - ${error.message}`)
      }}
    />
  )
}

Med anpassad stil

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function BrandedWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      primaryColor="#4a90d9"
      className="my-custom-widget"
    />
  )
}

.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}

Se stilguiden för alla tillgängliga CSS-klasser och anpassade egenskaper.

Med ringsignal

Spela upp ett telefonringsignal medan anslutningen upprättas:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}

Använd en anpassad ringsignal genom att ange en URL till en ljudfil:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>

Ringsignalen upprepas medan widgeten är i tillståndet connecting och tonas ut mjukt när agenten ansluter.

Med anpassad API-bas

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>

Felhantering

När återanropet onError utlöses får det ett felobjekt med två fält:

Fält	Typ	Beskrivning
`error`	`string`	Maskinläsbar felkod
`message`	`string`	Människoläsbar felbeskrivning

Vanliga felkoder omfattar domän ej tillåten, agent hittades inte och ogiltig API-nyckel.

Nästa steg

Headless-hook

Behöver du full kontroll över användargränssnittet? Använd hooken useThunderPhone i stället.

Stilsättning

Anpassa färger, storlekar och layout med anpassade CSS-egenskaper.