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: the Morze cloud — 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.

Morze ships the bundle

The bundle is built and hosted on the Morze side: your bot's USER_UUID and the backend endpoints (api.assistant.morze.tech) are already baked in. Everything else is configured right on the host page — see Configuration.

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.