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

Вбудовуваний голосовий віджет 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).

Створіть вебвіджет

Перейдіть до Вебвіджети в панелі керування та створіть віджет. Виберіть агента, якого потрібно зробити доступним, і публічний ключ для використання. Агент автоматично визначається за конфігурацією вашого публічного ключа.

Публічні ключі (pk_live_...) — це не те саме, що ваші секретні API-токени. Публічні ключі призначені для використання на стороні клієнта та обмежені сеансами віджета у ваших дозволених доменах. Ніколи не використовуйте секретний API-токен у клієнтському коді.

Швидкий старт

Установіть пакет:

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

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

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

React-компонент

Готовий UI-компонент із вбудованими елементами керування дзвінками та відображенням статусу. Імпортуйте, передайте props — готово.

Headless-хук

Повний контроль над UI. Хук useThunderPhone керує голосовою сесією, а ви створюєте власний інтерфейс.

CDN / тег script

Збирач не потрібен. Завантажуйте віджет через тег script для статичних сайтів, WordPress та інших середовищ без React.

Стилізація

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

Потрібна допомога? Зв’яжіться з нами: support@thunderphone.com

​Передумови

​Швидкий старт

​Налаштування

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

React-компонент

Headless-хук

CDN / тег script

​Стилізація

Передумови

Швидкий старт

Налаштування

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

Стилізація