Įterpiamas balso valdiklis

Pridėkite balso DI agentą prie bet kurios svetainės keliomis kodo eilutėmis

Įterpiamas ThunderPhone balso valdiklis leidžia jūsų svetainės lankytojams kalbėtis su DI agentu tiesiogiai naršyklėje. Nereikia skambinti telefonu -- naudotojai spusteli mygtuką ir pradeda ThunderPhone palaikomą balso pokalbį realiuoju laiku.

Valdiklis rodomas kaip stiklo efekto juosta, prisitaikanti prie šviesių ir tamsių temų, su tinkinamomis akcento spalvomis ir padėtimi. Jis platinamas kaip @thunderphone/widget npm paketas ir taip pat pasiekiamas per CDN aplinkoms be paketų rinkiklio.

Būtinosios sąlygos#

Prieš įterpdami valdiklį, atlikite šiuos tris veiksmus ThunderPhone valdymo skydelyje:

1. Sukurkite žiniatinklio valdiklį

   Valdymo skydelyje eikite į Žiniatinklio valdikliai ir sukurkite valdiklį. Pasirinkite agentą, kurį norite pateikti. Kiekvienas valdiklis turi savo viešinimo raktą (pk_live_...), kurį saugu įtraukti į kliento pusės kodą; agentas nustatomas pagal raktą.

2. Sukonfigūruokite leidžiamus domenus

   Tame pačiame valdiklyje pridėkite domenus, kuriuose jis bus įterptas. Palaikomi pakaitos simboliai (pvz., *.example.com). Šis sąrašas neleidžia valdikliui veikti, kai kas nors nukopijuoja jūsų raktą į kitą svetainę; tai nėra autentifikavimas, nes scenarijus ne naršyklėje gali siųsti bet kokią Origin antraštę. Gamybinėje aplinkoje localhost automatiškai neleidžiamas: pridėkite jį į sąrašą, kad galėtumėte vietoje testuoti su gamybine API.

3. Pasirinkite naršyklės perrašymus

   Jei jūsų puslapis nustato language, voice arba context, įjunkite kiekvieną iš jų skiltyje Naršyklės perrašymai. Nauji valdikliai nepriima nė vieno, o sesijos užklausa su išjungtu nustatymu nepavyksta ir grąžina 400 override_not_allowed. Žr. Naršyklės perrašymai.

Greita pradžia#

Įdiekite paketą:

npm install @thunderphone/widget

Įtraukite valdiklį į savo programą:

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

Viskas. Jūsų naudotojai matys stiklo efekto skambučių juostą, kuri vienu spustelėjimu sujungs juos su jūsų DI agentu.

Tinkinimas#

Valdiklis turi keturias išvaizdos ypatybes:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Trys papildomos ypatybės tinkina sesiją, o ne išvaizdą -- visos jos perduodamos į sesijos užklausą pradėjus skambutį. Kiekviena veikia tik tada, kai valdiklio viešinamas raktas ją leidžia skiltyje Naršyklės pakeitimai; kitu atveju sesijos užklausa nepavyksta ir pateikiama klaida 400 override_not_allowed:

Visą ypatybių lentelę rasite React komponento nuorodoje.

Jei norite visiškai pritaikytos sąsajos, naudokite begalvę kablio funkciją, kad valdytumėte balso seansą kurdami savo sąsają. Kablio funkcija pateikia garso lygius realiuoju laiku, skirtus į garsą reaguojančioms vizualizacijoms kurti.

Kiekvienas pokalbis valdiklyje yra skambutis. Jis įskaičiuojamas į jūsų organizacijos vienalaikių skambučių limitą (pagal numatytuosius nustatymus 20 vykstančių skambučių, bendrai su telefono ir kitais skambučiais) ir į valdiklio 25 aktyvių sesijų ribą (arba jūsų vienalaikių skambučių limitą, jei jis didesnis). Pasiekus bet kurią ribą, naujo pokalbio pradėti negalima, kol nesibaigia skambutis.

Integravimo parinktys#

Pasirinkite integravimo būdą, tinkantį jūsų technologijų rinkiniui:

Stilius#

Valdiklis pateikiamas su integruotomis šviesia ir tamsia temomis, valdomomis per rekvizitą theme, bei akcento spalva, valdoma per rekvizitą primaryColor. Jei reikia išsamesnio tinkinimo, galite perrašyti CSS pasirinktines ypatybes ir klases. Išsamiau žr. stiliaus vadove.