English

Русский

English

Русский

Embed modes ​

The widget can render in four ways. The mode is set under chat.* (see Configuration) and can be overridden on the host page.

ModeWhat it isEnabled by
Floating (default)Launcher button fixed in a corner; chat opens as an overlaydefault, chat.type: '1'
InlineLauncher sits in the page flow; opens as a fixed overlayinline: true + container
Static (docked)Chat already open as a permanent in-flow panel; no launcher or draggingstatic: true + container
Overlay surfaceAn extra floating launcher on top of the primary widget, same socketoverlay.enabled: true

Floating launcher ​

The default mode: the widget is fixed in a corner. Clicking the button opens the chat card (full-screen on mobile). Configurable: corner (chat.position), button shape and size (chat.button), open-card offsets (chat.offset).

html
<script src="bundle.min.js" defer></script>

Inline / embedded ​

The launcher sits in the page flow (position: relative), like a normal element. Clicking it opens the chat as a fixed overlay in the corner.

html
<!-- put the launcher wherever you want it on the page -->
<div id="morze-launcher"></div>

<!-- data-mz-container implies inline mode -->
<script
  src="bundle.min.js"
  data-mz-inline
  data-mz-container="#morze-launcher"
  defer
></script>

Equivalent via the config object:

html
<script>window.MZBOT_CONFIG = { inline: true, container: '#morze-launcher' };</script>

Notes

  • Requires the launcher chat type (chat.type: '1', the default).
  • The open chat is position: fixed, so it isn't constrained by the container. If an ancestor of the container has a transform/filter, it becomes the containing block for fixed children and the overlay will anchor to it instead of the viewport.
  • If the container isn't found, it falls back to <body>.

Static / docked ​

The chat renders already open, as a permanent in-flow panel — no launcher, no dragging, no height-resize, no mobile full-screen takeover. The widget fills its container's width and is responsive; its height comes from staticHeight.

html
<!-- size & place this however you like; the widget fills its width -->
<div id="morze-chat" style="max-width: 920px; margin: 0 auto;"></div>

<script
  src="bundle.min.js"
  data-mz-static
  data-mz-container="#morze-chat"
  data-mz-static-height="700"
  defer
></script>

Equivalent via the config object:

html
<script>
  window.MZBOT_CONFIG = {
    static: true,
    container: '#morze-chat',
    staticHeight: 700,        // px, or any CSS length string
    staticMaxWidth: null,     // optional width cap; null = fill the container
  };
</script>

Sizing:

  • staticHeight — height. A number = px; a CSS length string is passed through as-is: '100%', '80vh', 'clamp(420px, 78vh, 820px)'.
  • staticMaxWidth — width cap (the panel is then centered); null = fill the container.

Notes

  • Place it in a block container and give that container the width you want — the widget tracks it.
  • It ignores chat.type, offset, drag/resize and mobile full-screen: in static mode all host geometry is owned by CSS (:host([data-mz-static]) + the --mz-static-* custom properties), so JS never repositions it.
  • The host is position: relative, so it scrolls with the page like any normal element.

Overlay surface (a second widget) ​

The widget can mount two presentations of the same conversation at once: the primary widget (typically the static panel) plus a floating overlay launcher in a corner. Both share one socket and one conversation — a message typed in either appears in the other, live.

html
<script>
  window.MZBOT_CONFIG = {
    static: true, container: '#morze-chat',   // primary: docked in the page
    overlay: {
      enabled: true,        // mount the second (floating) surface
      startVisible: false,  // launcher hidden until you toggle it (default)
      position: 'rb',       // 'rb' right-bottom | 'lb' left-bottom
    },
  };
</script>

Control it from the host page (no rebuild):

js
MZBOT.overlay.toggle();     // show/hide the corner launcher
MZBOT.overlay.show();
MZBOT.overlay.hide();
MZBOT.overlay.isVisible();  // → boolean
MZBOT.overlay.open();       // open the overlay chat (reveals the launcher too)
MZBOT.overlay.close();

Notes

  • The overlay mounts on its own <mz-bot id="__mz-bot-overlay"> host appended to <body>; the primary keeps #__mz-bot. The Redux store and WebSocket are process singletons, so both surfaces are always in sync over the one socket.
  • The launcher's shape/size and the open-overlay offsets reuse the button/offset settings. The launcher's corner is overlay.position (independent of chat.position).
  • Notify sound: when the overlay is enabled it is the "attention" surface — the ping plays whenever the overlay is closed, regardless of the always-open static panel.
  • A working static-dock + overlay-toggle demo is in embed-test.html.

See also Architecture → Surfaces.