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

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

• Стек: React 18 + Redux Toolkit + Vite 6 + Sass.
• Бэкенд: morzebot-backend-v2 (Router/Gateway) — связь по HTTP + WebSocket.

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

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

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

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

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

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

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

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

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

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

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

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

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

Локальная разработка

npm install      # один раз
npm start        # = vite (dev-сервер)
npm run build    # сборка bundle.min.js
npm run preview  # предпросмотр прод-сборки

Демо-страницы для проверки режимов лежат в корне репозитория: index.html и embed-test.html.

Бэкенд по умолчанию — прод

Зашитый WS_HOST/API_HOST указывают на прод (api.assistant.morze.tech). Для локальной разработки с morzebot-backend-v2 (порт :9000) поменяйте их — см. Конфигурация → endpoints.

Что дальше

• Режимы встраивания — плавающий, inline, статичный, overlay.
• Конфигурация — все ключи и приоритеты.
• Темизация — тема, акцент, паттерны, фон, свечение, анимации.
• JavaScript API — MZBOT.setTheme, MZBOT.overlay.* и др.
• Архитектура — поверхности, синглтоны, bootstrap.