Įterpiamas balso valdiklis

Į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 viešinamą API raktą

   Valdymo skydelio nustatymuose eikite į Kūrėjai ir sukurkite viešinamą raktą. Viešinami raktai prasideda pk_live_ ir juos saugu įtraukti į kliento pusės kodą.

2. Sukonfigūruokite leidžiamus domenus

   Tuose pačiuose kūrėjų nustatymuose pridėkite domenus, kuriuose bus įterptas valdiklis. Kuriant visada leidžiama naudoti localhost. Palaikomi pakaitos simboliai, pvz., *.example.com.

3. Sukurkite žiniatinklio valdiklį

   Valdymo skydelyje eikite į Žiniatinklio valdikliai ir sukurkite valdiklį. Pasirinkite agentą, kurį norite pateikti, ir naudotiną viešinamą raktą. Agentas automatiškai nustatomas pagal jūsų viešinamo rakto konfigūraciją.

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

Dar trys ypatybės tinkina seansą, o ne išvaizdą -- visos jos perduodamos seanso užklausai pradedant skambutį:

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.

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.