JavaScript API

Виджет публикует на хост-странице глобальный объект window.MZBOT. Он доступен после загрузки бандла и позволяет управлять темой, языком интерфейса, подсказками и overlay-поверхностью в рантайме — без пересборки.

Тема

`MZBOT.setTheme(patch)`

Обновляет тему вживую. Принимает строку-шорткат или объект-патч:

MZBOT.setTheme('dark');                       // шорткат темы
MZBOT.setTheme({ theme: 'dark' });            // эквивалент
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 или CSS background-size
});

Любой ключ можно передавать по отдельности — остальные сохраняются.

Ключи фона принимают и карту по темам — { light, dark } вместо одного значения; ветка подставляется под активную тему и переприменяется при её переключении:

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

Подробнее — Два фона: светлая и тёмная тема.

`MZBOT.getTheme()`

Возвращает текущее состояние темы:

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

resolvedTheme — фактическая тема после разрешения auto (например 'dark' или 'light').

`MZBOT.setGlow(patch)`

Управляет акцентным свечением вокруг открытого виджета:

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

Поле	Тип	Описание
`dark`	boolean	Свечение при тёмной теме.
`light`	boolean	Свечение при светлой теме.
`intensity`	`0.1..5`	Множитель силы (1 = дефолт).

`MZBOT.subscribe(callback)`

Подписка на изменения темы. Возвращает функцию отписки:

const unsubscribe = MZBOT.subscribe((theme) => {
  console.log('theme changed:', theme);
});
// позже:
unsubscribe();

Язык интерфейса

Виджет переведён целиком (плейсхолдер ввода, меню, статусы, экраны ошибок, aria-подписи). Поддерживаемые языки — ru и en.

`MZBOT.setLang(lang)`

Переключает язык вживую — виджет перерисовывается, перезагрузка не нужна:

MZBOT.setLang('en');   // → 'en'
MZBOT.setLang('EN');   // регистр и региональные суффиксы ('en-US') нормализуются

Неподдерживаемое значение игнорируется. Возвращает актуальный код языка.

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

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

`MZBOT.subscribeLang(callback)`

Подписка на смену языка (в том числе через <html data-mz-lang>). Возвращает функцию отписки:

const off = MZBOT.subscribeLang((lang) => {
  document.documentElement.lang = lang;
});
// позже:
off();

Начальный язык

Помимо JS-API язык задаётся декларативно (приоритет — сверху вниз):

html

<html data-mz-lang="en">                              <!-- живой атрибут, отслеживается -->
<script>window.MZBOT_CONFIG = { lang: 'en' };</script> <!-- до загрузки бандла -->
<script src="bundle.min.js" data-mz-lang="en" defer></script>

Ниже — build-time значение lang из конфига бандла, затем fallback 'ru'.

Свой текст бота тоже локализуется

bot.title, bot.titleClosed и bot.tips могут быть не строкой/массивом, а картой по языкам ({ ru: …, en: … }) — она пересчитывается при каждом setLang().

Подсказки (tips)

Подсказки-реплики, которые показываются в пустом чате: как только в переписке появляются сообщения, они скрываются. Дефолт зашит в бандл (bot.tips), хост-страница может заменить их в рантайме.

`MZBOT.setTips(tips)`

MZBOT.setTips(['Тарифы', 'Кейсы', 'Связаться']);      // заменить
MZBOT.setTips({ ru: ['Тарифы'], en: ['Pricing'] });   // карта по языкам
MZBOT.setTips('Одна подсказка');                      // строка → список из одного элемента
MZBOT.setTips([]);                                    // скрыть подсказки
MZBOT.setTips(null);                                  // вернуть значение из бандла

Пустые и пробельные элементы отбрасываются. Возвращает итоговый список для активного языка.

`MZBOT.getTips()`

MZBOT.getTips();   // → ['Тарифы', 'Кейсы', 'Связаться']

`MZBOT.setBotContent(patch)`

Тот же механизм для остальных строк бота — пригодится, когда на разных страницах сайта у бота разная «личность»:

