Open in

React-komponentti

Upota ThunderPhone-puhewidgetti React-sovellukseen

ThunderPhoneWidget-komponentti renderöi lasimaisen puhelupalkin, jossa on sisäänrakennetut hallintatoiminnot mykistämiseen, puhelun lopettamiseen ja yhteyden tilan näyttämiseen. Se on nopein tapa lisätä puhetekoäly React-sovellukseen.

Asennus

npm install @thunderphone/widget

Peruskäyttö

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

Propit

Komponentti hyväksyy seuraavat propit ThunderPhoneWidgetProps-rajapinnan kautta:

Ominaisuus	Tyyppi	Pakollinen	Oletus	Kuvaus
`publishableKey`	`string`	Kyllä	--	Julkaistava API-avain (`pk_live_...`) hallintapaneelin kohdasta Verkkowidgetit. Agentti määritetään automaattisesti avaimen widget-määrityksestä.
`theme`	`'light' \| 'dark'`	Ei	`'light'`	Värimalli. Lisää `tp--light`- tai `tp--dark`-luokan widgetin juurielementtiin.
`primaryColor`	`string`	Ei	`'#000000'` (vaalea) / `'#ffffff'` (tumma)	CSS-värimerkkijono, jota käytetään korostusvärinä (soittopainike, aaltomuoto, aktiiviset ilmaisimet).
`title`	`string`	Ei	`'Voice assistant'`	Widget-palkissa näytettävä teksti.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ei	`'bottom-right'`	Widgetin kiinteä sijainti näkymässä.
`apiBase`	`string`	Ei	`'https://api.thunderphone.com/v1'`	API-perusosoitteen ohitus.
`language`	`string`	Ei	--	Istuntokohtainen kieliohitus -- kielikoodi tai alueasetus, kuten `en`, `es` tai `fr-FR`. Jos sitä ei ole asetettu, käytetään agentin määritettyä kieltä. Edellyttää `language`-asetusta avaimen selaimen ohituksissa.
`voice`	`string`	Ei	--	Istuntokohtainen äänen ohitus -- äänen nimi, kuten `maria`. Jos sitä ei ole asetettu, käytetään agentin määritettyä ääntä. Edellyttää `voice`-asetusta avaimen selaimen ohituksissa.
`context`	`string`	Ei	--	Agentille välitettävä istuntokohtainen sivun tai sivuston faktapohjainen konteksti (esimerkiksi tiedot sivusta, jota kävijä tarkastelee). Katkaistaan palvelinpuolella 12 000 merkkiin. Edellyttää `context`-asetusta avaimen selaimen ohituksissa.
`onConnect`	`() => void`	Ei	--	Kutsutaan, kun puheistunto yhdistyy onnistuneesti.
`onDisconnect`	`() => void`	Ei	--	Kutsutaan, kun istunto päättyy.
`onError`	`(error) => void`	Ei	--	Kutsutaan virhetilanteissa. `error`-objektilla on kentät `error` (koodi) ja `message`.
`className`	`string`	Ei	--	Widget-säilöön lisättävä CSS-luokan nimi.
`ringtone`	`boolean \| string`	Ei	`false`	Soita soittoääni yhdistämisen aikana. `true` käyttää oletussoittoääntä, tai voit antaa URL-merkkijonon mukautettua ääntä varten.

Esimerkkejä

Tumma teema mukautetulla värillä

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"
    />
  )
}

Mukautettu sijainti

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

Istuntokohtainen kieli, ääni ja konteksti

language-, voice- ja context-propit välitetään istuntopyyntöön (POST /widget/session) puhelun alkaessa, jolloin ne ohittavat agentin kyseiselle istunnolle määritetyt oletusasetukset. Ota jokainen käyttämäsi propi käyttöön kojelaudan widgetin Selaimen ohitukset -kohdassa (tai avaimen allowed_overrides-asetuksessa). Uudet widgetit eivät hyväksy mitään ohituksia, ja istuntopyyntö, jossa on pois käytöstä oleva ohitus, epäonnistuu virheellä 400 override_not_allowed; katso Selaimen ohitukset.

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%."
    />
  )
}

Käytä context-proppia antaaksesi agentille faktatietoa sivusta, jolla kävijä on -- tuotetietoja, hinnoittelua tai sivukohtaisia usein kysyttyjä kysymyksiä. Agentti käsittelee sitä sivun sisältönä, ei ohjeina. Se katkaistaan palvelinpuolella 12 000 merkkiin.

Tapahtumakutsujen kanssa

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}`)
      }}
    />
  )
}

Mukautetulla tyylillä

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;
}

Katso kaikki käytettävissä olevat CSS-luokat ja mukautetut ominaisuudet tyylioppaasta.

Soittoäänellä

Toista puhelimen sointiääni yhteyden muodostamisen aikana:

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

Käytä mukautettua soittoääntä välittämällä äänitiedoston URL-osoite:

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

Soittoääni toistuu silmukassa, kun widget on connecting-tilassa, ja vaimenee pehmeästi, kun agentti yhdistyy.

Mukautetulla API-perusosoitteella

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

Virheenkäsittely

Kun onError-takaisinkutsu käynnistyy, se vastaanottaa virheobjektin, jossa on kaksi kenttää:

Kenttä	Tyyppi	Kuvaus
`error`	`string`	Koneellisesti luettava virhekoodi
`message`	`string`	Ihmiselle luettava virheen kuvaus

Yleisiä virhekoodeja ovat esimerkiksi toimialue ei sallittu, agenttia ei löytynyt ja virheellinen API-avain.

Seuraavat vaiheet

Headless-hook

Tarvitsetko täyden hallinnan käyttöliittymään? Käytä sen sijaan useThunderPhone-hookia.

Tyylittely

Mukauta värejä, kokoja ja asettelua CSS-mukautetuilla ominaisuuksilla.