Widget

Встраиваемый голосовой виджет

Добавьте голосового ИИ-агента на любой сайт с помощью нескольких строк кода

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

Виджет отображается в виде стеклянной панели, адаптирующейся к светлой и тёмной темам, с настраиваемыми акцентными цветами и расположением. Он распространяется как npm-пакет @thunderphone/widget и также доступен через CDN для сред без сборщиков.

Предварительные требования#

Перед встраиванием виджета выполните эти 3 этапа в панели управления 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"
    />
  )
}

Готово. Пользователи увидят стеклянную панель звонка, которая подключит их к вашему ИИ-агенту одним нажатием.

Настройка#

Виджет имеет 4 свойства внешнего вида:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Ещё 3 свойства настраивают сеанс, а не внешний вид — все они передаются в запрос сеанса при начале звонка:

Полную таблицу свойств смотрите в справочнике React-компонента.

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

Варианты интеграции#

Выберите метод интеграции, подходящий для вашего стека:

Стилизация#

Виджет поставляется со встроенными светлой и тёмной темами, управляемыми свойством theme, а также с акцентным цветом, управляемым свойством primaryColor. Для более глубокой настройки можно переопределить пользовательские свойства и классы CSS. Подробнее см. в руководстве по стилизации.