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, the UI language, the starter prompts and the overlay surface at runtime — no rebuild.

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.

Background keys also accept a per-theme map — { light, dark } instead of a single value; the branch follows the active theme and is re-applied on every switch:

MZBOT.setTheme({
  theme:    'auto',
  bgColors: { light: ['#e9eeea', '#dfe8e0'], dark: ['#1b2735', '#0a1622'] },
  pattern:  { light: 'whisper', dark: 'scales' },
});

See One background per theme.

`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();

UI language

The whole interface is translated (input placeholder, menu, statuses, error screens, aria-labels). Supported languages: ru and en.

`MZBOT.setLang(lang)`

Switches the language live — the widget re-renders, no reload needed:

MZBOT.setLang('en');   // → 'en'
MZBOT.setLang('EN');   // case and region suffixes ('en-US') are normalized

An unsupported value is ignored. Returns the active language code.

`MZBOT.getLang()` / `MZBOT.langs`

MZBOT.getLang();   // → 'ru'
MZBOT.langs;       // → ['ru', 'en']

`MZBOT.subscribeLang(callback)`

Subscribe to language changes (including those driven by <html data-mz-lang>). Returns an unsubscribe function:

const off = MZBOT.subscribeLang((lang) => {
  document.documentElement.lang = lang;
});
// later:
off();

Initial language

Besides the JS API, the language can be set declaratively (priority, highest first):

html

<html data-mz-lang="en">                              <!-- live attribute, observed -->
<script>window.MZBOT_CONFIG = { lang: 'en' };</script> <!-- before the bundle loads -->
<script src="bundle.min.js" data-mz-lang="en" defer></script>

Below those: the build-time lang baked into the bundle, then the 'ru' fallback.

Your own bot text is localizable too

bot.title, bot.titleClosed and bot.tips may be a per-language map ({ ru: …, en: … }) instead of a plain string/array — it is re-resolved on every setLang().

Starter prompts (tips)

The suggestion chips shown in an empty chat — they disappear as soon as the conversation has messages. The default is baked into the bundle (bot.tips); the host page can replace them at runtime.

`MZBOT.setTips(tips)`

MZBOT.setTips(['Pricing', 'Case studies', 'Contact us']);   // replace
MZBOT.setTips({ ru: ['Тарифы'], en: ['Pricing'] });         // per-language map
MZBOT.setTips('A single tip');                              // string → one-item list
MZBOT.setTips([]);                                          // hide the tips
MZBOT.setTips(null);                                        // restore the bundled value

Empty and blank entries are dropped. Returns the resulting list for the active language.

`MZBOT.getTips()`

MZBOT.getTips();   // → ['Pricing', 'Case studies', 'Contact us']

`MZBOT.setBotContent(patch)`

The same mechanism for the other bot strings — handy when the bot has a different "identity" on different pages of the site:

MZBOT.setBotContent({
  header_title:        { ru: 'Поддержка', en: 'Support' },
  header_title_closed: 'How can I help?',
  bot_avatar_url:      'https://cdn.example.com/avatar.png',
});

MZBOT.setBotContent({ header_title: null });   // null clears one key

Key	What it changes
`tips`	Starter prompts in an empty chat.
`header_title`	Title of the open chat.
`header_title_closed`	Caption on the closed button (`chat.type: '0'`).
`bot_avatar_url`	Bot avatar.

Initial tips

Priority (highest first):

html

<script>window.MZBOT_CONFIG = { tips: ['Pricing', 'Case studies'] };</script>
<script src="bundle.min.js" data-mz-tips='["Pricing","Case studies"]' defer></script>

data-mz-tips takes a JSON array, or — if it isn't valid JSON — a |-separated string (data-mz-tips="Pricing|Case studies"). Below those: bot.tips from the bundle config.

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.
`MZBOT.designs`	List of design languages (`default`, `glass`).
`MZBOT.langs`	List of supported UI languages.

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

Full example

html

<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 });

    // language + starter prompts follow the page language
    MZBOT.setLang(document.documentElement.lang || 'ru');
    MZBOT.setTips({
      ru: ['Тарифы', 'Кейсы', 'Связаться'],
      en: ['Pricing', 'Case studies', 'Contact us'],
    });

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

JavaScript API ​

Theme ​

MZBOT.setTheme(patch) ​

MZBOT.getTheme() ​

MZBOT.setGlow(patch) ​

MZBOT.subscribe(callback) ​

UI language ​

MZBOT.setLang(lang) ​

MZBOT.getLang() / MZBOT.langs ​

MZBOT.subscribeLang(callback) ​

Initial language ​

Starter prompts (tips) ​

MZBOT.setTips(tips) ​

MZBOT.getTips() ​

MZBOT.setBotContent(patch) ​

Initial tips ​

Overlay surface ​

Constants (read-only) ​

Full example ​

JavaScript API

Theme

`MZBOT.setTheme(patch)`

`MZBOT.getTheme()`

`MZBOT.setGlow(patch)`

`MZBOT.subscribe(callback)`

UI language

`MZBOT.setLang(lang)`

`MZBOT.getLang()` / `MZBOT.langs`

`MZBOT.subscribeLang(callback)`

Initial language

Starter prompts (tips)

`MZBOT.setTips(tips)`

`MZBOT.getTips()`

`MZBOT.setBotContent(patch)`

Initial tips

Overlay surface

Constants (read-only)

Full example