Готовый JS-виджет для сайтов

ChatOnline Widget

Виджет подключается одной строкой, живет в Shadow DOM и не ломает стили Tilda, Bitrix, WordPress и других сайтов. Сообщения уходят на этот сервер, а сервер передает их в указанный n8n webhook.

Код вставки

Замените webhook, тексты и ссылку на политику под свой проект.

<script
  src="https://chatonline.kdjbfkv.ru/widget.js"
  data-webhook="https://n8n.example.ru/webhook/your-id"
  data-title="Служба заботы"
  data-subtitle="Обычно отвечаем за пару минут"
  data-greeting="Здравствуйте! Чем можем помочь?"
  data-bot-name="Онлайн-консультант"
  data-bot-subtitle="Мы на связи"
  data-avatar-url="https://example.ru/operator-avatar.png"
  data-position="right"
  data-stream="1"
  data-policy-url="https://example.ru/privacy"
></script>

Позиция Используйте data-position="right", left или center. Отступы меняются через data-offset-x и data-offset-y.

Форма контактов По умолчанию включены имя и телефон. Чтобы убрать форму, добавьте data-lead-form="false".

Цвета Можно переопределить data-primary-color, data-accent-color, data-bg-color и data-border-radius.

Аватар консультанта data-avatar-url меняет аватар бота в подсказке, шапке чата и сообщениях. Также работает старое имя data-bot-avatar.

Потоковая печать data-stream="1" включает плавный вывод ответа в виджете. Сервер корректно обработает webhook n8n и с принудительным streaming, и без него.