What it is & quick start

Morze Assistant is an embeddable chat widget. It builds into a single bundle.min.js that mounts on any site as an <mz-bot> custom element inside a shadow DOM. Styles are inlined into the JS, and the host page can't break the widget's styles.

• Stack: React 18 + Redux Toolkit + Vite 6 + Sass.
• Backend: morzebot-backend-v2 (Router/Gateway) — over HTTP + WebSocket.

Embed in 30 seconds

Host the built bundle and load it with a single tag — nothing else is required, the defaults are baked into the bundle at build time (see Configuration):

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

The widget creates the host element <mz-bot id="__mz-bot">, attaches a shadow root, and mounts the React app. By default this is a floating launcher button in the bottom-right corner.

Configure on the page (no rebuild)

Most behavior can be set right on the host — in three ways, see Configuration and the priority order.

Via attributes on the loading <script>

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

Via a global object (before the bundle loads)

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

Via the JS API at runtime

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

The full method list is on the JavaScript API page.

Local development

npm install      # once
npm start        # = vite (dev server)
npm run build    # build bundle.min.js
npm run preview  # preview the production build

Demo pages for trying out the modes live at the repo root: index.html and embed-test.html.

Backend defaults to production

The baked-in WS_HOST/API_HOST point at production (api.assistant.morze.tech). For local development against morzebot-backend-v2 (port :9000), override them — see Configuration → endpoints.

What's next

• Embed modes — floating, inline, static, overlay.
• Configuration — every key and its priority.
• Theming — theme, accent, patterns, background, glow, animations.
• JavaScript API — MZBOT.setTheme, MZBOT.overlay.*, and more.
• Architecture — surfaces, singletons, bootstrap.