Skip to main content
Вебвіджет дає відвідувачам вашого сайту змогу розпочати розмову з голосовим агентом ШІ натисканням, використовуючи мікрофон браузера. Це окремий SDK для JavaScript / React із власним довідником SDK — цей посібник зосереджений на налаштуванні ThunderPhone, необхідному для віджета.
Ви можете виконати все це без cURL: сторінка панелі керування Вебвіджети (/dashboard/web-widgets) створює віджет, налаштовує його режим і агента, керує дозволеними доменами та надає фрагмент коду для вбудовування.

​
Передумови

1

Створіть агента

Агент, чий промпт і голос працюватимуть у сеансі віджета. Установіть widget_enabled: true (значення за замовчуванням).
2

Визначте режим маршрутизації

  • mode="agent" — один статичний агент для кожного ключа. Найпростіший варіант.
  • mode="webhook" — ваш сервер вибирає агента для кожного відвідувача через web.incoming webhook. Використовуйте це для авторизованих користувачів, A/B-тестів або маршрутизації за сторінками.
3

Вкажіть дозволені домени

Публічні ключі прив’язані до джерела. Потрібно вказати кожне ім’я хоста, яке вбудовуватиме віджет. localhost / 127.0.0.1 завжди дозволені під час локальної розробки.

​
Створіть публічний ключ

Відповідь містить key, що починається з pk_live_.... Публічні ключі за задумом є загальнодоступними — їх безпечно включати до фронтенд-збірки. Перегляньте довідник публічних ключів, щоб дізнатися про всі поля.
allowed_domains має містити щонайменше один запис. *.example.com відповідає піддоменам (наприклад, api.example.com), але не кореневому домену. Неповні шаблони, як-от * або *.*, відхиляються.

​
Додайте віджет на свій сайт

Три варіанти інтеграції описано в документації SDK віджета:

Компонент React

<ThunderPhoneWidget publishableKey="pk_live_..." />.

Хук без інтерфейсу

useThunderPhone() для власних інтерфейсів.

Тег скрипту CDN

ThunderPhone.mount({...}) для сайтів без збирача.
Усі три варіанти приймають той самий publishableKey і відображають кнопку мікрофона та аудіоелемент під час виклику. context віджета скорочується до 12 000 символів (приблизно 3 400 токенів типового англійського тексту) і враховується в доплаті за розмір промпту.

​
Webhook-и режиму віджета

Коли mode="webhook", ThunderPhone викликає ваш webhook_url на початку кожного сеансу з корисним навантаженням web.incoming. Поверніть конфігурацію агента, яку потрібно запустити для цього відвідувача — вона відповідає тій самій схемі відповіді, що й телефонні виклики:
Ви можете додавати до промпту контекст із власного сеансу (який клієнт переглядає сайт, на якій сторінці він перебуває) і змінювати агентів для кожного розгортання.

​
Перегляд сеансів

Сеанси віджета відображаються в GET /v1/calls з direction="widget" — ті самі транскрипт, запис, оцінювання та білінг, що й для телефонних дзвінків. Фільтруйте за direction, щоб створити панель керування лише для віджета.

​
Наступні кроки

Довідник SDK віджета

Відомості про інтеграцію React / hook / CDN.

Динамічна конфігурація для кожного дзвінка

Реалізуйте наскрізний процес mode="webhook".

Довідник публічних ключів

Кожне поле ресурсу ключа.

API сеансів мікрофона

Пропустіть віджет; керуйте LiveKit безпосередньо для користувацьких інтерфейсів.