Manustatav häälvidin

Lisa mõne koodireaga hääl-AI-agent mis tahes veebisaidile

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 veebividin

   Ava juhtpaneelil Veebividinad ja loo vidin. Vali häälagent, mille soovid avaldada. Igal vidinal on oma avalik võti (pk_live_...), mille võib turvaliselt lisada kliendipoolsesse koodi; häälagent määratakse võtme alusel.

2. Seadista lubatud domeenid

   Lisa samale vidinale domeenid, kuhu see manustatakse. Metamärgid on toetatud (nt *.example.com). Loend takistab vidina töötamist, kui keegi kopeerib sinu võtme teisele saidile; see ei ole autentimine, kuna brauseriväline skript võib saata mis tahes Origin päise. localhost ei ole tootmiskeskkonnas automaatselt lubatud: lisa see loendisse, et testida kohalikult tootmise API-ga.

3. Vali brauseri alistused

   Kui sinu leht määrab language, voice või context, lülita need kõik sisse jaotises Brauseri alistused. Uued vidinad ei aktsepteeri ühtegi ning seansitaotlus, mis sisaldab väljalülitatud sätet, nurjub koodiga 400 override_not_allowed. Vaata Brauseri alistused.

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õiked edastatakse kõne alustamisel seansipäringusse. Igaüks neist toimib ainult siis, kui vidina avaldatav võti lubab selle jaotises Brauseri alistused; vastasel juhul nurjub seansipäring veaga 400 override_not_allowed:

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.

Iga vidinavestlus on kõne. See arvestatakse sinu organisatsiooni samaaegsete kõnede piirangu hulka (vaikimisi 20 käimasolevat kõnet, mida jagatakse telefoni- ja muude kõnedega) ning vidina piirang on 25 aktiivset seanssi (või sinu samaaegsete kõnede piirang, kui see on suurem). Kummagi piirangu saavutamisel ei saa uut vestlust alustada enne, kui kõne lõpeb.

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.