Iegultams balss logrīks

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.

ThunderPhone widget in light and dark themes with various accent colors

Priekšnosacījumi

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

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ā.

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).

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.

Publicējamās atslēgas (pk_live_...) nav tas pats, kas jūsu slepenie API marķieri. Publicējamās atslēgas ir paredzētas lietošanai klienta pusē un ir ierobežotas ar logrīka sesijām jūsu atļautajos domēnos. Nekad neizmantojiet savu slepeno API marķieri klienta puses kodā.

Ā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:

Rekvizīts	Noklusējums	Apraksts
`theme`	`'light'`	`'light'` baltam stikla efektam, `'dark'` tumšam stikla efektam
`primaryColor`	`'#000000'` (gaiša) / `'#ffffff'` (tumša)	Akcenta krāsa sākšanas pogai, viļņu formai un savienojuma indikatoram
`title`	`'Voice assistant'`	Logrīkā parādāmais teksts
`position`	`'bottom-right'`	Skata apgabala stūris: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Rekvizīts	Apraksts
`language`	Sesijas valodas ignorēšana — kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR`
`voice`	Sesijas balss ignorēšana — balss nosaukums, piemēram, `maria`
`context`	Balss aģentam nodots faktiskais lapas vai vietnes konteksts (servera pusē saīsināts līdz 12 000 rakstzīmēm)

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:

React komponents

Iepriekš izveidots lietotāja saskarnes komponents ar iebūvētām zvanu vadīklām un statusa attēlojumu. Importējiet, nododiet rekvizītus, un gatavs.

Headless āķis

Pilnīga kontrole pār lietotāja saskarni. useThunderPhone āķis pārvalda balss sesiju, kamēr jūs veidojat savu saskarni.

CDN / skripta tags

Nav nepieciešams komplektētājs. Ielādējiet logrīku, izmantojot skripta tagu, statiskām vietnēm, WordPress un citām vidēm, kas nav React.

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ī.

Nepieciešama palīdzība? Sazinieties ar mums: support@thunderphone.com

​Priekšnosacījumi

​Ātrais sākums

​Pielāgošana

​Integrācijas iespējas

React komponents

Headless āķis

CDN / skripta tags

​Stils

Priekšnosacījumi

Ātrais sākums

Pielāgošana

Integrācijas iespējas

Stils