MZBOT.setBotContent({
  header_title:        { ru: 'Поддержка', en: 'Support' },
  header_title_closed: 'Чем помочь?',
  bot_avatar_url:      'https://cdn.example.com/avatar.png',
});

MZBOT.setBotContent({ header_title: null });   // null — сбросить один ключ

Ключ	Что меняет
`tips`	Подсказки в пустом чате.
`header_title`	Заголовок открытого чата.
`header_title_closed`	Подпись на закрытой кнопке (`chat.type: '0'`).
`bot_avatar_url`	Аватар бота.

Начальные подсказки

Приоритет (сверху — выше):

html

<script>window.MZBOT_CONFIG = { tips: ['Тарифы', 'Кейсы'] };</script>
<script src="bundle.min.js" data-mz-tips='["Тарифы","Кейсы"]' defer></script>

data-mz-tips принимает JSON-массив, а если это не JSON — строку с разделителем | (data-mz-tips="Тарифы|Кейсы"). Ниже — bot.tips из конфига бандла.

Overlay-поверхность

Доступно, когда смонтирована overlay-поверхность (chat.overlay.enabled: true, см. Режимы встраивания).

Метод	Описание
`MZBOT.overlay.show()`	Показать угловой лаунчер.
`MZBOT.overlay.hide()`	Скрыть лаунчер.
`MZBOT.overlay.toggle()`	Переключить видимость лаунчера.
`MZBOT.overlay.isVisible()`	→ `boolean`.
`MZBOT.overlay.open()`	Открыть overlay-чат (покажет и лаунчер).
`MZBOT.overlay.close()`	Закрыть overlay-чат.

// пример: повесить на свою кнопку на сайте
document.querySelector('#my-chat-button')
  .addEventListener('click', () => MZBOT.overlay.toggle());

Константы (только чтение)

Свойство	Описание
`MZBOT.themes`	Список доступных режимов темы.
`MZBOT.patterns`	Список доступных SVG-паттернов.
`MZBOT.animations`	Список доступных анимаций сообщений.
`MZBOT.designs`	Список языков оформления (`default`, `glass`).
`MZBOT.langs`	Список поддерживаемых языков интерфейса.

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

Полный пример

html

<script src="bundle.min.js" defer></script>
<script>
  window.addEventListener('load', () => {
    // тёмная тема с зелёным акцентом и mesh-паттерном
    MZBOT.setTheme({ theme: 'dark', accent: '#0dbb52', pattern: 'mesh' });
    MZBOT.setGlow({ dark: true, intensity: 1.5 });

    // язык и подсказки — под язык страницы
    MZBOT.setLang(document.documentElement.lang || 'ru');
    MZBOT.setTips({
      ru: ['Тарифы', 'Кейсы', 'Связаться'],
      en: ['Pricing', 'Case studies', 'Contact us'],
    });

    // синхронизировать тему виджета с темой сайта
    MZBOT.subscribe((t) => document.body.dataset.chatTheme = t.resolvedTheme);
  });
</script>

JavaScript API ​

Тема ​

MZBOT.setTheme(patch) ​

MZBOT.getTheme() ​

MZBOT.setGlow(patch) ​

MZBOT.subscribe(callback) ​

Язык интерфейса ​

MZBOT.setLang(lang) ​

MZBOT.getLang() / MZBOT.langs ​

MZBOT.subscribeLang(callback) ​

Начальный язык ​

Подсказки (tips) ​

MZBOT.setTips(tips) ​

MZBOT.getTips() ​

MZBOT.setBotContent(patch) ​

Начальные подсказки ​

Overlay-поверхность ​

Константы (только чтение) ​

Полный пример ​

JavaScript API

Тема

`MZBOT.setTheme(patch)`

`MZBOT.getTheme()`

`MZBOT.setGlow(patch)`

`MZBOT.subscribe(callback)`

Язык интерфейса

`MZBOT.setLang(lang)`

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

`MZBOT.subscribeLang(callback)`

Начальный язык

Подсказки (tips)

`MZBOT.setTips(tips)`

`MZBOT.getTips()`

`MZBOT.setBotContent(patch)`

Начальные подсказки

Overlay-поверхность

Константы (только чтение)

Полный пример