Skip to content

JavaScript API

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

Источник: src/theme.js (тема и константы), src/services/overlayStore.js (overlay).

Тема

MZBOT.setTheme(patch)

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

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

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

MZBOT.getTheme()

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

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

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

MZBOT.setGlow(patch)

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

js
MZBOT.setGlow({ dark: true, light: true, intensity: 2 });
ПолеТипОписание
darkbooleanСвечение при тёмной теме.
lightbooleanСвечение при светлой теме.
intensity0.1..5Множитель силы (1 = дефолт).

MZBOT.subscribe(callback)

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

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

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

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

СвойствоОписание
MZBOT.themesСписок доступных режимов темы.
MZBOT.patternsСписок доступных SVG-паттернов.
MZBOT.animationsСписок доступных анимаций сообщений.
js
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.subscribe((t) => document.body.dataset.chatTheme = t.resolvedTheme);
  });
</script>