Русский

English

Русский

English

Режимы встраивания ​

Виджет умеет рендериться четырьмя способами. Режим задаётся в chat.* (см. Конфигурацию) и может быть переопределён на хост-странице.

РежимЧто этоВключается
Плавающий (по умолчанию)Кнопка-лаунчер фиксирована в углу, чат открывается оверлеемдефолт, chat.type: '1'
InlineКнопка-лаунчер стоит в потоке страницы; открывается фиксированным оверлеемinline: true + container
Статичный (docked)Чат уже открыт, постоянная панель в вёрстке; без лаунчера и перетаскиванияstatic: true + container
Overlay-поверхностьДополнительный плавающий лаунчер поверх основного виджета, на том же сокетеoverlay.enabled: true

Плавающий лаунчер ​

Режим по умолчанию: виджет fixed в углу экрана. Клик по кнопке открывает карточку чата (на мобильных — полноэкранно). Настраивается угол (chat.position), форма и размер кнопки (chat.button), отступы открытой карточки (chat.offset).

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

Inline / встроенный ​

Кнопка-лаунчер ставится в поток страницы (position: relative), как обычный элемент. Клик открывает чат фиксированным оверлеем в углу.

html
<!-- поставьте лаунчер туда, где он нужен на странице -->
<div id="morze-launcher"></div>

<!-- data-mz-container подразумевает inline-режим -->
<script
  src="bundle.min.js"
  data-mz-inline
  data-mz-container="#morze-launcher"
  defer
></script>

Эквивалент через объект конфига:

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

Заметки

  • Требует тип лаунчера chat.type: '1' (дефолт).
  • Открытый чат — position: fixed, поэтому он не ограничен контейнером. Если у предка контейнера есть transform/filter, он становится containing-блоком для fixed-потомков, и оверлей привяжется к нему, а не к вьюпорту.
  • Если контейнер не найден — фолбэк на <body>.

Статичный / докнутый ​

Чат рендерится уже открытым, как постоянная панель в потоке страницы: без лаунчера, перетаскивания, ресайза по высоте и полноэкранного захвата на мобильных. Виджет заполняет ширину контейнера и адаптивен; высота берётся из staticHeight.

html
<!-- задайте размер и место; виджет заполнит ширину -->
<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>

Эквивалент через объект конфига:

html
<script>
  window.MZBOT_CONFIG = {
    static: true,
    container: '#morze-chat',
    staticHeight: 700,        // px или любая CSS-длина строкой
    staticMaxWidth: null,     // опциональный кап ширины; null = заполнить контейнер
  };
</script>

Размеры:

  • staticHeight — высота. Число = px; CSS-строка пробрасывается как есть: '100%', '80vh', 'clamp(420px, 78vh, 820px)'.
  • staticMaxWidth — кап ширины (панель центрируется); null = заполнить контейнер.

Заметки

  • Ставьте в блочный контейнер и задавайте ширину ему — виджет следует за ней.
  • Игнорирует chat.type, offset, drag/resize и полноэкранный режим: вся геометрия в статике принадлежит CSS (:host([data-mz-static]) + --mz-static-*), JS виджет не двигает.
  • Хост position: relative — скроллится со страницей как обычный элемент.

Overlay-поверхность (второй виджет) ​

Можно смонтировать две презентации одного разговора одновременно: основной виджет (обычно статичная панель) плюс плавающий overlay-лаунчер в углу. Оба делят один сокет и один разговор — сообщение, набранное в любом, появляется в другом вживую.

html
<script>
  window.MZBOT_CONFIG = {
    static: true, container: '#morze-chat',   // основной: докнут в страницу
    overlay: {
      enabled: true,        // смонтировать вторую (плавающую) поверхность
      startVisible: false,  // лаунчер скрыт, пока вы его не покажете (дефолт)
      position: 'rb',       // 'rb' право-низ | 'lb' лево-низ
    },
  };
</script>

Управление с хост-страницы (без пересборки):

js
MZBOT.overlay.toggle();     // показать/скрыть угловой лаунчер
MZBOT.overlay.show();
MZBOT.overlay.hide();
MZBOT.overlay.isVisible();  // → boolean
MZBOT.overlay.open();       // открыть overlay-чат (покажет и лаунчер)
MZBOT.overlay.close();

Заметки

  • Overlay монтируется на свой хост <mz-bot id="__mz-bot-overlay"> в <body>; основной остаётся #__mz-bot. Redux-store и WebSocket — процессные синглтоны, поэтому обе поверхности всегда синхронны по одному сокету.
  • Форма/размер лаунчера и отступы открытого overlay переиспользуют button/offset. Угол лаунчера — overlay.position (независимо от chat.position).
  • Звук уведомления: при включённом overlay именно он — «поверхность внимания»; пинг играет, когда overlay закрыт, независимо от всегда-открытой статичной панели.
  • Рабочее демо статик-док + overlay-тогл — в embed-test.html.

См. также раздел Архитектура → Поверхности.