Виджет на сайт

Встройте чат-поддержку на любую страницу: один <script> и кастомный элемент <ubpl-widget>.

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

1. Быстрый старт

Минимальный фрагмент для вставки перед закрывающим </body>.

<script src="https://ubpl.ru/widget/widget.js" async></script>
<ubpl-widget
  widget-token="ВАШ_ТОКЕН"
  tenant-id="ВАШ_TENANT_ID"
  api-base="https://api.ubpl.ru"
></ubpl-widget>

2. Все атрибуты

Атрибуты задаются на элементе ubpl-widget в HTML.

Атрибут	Тип	По умолчанию	Описание
widget-token	string	—	Токен виджета из дашборда (обязательно)
tenant-id	string	—	ID бота (обязательно)
api-base	string	см. описание	Базовый URL API. Если не указан: в браузере обычно origin страницы, иначе https://api.ubpl.ru.
widget-color	string (hex)	#2563eb	Цвет акцента (кнопка, шапка)
theme	light \| dark	light	Цветовая схема панели чата
stream	boolean	true	Потоковый вывод ответа (SSE). Значение false отключает стриминг

3. Настройка темы

Атрибут theme задаёт фон, текст и пузырьки; 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>

4. Получить токен

Токен виджета и tenant-id доступны в дашборде в разделе «Мои боты» — кнопка «Настройки виджета».