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

Додајте гласовног AI агента на било који веб-сајт са неколико редова кода

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

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

Предуслови#

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

1. Креирајте веб виџет

   Идите на Веб виџети на контролној табли и креирајте виџет. Изаберите гласовног агента којег желите да прикажете. Сваки виџет има сопствени јавни кључ (pk_live_...), који је безбедно укључити у кôд на страни клијента; гласовни агент се одређује на основу кључа.

2. Подесите дозвољене домене

   На истом виџету додајте домене на којима ће бити уграђен. Џокер знакови су подржани (нпр. *.example.com). Листа спречава рад виџета када неко копира Ваш кључ на други сајт; она није потврда идентитета, јер скрипта изван прегледача може да пошаље било које Origin заглавље. localhost није аутоматски дозвољен у продукцији: додајте га на листу да бисте локално тестирали у односу на продукциони API.

3. Изаберите надјачавања прегледача

   Ако Ваша страница поставља language, voice или context, укључите свако у одељку Надјачавања прегледача. Нови виџети не прихватају ниједно, а захтев за сесију који садржи искључено подешавање не успева са 400 override_not_allowed. Погледајте Надјачавања прегледача.

Брзи почетак#

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

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 агентом.

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

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

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Још три својства прилагођавају сесију, а не изглед — сва се прослеђују захтеву за сесију када позив започне. Свако функционише само ако то објављиви кључ виџета дозвољава у оквиру Замене у прегледачу; у супротном, захтев за сесију не успева уз 400 override_not_allowed:

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

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

Сваки разговор у виџету је позив. Урачунава се у ограничење истовремених позива ваше организације (подразумевано 20 позива у току, заједничко са телефонским и другим позивима) и ограничење виџета од 25 активних сесија (или ваше ограничење истовремених позива, ако је веће). При било ком ограничењу, нови разговор не може да започне док се позив не заврши.

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

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

Стилизација#

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