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 });| Поле | Тип | Описание |
|---|---|---|
dark | boolean | Свечение при тёмной теме. |
light | boolean | Свечение при светлой теме. |
intensity | 0.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>