Документация по интеграции

Примеры подключения виджета на ваш сайт.

Способы интеграции

Script-тег (рекомендуемый)

Один скрипт перед </body>. Async-loader не блокирует рендер.

html

<script src="https://chat.fuxbot.critica.im/widget/v1/widget.umd.js" async></script>
<script>
  window.FuxbotQueue = window.FuxbotQueue || [];
  FuxbotQueue.push(['init', { apiKey: 'ваш-api-ключ' }]);
</script>

Web Component

Полная CSS-изоляция через Shadow DOM. Удобно для современных стеков и SPA.

html

<script src="https://chat.fuxbot.critica.im/widget/v1/widget.umd.js" async></script>
<fuxbot-widget api-key="ваш-api-ключ"></fuxbot-widget>

iframe

Для сайтов с жёстким Content Security Policy.

html

<iframe
  src="https://chat.fuxbot.critica.im/embed?apiKey=ваш-api-ключ"
  style="border:none; position:fixed; bottom:0; right:0; width:400px; height:600px; z-index:9999;"
></iframe>

Встраивание в приложение

Если чат — это раздел вашего приложения, а не пузырь в углу сайта: окно занимает ваш контейнер, плавающая кнопка не нужна, открытие — по вашей кнопке.

html

<script src="https://chat.fuxbot.critica.im/widget/v1.1/widget.umd.js"></script>
<script>
  const chat = window.Fuxbot.init({
    apiKey: 'ваш-api-ключ',
    container: document.getElementById('support-panel'),
    mode: 'inline',       // 'popover' | 'inline' | 'fullscreen'
    launcher: 'none',     // без плавающей кнопки
  });

  chat.on('ready', () => console.log('чат готов'));
  chat.on('unread', ({ count }) => renderBadge(count));

  document.getElementById('support-btn')
    .addEventListener('click', () => chat.open());
</script>

Режимы отображения: popover — карточка в углу, inline — окно занимает ваш контейнер, fullscreen — весь экран.
Программное управление: open(), close(), toggle(), isOpen(). open() работает и до того, как виджет догрузился.
Без плавающей кнопки: launcher: «none» — ярлык не создаётся в DOM, чат открывается только из вашего интерфейса.
События: ready, error, open, close, unread — чтобы показать свою заглушку или свой индикатор непрочитанных.

Полная справка — опции init(), методы handle, безопасные зоны и клавиатура в нативной обёртке, стилевой контракт — в файле docs/widget-integration.md.

← На главную