Уградиви виџет за гласовног агента

Уградиви гласовни виџет ThunderPhone омогућава посетиоцима Вашег веб-сајта да разговарају са AI агентом директно из прегледача. Позив телефоном није потребан -- корисници кликну на дугме и започну гласовни разговор у реалном времену који покреће ThunderPhone.

Виџет се приказује као стакласта трака која се прилагођава светлим и тамним темама, са прилагодљивим акцентним бојама и позиционирањем. Дистрибуира се као npm пакет @thunderphone/widget, а доступан је и преко CDN-а за окружења без бандлера.

ThunderPhone widget in light and dark themes with various accent colors

Предуслови

Пре уграђивања виџета, довршите ова три корака у ThunderPhone контролној табли:

Направите јавни API кључ
Идите на Програмери у подешавањима контролне табле и направите јавни кључ. Јавни кључеви почињу са pk_live_ и безбедни су за укључивање у код на страни клијента.
Конфигуришите дозвољене домене
У истим подешавањима за Програмере додајте домене на којима ће виџет бити уграђен. localhost је увек дозвољен за развој. Подржани су џокер знакови (нпр. *.example.com).
Направите веб виџет
Идите на Веб виџети на контролној табли и направите виџет. Изаберите агента којег желите да изложите и јавни кључ који желите да користите. Агент се аутоматски одређује из конфигурације Вашег јавног кључа.

Брзи почетак

Инсталирајте пакет:

npm install @thunderphone/widget

Додајте виџет у апликацију:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

То је све. Корисници ће видети стакласту траку за позиве која их једним кликом повезује са Вашим AI агентом.

Прилагођавање

Виџет има четири својства изгледа:

Својство	Подразумевано	Опис
`theme`	`'light'`	`'light'` за бело стакло, `'dark'` за тамно стакло
`primaryColor`	`'#000000'` (светло) / `'#ffffff'` (тамно)	Акцентна боја за дугме за покретање, таласни облик и индикатор повезивања
`title`	`'Voice assistant'`	Текст приказан у виџету
`position`	`'bottom-right'`	Угао прозора приказа: `'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"
/>

Још три својства прилагођавају сесију, а не изглед -- сва се прослеђују захтеву за сесију када позив започне:

Својство	Опис
`language`	Замена језика по сесији -- код или локалитет као што су `en`, `es` или `fr-FR`
`voice`	Замена гласа по сесији -- назив гласа као што је `maria`
`context`	Чињенични контекст странице или сајта прослеђен агенту (скраћује се на серверској страни на 12.000 знакова)

Погледајте референцу React компоненте за комплетну табелу својстава.

За потпуно прилагођени UI, користите headless хук за управљање гласовном сесијом док правите сопствени интерфејс. Хук излаже нивое звука у реалном времену за израду визуелизација које реагују на звук.

Опције интеграције

Изаберите метод интеграције који одговара вашем технолошком стеку:

React компонента

Унапред израђена UI компонента са уграђеним контролама позива и приказом статуса. Увезите, проследите props, готово.

Headless Hook

Потпуна контрола над UI-јем. Hook useThunderPhone управља гласовном сесијом док израђујете сопствени интерфејс.

CDN / Script ознака

Није потребан bundler. Учитајте виџет путем script ознаке за статичке сајтове, WordPress и друга окружења која нису React.

Стилизација

Виџет долази са уграђеним светлом и тамном темом којима управља prop theme, као и бојом акцента којом управља prop primaryColor. За детаљније прилагођавање можете заменити CSS прилагођена својства и класе. Погледајте водич за стилизацију за детаље.