Manustatav häälvidin

ThunderPhone'i manustatav häälvidin võimaldab sinu veebisaidi külastajatel rääkida AI-häälagendiga otse brauserist. Telefonikõnet pole vaja -- kasutajad klõpsavad nuppu ja alustavad ThunderPhone'i toel reaalajas häälevestlust.

Vidin kuvatakse klaasmorfse ribana, mis kohandub heledate ja tumedate teemadega ning mille aktsentvärve ja asukohta saab kohandada. Seda levitatakse npm-paketina @thunderphone/widget ning see on ilma bundlerita keskkondade jaoks saadaval ka CDN-i kaudu.

Eeltingimused

Enne vidina manustamist tee ThunderPhone Dashboardis need kolm sammu:

1. Loo avalik API-võti

   Ava juhtpaneeli seadetes Arendajad ja loo avalik võti. Avalikud võtmed algavad prefiksiga pk_live_ ning neid on turvaline lisada kliendipoolsesse koodi.

2. Seadista lubatud domeenid

   Lisa samades Arendajate seadetes domeenid, kuhu vidin manustatakse. Arenduseks on localhost alati lubatud. Metamärgid on toetatud (nt *.example.com).

3. Loo veebividin

   Ava juhtpaneelil Veebividinad ja loo vidin. Vali häälagent, mille soovid avaldada, ning kasutatav avalik võti. Häälagent määratakse automaatselt sinu avaliku võtme seadistuse põhjal.

Kiirstart

Installi pakett:

npm install @thunderphone/widget

Lisa vidin oma rakendusse:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

Valmis. Sinu kasutajad näevad klaasmorfset kõneriba, mis ühendab nad ühe klõpsuga sinu AI-häälagendiga.

Kohandamine

Vidinal on neli välimuse atribuuti:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Veel kolm atribuuti kohandavad välimuse asemel seanssi -- kõik need edastatakse kõne algamisel seansipäringusse:

Täieliku atribuutide tabeli leiad Reacti komponendi viitest.

Täielikult kohandatud kasutajaliidese jaoks kasuta headless-hooki, et hallata hääleseanssi oma liidese loomise ajal. Hook pakub reaalajas helitasemeid helile reageerivate visualiseeringute loomiseks.

Integratsioonivalikud

Vali sinu tehnoloogiakomplektiga sobiv integratsioonimeetod:

Stiilimine

Vidinal on sisseehitatud heledad ja tumedad teemad, mida juhib rekvisiit theme, ning aktsentvärv, mida juhib rekvisiit primaryColor. Põhjalikumaks kohandamiseks saad alistada CSS-i kohandatud omadusi ja klasse. Lisateavet leiad stiilimise juhendist.