Русский

English

Русский

English

Что это и быстрый старт ​

Morze Assistant — встраиваемый чат-виджет. Он собирается в один файл bundle.min.js, который монтируется на любой сайт как кастом-элемент <mz-bot> внутри shadow DOM. Стили инлайнятся в JS, а страница не ломает стили виджета.

  • Стек: React 18 + Redux Toolkit + Vite 6 + Sass.
  • Бэкенд: облако Morze — связь по HTTP + WebSocket.

Подключение за 30 секунд ​

Положите собранный бандл на сайт и подключите его одним тегом — больше ничего не требуется, дефолты зашиты в бандл на этапе сборки (см. Конфигурация):

html
<script src="https://your-cdn.example.com/bundle.min.js" defer></script>

Виджет сам создаст хост-элемент <mz-bot id="__mz-bot">, поднимет shadow root и смонтирует React-приложение. По умолчанию это плавающая кнопка-лаунчер в правом нижнем углу.

Настройка на странице (без пересборки) ​

Большую часть поведения можно задать прямо на хосте — тремя способами, см. Конфигурацию и приоритеты.

Через атрибуты загружающего <script> ​

html
<script
  src="bundle.min.js"
  data-mz-theme="dark"
  data-mz-accent="#0dbb52"
  data-mz-button-shape="square"
  defer
></script>

Через глобальный объект (до загрузки бандла) ​

html
<script>
  window.MZBOT_CONFIG = {
    theme: { mode: 'dark', accent: '#0dbb52' },
    chat: { position: 'rb' },
  };
</script>
<script src="bundle.min.js" defer></script>

Через JS-API в рантайме ​

js
window.MZBOT.setTheme('dark');
window.MZBOT.setTheme({ accent: '#0dbb52', pattern: 'mesh' });

Полный список методов — на странице JavaScript API.

Бандл выдаёт Morze

Бандл собирается и раздаётся на стороне Morze: в нём уже зашиты USER_UUID вашего бота и адреса бэкенда (api.assistant.morze.tech). Всё остальное настраивается прямо на хост-странице — см. Конфигурация.

Что дальше ​