JavaScript API

The widget publishes a global window.MZBOT object on the host page. It's available once the bundle has loaded and lets you control the theme and the overlay surface at runtime — no rebuild.

Source: src/theme.js (theme & constants), src/services/overlayStore.js (overlay).

Theme

MZBOT.setTheme(patch)

Updates the theme live. Accepts a string shorthand or a patch object:

MZBOT.setTheme('dark');                       // theme shorthand
MZBOT.setTheme({ theme: 'dark' });            // equivalent
MZBOT.setTheme({
  accent:        '#0dbb52',
  pattern:       'mesh',          // none | whisper | mesh | scales | bloom | cipher | prism
  patternOpacity: 0.08,           // 0..1
  patternScale:   1.5,            // 0.25..4
  msgAnimation:  'unfurl',        // bubble | unfurl | cascade | pop | breathe
  bgColors:      ['#1b2735', '#283e51', '#0a1622'],
  bgAngle:        160,            // 0..360
  patternImage:  'https://cdn.morze.tech/patterns/topography.png',
  patternImageOpacity: 0.5,       // 0..1
  patternImageSize:    280,       // px or CSS background-size
});

Any key can be passed on its own — the rest are preserved.

MZBOT.getTheme()

Returns the current theme state:

const t = MZBOT.getTheme();
// → { theme, resolvedTheme, accent, pattern, ... , glow }

resolvedTheme is the actual theme after resolving auto (e.g. 'dark' or 'light').

MZBOT.setGlow(patch)

Controls the accent glow around the open widget:

MZBOT.setGlow({ dark: true, light: true, intensity: 2 });

Field	Type	Description
dark	boolean	Glow when the dark theme is active.
light	boolean	Glow when the light theme is active.
intensity	0.1..5	Strength multiplier (1 = default).

MZBOT.subscribe(callback)

Subscribe to theme changes. Returns an unsubscribe function:

const unsubscribe = MZBOT.subscribe((theme) => {
  console.log('theme changed:', theme);
});
// later:
unsubscribe();

Overlay surface

Available when the overlay surface is mounted (chat.overlay.enabled: true, see Embed modes).

Method	Description
MZBOT.overlay.show()	Show the corner launcher.
MZBOT.overlay.hide()	Hide the launcher.
MZBOT.overlay.toggle()	Toggle launcher visibility.
MZBOT.overlay.isVisible()	→ boolean.
MZBOT.overlay.open()	Open the overlay chat (reveals the launcher too).
MZBOT.overlay.close()	Close the overlay chat.

// example: wire it to your own button on the site
document.querySelector('#my-chat-button')
  .addEventListener('click', () => MZBOT.overlay.toggle());

Constants (read-only)

Property	Description
MZBOT.themes	List of available theme modes.
MZBOT.patterns	List of available SVG patterns.
MZBOT.animations	List of available message animations.

console.log(MZBOT.patterns);  // ['none', 'whisper', 'mesh', 'scales', 'bloom', 'cipher', 'prism']

Full example

<script src="bundle.min.js" defer></script>
<script>
  window.addEventListener('load', () => {
    // dark theme with a green accent and a mesh pattern
    MZBOT.setTheme({ theme: 'dark', accent: '#0dbb52', pattern: 'mesh' });
    MZBOT.setGlow({ dark: true, intensity: 1.5 });

    // sync the widget theme with the site theme
    MZBOT.subscribe((t) => document.body.dataset.chatTheme = t.resolvedTheme);
  });
</script>