Configuration
The widget's behavior is driven by a single config object. Its defaults are baked into the bundle at build time (widget.config.js), and the host page can override any key at runtime.
Resolution priority
Lowest to highest (the top wins):
widget.config.js— build-time defaults baked into the bundle.<script data-mz-*>— attributes on the loading tag.window.MZBOT_CONFIG = {…}— global object (set before the bundle loads).<html data-mz-theme>— live attribute on<html>(theme only; watched by aMutationObserver).MZBOT.setTheme(…)— JS API calls at runtime.
TIP
For embed modes (inline/static/overlay/button/offset) the priority is: <script data-mz-*> → window.MZBOT_CONFIG → widget.config.js. For theme, two more top levels apply — <html data-mz-theme> and MZBOT.setTheme(...).
Three ways to set config on the host
html
<!-- 1) loading-script attributes -->
<script src="bundle.min.js" data-mz-theme="dark" data-mz-accent="#0dbb52" defer></script>
<!-- 2) global object (before the bundle) -->
<script>window.MZBOT_CONFIG = { theme: { mode: 'dark' }, chat: { position: 'lb' } };</script>
<script src="bundle.min.js" defer></script>
<!-- 3) live theme attribute on <html> -->
<html data-mz-theme="dark">Key reference
Identity & endpoints
| Key | Type | Default | Description |
|---|---|---|---|
USER_UUID | string | — | Client/bot identifier on the backend. |
API_HOST | string | https://api.assistant.morze.tech | Router HTTP endpoint. |
WS_HOST | string | wss://api.assistant.morze.tech/ws/ | WebSocket endpoint. |
bitrix24 | boolean | false | Bitrix24 placement mode: forward portal auth on every /msg and /action. |
Default points at production
For local development against morzebot-backend-v2 (:9000), override API_HOST/WS_HOST (local variants are commented in widget.config.js).
theme — visual theme
| Key | Values | Default | Description |
|---|---|---|---|
mode | light | white | dark | auto | dark | Color scheme (auto follows the OS). |
accent | CSS color | #9162e4 | Accent color — drives all themed elements. |
pattern | none | whisper | mesh | scales | bloom | cipher | prism | whisper | SVG background pattern of the chat area. |
patternOpacity | 0..1 | 0.05 | Pattern opacity. |
patternScale | 0.25..4 | 1.3 | Pattern scale. |
bgColors | array of colors | CSS string | — | Custom chat background (see Theming). |
bgAngle | degrees | 160 | Gradient angle. |
patternImage | URL | — | Seamless image overlay on top of the background. |
patternImageOpacity | 0..1 | 1 | Image opacity. |
patternImageSize | px | CSS background-size | — | Tile size. |
msgAnimation | bubble | unfurl | cascade | pop | breathe | bubble | Incoming-message animation. |
glow.dark / glow.light | boolean | false / true | Accent glow per resolved theme. |
glow.intensity | 0.1..5 | 0.2 | Glow strength. |
Details on the Theming page.
chat — layout & behavior
| Key | Values | Default | Description |
|---|---|---|---|
type | 1 | 0 | 1 | 1 = floating launcher button, 0 = strip header. |
position | rb | lb | rb | Corner: right-bottom / left-bottom. |
closedButton | blob | simple | simple | Closed-button style (only type:'1'). |
lockScrollMobile | boolean | true | Lock host scroll on mobile while open. |
sound | boolean | false | Master switch for the notify-sound feature. false also removes the menu item. |
notifySound | URL | https://cdn.morze.tech/notify.mp3 | Sound on incoming message while closed. '' disables. |
messengers | array | [telegram, vk] | Messenger buttons that fan out around the launcher on hover. |
inline | boolean | false | Inline mode — launcher in the page flow. Requires container. |
container | CSS selector | null | Host element to mount into (falls back to <body>). |
button.shape | circle | square | square | Shape of the simple button (blob ignores it). |
button.size | px | 50 | Button size. |
offset.x / offset.y | px | 44 / 8 | Open-card offset from the viewport edge. |
static | boolean | false | Static docked mode. Requires container. |
staticHeight | px | CSS length | '100%' | Static panel height. |
staticMaxWidth | px | CSS length | null | null | Static panel width cap. |
overlay.enabled | boolean | false | Mount the overlay surface. |
overlay.startVisible | boolean | false | Overlay launcher visible immediately. |
overlay.position | rb | lb | rb | Overlay launcher corner. |
Modes are covered in detail on the Embed modes page.
messengers[]
js
messengers: [
{ type: 'telegram', url: 'https://t.me/morzetech' },
{ type: 'vk', url: 'https://vk.com/morzetech' },
// custom: any messenger via an icon URL
{ type: 'viber', url: 'viber://chat?number=%2B7...', icon: 'https://cdn.example.com/viber.svg', color: '#7360F2', label: 'Viber' },
]type—whatsapp|telegram|vk|maxhave built-in icons and brand colors; any other type is custom and needsicon.url— link (opens in a new tab).color,icon,labelare optional.- An empty array turns the feature off.
bot — bot personality
| Key | Type | Default | Description |
|---|---|---|---|
avatar | URL | https://cdn.morze.tech/morze-avatar-blue.png | Bot avatar. |
title | string | Morze Assistant | Open chat title. |
titleClosed | string | Могу вам помочь | Caption on the closed button. |
responseDelay | ms | 1200 | Artificial delay before revealing an incoming message ("typing…" shows during it). 0 disables. |
tips | string[] | — | Quick-reply suggestions. |
Full data-mz-* attribute list
data-mz-theme data-mz-accent data-mz-pattern
data-mz-msg-animation data-mz-bg-colors data-mz-bg-angle
data-mz-pattern-image data-mz-pattern-image-opacity data-mz-pattern-image-size
data-mz-container data-mz-inline data-mz-static
data-mz-static-height data-mz-static-max-width
data-mz-overlay data-mz-overlay-start-visible data-mz-overlay-position
data-mz-sound data-mz-button-shape data-mz-button-size
data-mz-offset-x data-mz-offset-ydata-mz-bg-colors
Accepts a comma-separated color string: data-mz-bg-colors="#1b2735,#283e51,#0a1622".