Widget

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

Додайте голосового AI-агента на будь-який вебсайт кількома рядками коду

Вбудовуваний голосовий віджет ThunderPhone дає змогу відвідувачам вашого вебсайту спілкуватися з AI-агентом безпосередньо в браузері. Телефонний дзвінок не потрібен — користувачі натискають кнопку й починають голосову розмову в реальному часі на базі ThunderPhone.

Віджет відображається як панель у стилі скломорфізму, що адаптується до світлої та темної тем, із налаштовуваними акцентними кольорами та позиціонуванням. Він поширюється як npm-пакет @thunderphone/widget і також доступний через CDN для середовищ без збирачів.

Передумови#

Перш ніж вбудовувати віджет, виконайте ці три кроки в панелі керування ThunderPhone:

1. Створіть публічний API-ключ

   Перейдіть до Розробники в налаштуваннях панелі керування та створіть публічний ключ. Публічні ключі починаються з pk_live_ і їх безпечно додавати до клієнтського коду.

2. Налаштуйте дозволені домени

   У тих самих налаштуваннях Розробники додайте домени, де буде вбудовано віджет. localhost завжди дозволено для розробки. Підтримуються шаблони з підстановками (наприклад, *.example.com).

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

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

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

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

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"
/>

Ще три властивості налаштовують сеанс, а не зовнішній вигляд — усі вони передаються до запиту сеансу під час початку дзвінка:

Повну таблицю властивостей дивіться в довіднику компонента React.

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

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

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

Стилізація#

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