Встраивание виджета¶

SpeakNode предоставляет встраиваемый веб-компонент, который добавляет голосового AI-агента на любой сайт. Посетители смогут общаться с агентом голосом прямо в браузере.

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

Агент должен быть опубликован (переключатель Published активен)
Браузер посетителя должен поддерживать WebRTC
Посетитель должен разрешить доступ к микрофону

Публикация агента¶

Откройте страницу агента в https://app.speaknode.com
Активируйте переключатель Published
Перейдите на вкладку Widget для получения кода встраивания

Код для встраивания¶

Скопируйте HTML-сниппет со страницы агента и вставьте на ваш сайт:

<speaknode-agent
  agent-id="your-agent-id"
  agent-token="your-agent-token"
  language="ru">
</speaknode-agent>

<script src="https://app.speaknode.com/widget/speaknode-agent.js"></script>

Атрибуты виджета¶

Атрибут	Тип	Обязательный	Описание
`agent-id`	string	Да	Идентификатор опубликованного агента
`agent-token`	string	Нет	Предгенерированный JWT-токен. Если не указан, токен запрашивается автоматически
`language`	string	Нет	Код языка (например, `ru`, `en`). Переопределяет автоопределение языка
`initialized`	boolean	Нет	Режим внешней инициализации. При `true` виджет ожидает программного запуска

Настройка внешнего вида¶

На вкладке Widget страницы агента доступны настройки оформления.

Вариант отображения¶

Вариант	Описание
Tiny	Компактная кнопка-иконка. Подходит для ненавязчивого размещения
Compact	Кнопка с коротким текстом. Баланс между компактностью и заметностью
Full	Развёрнутая панель с описанием агента. Максимальная информативность

Размещение¶

Выберите позицию виджета на странице:

Правый нижний угол (по умолчанию)
Левый нижний угол
Или произвольное размещение через CSS

Цвета и тема¶

Настройте цвет акцента виджета, чтобы он соответствовал дизайну вашего сайта.

Передача переменных через URL¶

Если агент использует динамические переменные, их значения можно передать через query-параметры URL страницы, на которой размещён виджет:

https://yoursite.com/support?customer_name=Иван&order_id=ORD-12345

Виджет автоматически считывает параметры из URL и передаёт их агенту при запуске сессии.

Персонализация

Используйте URL-параметры для персонализации разговора. Например, передайте имя клиента из вашей CRM, чтобы агент сразу обращался к нему по имени.

Пример интеграции¶

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Поддержка</title>
</head>
<body>
  <h1>Служба поддержки</h1>
  <p>Нажмите на виджет в правом нижнем углу, чтобы поговорить с оператором.</p>

  <speaknode-agent
    agent-id="abc123"
    language="ru">
  </speaknode-agent>

  <script src="https://app.speaknode.com/widget/speaknode-agent.js"></script>
</body>
</html>

HTTPS

Виджет требует HTTPS-соединение для работы с микрофоном. На страницах с HTTP доступ к микрофону будет заблокирован браузером.