Вбудовуваний віджет голосового агента

Додайте голосового 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.

Для повністю налаштованого інтерфейсу використовуйте headless-хук, щоб керувати голосовим сеансом під час створення власного інтерфейсу. Хук надає рівні аудіо в реальному часі для створення візуалізацій, що реагують на звук.

Кожна розмова у віджеті є дзвінком. Вона враховується в ліміті одночасних дзвінків вашої організації (за замовчуванням 20 дзвінків у процесі, спільно з телефонними та іншими дзвінками), а також у ліміті віджета в 25 активних сеансів (або у вашому ліміті одночасних дзвінків, якщо він вищий). Після досягнення будь-якого з цих лімітів нова розмова не може початися, доки не завершиться дзвінок.

Варіанти інтеграції#

Виберіть метод інтеграції, який відповідає вашому стеку:

Стилізація#

Віджет постачається з вбудованими світлою та темною темами, якими керує властивість theme, а також акцентним кольором, яким керує властивість primaryColor. Для глибшого налаштування можна перевизначити користувацькі властивості та класи CSS. Докладніше дивіться в посібнику зі стилізації.