Widget

Iegultams balss logrīks

Pievienojiet balss AI aģentu jebkurai vietnei, izmantojot dažas koda rindas

ThunderPhone iegulstamais balss logrīks ļauj jūsu vietnes apmeklētājiem sarunāties ar balss aģentu tieši pārlūkprogrammā. Tālruņa zvans nav nepieciešams — lietotāji noklikšķina uz pogas un sāk reāllaika balss sarunu, ko nodrošina ThunderPhone.

Logrīks tiek attēlots kā stiklam līdzīga josla, kas pielāgojas gaišajām un tumšajām tēmām, ar pielāgojamām akcenta krāsām un izvietojumu. Tas tiek izplatīts kā @thunderphone/widget npm pakotne un ir pieejams arī, izmantojot CDN vidēs bez pakotņu komplektētāja.

Priekšnosacījumi#

Pirms logrīka iegulšanas izpildiet šīs trīs darbības ThunderPhone panelī:

1. Izveidojiet publicējamu API atslēgu

   Paneļa iestatījumos atveriet sadaļu Izstrādātāji un izveidojiet publicējamu atslēgu. Publicējamās atslēgas sākas ar pk_live_, un tās ir droši iekļaut klienta puses kodā.

2. Konfigurējiet atļautos domēnus

   Tajos pašos Izstrādātāju iestatījumos pievienojiet domēnus, kuros tiks iegults logrīks. Izstrādei vienmēr ir atļauts localhost. Tiek atbalstītas aizstājējzīmes (piemēram, *.example.com).

3. Izveidojiet tīmekļa logrīku

   Panelī atveriet sadaļu Tīmekļa logrīki un izveidojiet logrīku. Atlasiet balss aģentu, kuru vēlaties piedāvāt, un izmantojamo publicējamo atslēgu. Balss aģents tiek automātiski noteikts no jūsu publicējamās atslēgas konfigurācijas.

Ātrais sākums#

Instalējiet pakotni:

npm install @thunderphone/widget

Pievienojiet logrīku savai lietotnei:

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

Tas arī viss. Jūsu lietotāji redzēs stiklam līdzīgu zvana joslu, kas ar vienu klikšķi savienos viņus ar jūsu balss aģentu.

Pielāgošana#

Logrīkam ir četri izskata rekvizīti:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Vēl trīs rekvizīti pielāgo sesiju, nevis izskatu — visi tiek pārsūtīti uz sesijas pieprasījumu, kad sākas zvans:

Pilnu rekvizītu tabulu skatiet React komponenta atsaucē.

Lai izveidotu pilnībā pielāgotu lietotāja saskarni, izmantojiet headless āķi, lai pārvaldītu balss sesiju, kamēr veidojat savu saskarni. Āķis nodrošina reāllaika audio līmeņus audio reaģējošu vizualizāciju veidošanai.

Integrācijas iespējas#

Izvēlieties integrācijas metodi, kas atbilst jūsu tehnoloģiju stekam:

Stils#

Logrīkam ir iebūvētas gaišā un tumšā tēma, ko kontrolē ar theme rekvizītu, kā arī akcenta krāsa, ko kontrolē ar primaryColor rekvizītu. Plašākai pielāgošanai varat pārrakstīt CSS pielāgotās īpašības un klases. Detalizētu informāciju skatiet stilu ceļvedī.