Как встроить веб-виджет на сайт?

Встройте чат за ~15 минут: подключите <script src="https://ubpl.ru/widget/widget.js"> и элемент <ubpl-widget> с токеном из кабинета — ассистент отвечает по базе знаний на той же странице.

Скрипт загружается с https://ubpl.ru/widget/widget.js.

Как быстро встроить виджет на страницу?

Скопируйте фрагмент ниже перед закрывающим </body> — это минимальная рабочая вставка с токеном и tenant-id из кабинета.

<script src="https://ubpl.ru/widget/widget.js" async></script>
<ubpl-widget
  widget-token="ВАШ_ТОКЕН"
  tenant-id="ВАШ_TENANT_ID"
  widget-id="ВАШ_WIDGET_ID"
  title="Поддержка"
  initial-message="Привет! Чем могу помочь?"
  theme="light"
  api-base="https://api.ubpl.ru"
></ubpl-widget>

Какие атрибуты поддерживает ubpl-widget?

Обязательны widget-token и tenant-id; остальные настраивают тему, приветствие и API — все атрибуты задаются на ubpl-widget в HTML.

Атрибут	Тип	По умолчанию	Описание
widget-token	string	—	Токен виджета из дашборда (обязательно)
tenant-id	string	—	Tenant ID ассистента (UUID) (обязательно)
widget-id	string	—	ID виджета (опционально, для расширенной конфигурации)
api-base	string	см. описание	Базовый URL API. Если не указан: в браузере обычно origin страницы, иначе https://api.ubpl.ru.
widget-color	string (hex)	#2563eb	Цвет акцента (кнопка, шапка)
theme	light \| dark \| auto	light	Цветовая схема панели чата
title	string	Чат	Заголовок панели чата
placeholder	string	Введите сообщение…	Текст поля ввода
initial-message	string	—	Приветственное сообщение ассистента
suggested-questions	string (JSON)	—	JSON-массив подсказок, напр. ["Цены?","Контакты?"]
stream	boolean	true	Потоковый вывод ответа (SSE). Значение false отключает стриминг

Как настроить светлую или тёмную тему?

Укажите theme="light", dark или синхронизируйте с классом dark на сайте; widget-color меняет только акцент.

Светлый сайт (по умолчанию)

Достаточно не указывать theme — используется светлая схема.

<ubpl-widget widget-token="..." tenant-id="..."></ubpl-widget>

Тёмный сайт

<ubpl-widget widget-token="..." tenant-id="..." theme="dark"></ubpl-widget>

Сайт с переключением тем (JS)

Пример: синхронизация с классом dark на <html> (как в типичных темах Next.js / Tailwind).

const widget = document.querySelector('ubpl-widget');

const observer = new MutationObserver(() => {
  const isDark = document.documentElement.classList.contains('dark');
  widget.setAttribute('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class']
});

// Установить начальное значение
const isDark = document.documentElement.classList.contains('dark');
widget.setAttribute('theme', isDark ? 'dark' : 'light');

Брендовый цвет

<!-- Акцент под ваш бренд -->
<ubpl-widget
  widget-token="..."
  tenant-id="..."
  widget-color="#e11d48"
  theme="dark"
></ubpl-widget>

Где взять токен виджета?

Токен, tenant-id и готовый embed-код появляются в кабинете после подключения канала «Веб-виджет» к ассистенту.

Быстрый способ (через Channels Hub)

Откройте дашборд и выберите ассистента.
Перейдите на вкладку Каналы (/bots/{id}?tab=channels).
Найдите карточку Веб-виджет и нажмите «Подключить».
В открывшейся панели скопируйте готовый embed-код.

Расширенные настройки

После подключения нажмите «Полные настройки» — откроется /widgets/{widgetId}, где доступны кастомизация цвета, заголовка, приветствия и suggested questions.