Welcome Element

Плавающий видеовиджет для YOOtheme Pro: Delay, Scroll Depth, CustomEvent, frequency, consent и CTA на уровне Builder

Joomla! 6

YOOtheme Pro 5

PHP 8

Приобрести расширение

Поддержка

Видео по триггеру с переходом к CTA

Source, trigger, initial state, frequency и CTA настраиваются в Builder. Постер остаётся до разрешённой загрузки; iframe не создаётся раньше consent.

Виджет не блокирует страницу и сворачивает другой раскрытый экземпляр.

Три состояния Welcome Element: свёрнутое, раскрытое и закрытое

Minimized, expanded и dismissed

Minimized сохраняет launcher, expanded показывает видео и CTA, dismissed завершает текущий показ с учётом frequency.

Экземпляры работают независимо; при раскрытии одного другой сворачивается.

Delay, Scroll Depth, External Event и Immediate

Trigger задаёт момент показа. CTA выполняет link, click-target, scroll-target или event, затем применяет keep, minimize или dismiss.

Delay

delay_ms задаёт паузу перед применением initial_state.

Scroll Depth

scroll_percent задаёт порог 0–100% и сохраняет приоритет основного контента до его достижения.

External Event

trigger_event связывает виджет с формой, сценарием или другим компонентом через CustomEvent.

Immediate

Применяет initial_state при инициализации без дополнительных условий.

Четыре триггера Welcome Element ведут к одному видеовиджету и CTA

Welcome Element в работе

Конфигурация demo: локальный MP4, текстовая кнопка Play, состояние minimized, позиция bottom-right и CTA на #settings. Кнопка ниже раскрывает этот же экземпляр по Widget ID.

Открыть Welcome Element

Порядок выполнения

Runtime применяет device visibility → consent → trigger → frequency → load policy.

1. Source

Resolver принимает поддерживаемые файлы и провайдеры; неизвестный iframe не выводится.

2. Poster

Резервирует геометрию и откладывает создание проигрывателя.

3. Lifecycle

pending → expanded/minimized → dismissed.

4. CTA

link, click-target, scroll-target или event; затем keep, minimize или dismiss.

Все публичные настройки MSG Welcome

Справочник соответствует element definition 0.1.6. Для каждого собственного поля указаны фактический результат, условия, допустимые значения и default; значения options приведены в сохранённом формате Builder.

Content

Video `video`	Обязательный источник media. Поле принимает локальные MP4, M4V, OGV и WebM либо URL YouTube, Vimeo, RuTube, VK Video, OK Video, Dzen, Cloudflare Stream и Yandex Cloud Video; доступен dynamic source. Пустой или нераспознанный источник останавливает render элемента.
Poster `poster`	Изображение остаётся видимым до materialize video или iframe и используется внутри свёрнутого toggle. Доступен dynamic source; для готового layout подключается исходный PNG из Joomla media tree.
Focal Point `poster_focal_point`	Задаёт область, которая должна сохраниться при object-fit/cropping poster и native video. Поле доступно после выбора Poster; пустое значение оставляет Center Center.
Accessible Title `video_title`	Формирует `aria-label` контейнера Welcome Element и `title` внешнего iframe. Default: `Video welcome`; доступен dynamic source.

Settings — Playback

Aspect Ratio `aspect_ratio`	Задаёт пропорцию media-card: `9:16`, `16:9` — default, `1:1`, `4:5` или `custom`. Значение применяется к poster и video.
Custom Ratio `aspect_ratio_custom`	Показывается только при `aspect_ratio=custom`. Принимает положительное отношение `width:height`, например `3:4`; некорректное значение runtime заменяет на `16:9`.
Load Policy `load_policy`	`interaction` — default — создаёт media после явного Play. `reveal` и `eager` разрешают materialize после показа виджета; для external iframe по-прежнему требуются expanded state и consent, если он включён.
Respect YOOtheme Consent `respect_consent`	Default включён. Для external provider iframe не создаётся до разрешения соответствующего сервиса YOOtheme Consent Manager; local video настройку не использует.
Autoplay `autoplay`	Default выключен. При включении runtime принудительно включает muted; native video стартует после перехода в expanded, external provider получает autoplay только когда его iframe разрешено создать.
Loop `loop`	Default включён. Для local video задаёт атрибут `loop`; для external service передаёт параметр повтора, если provider его поддерживает.
Muted `muted`	Default включён. Определяет исходное состояние звука; при Autoplay поле недоступно, потому что autoplay всегда запускается без звука.
Native Video Controls `controls`	Default выключен. Показывает browser controls только у local video и только при `play_button_position=overlay`. External video использует controls своего provider.
Play Button Label `play_button_label`	Текст кнопки запуска поверх poster. Default: `Play`; пустое значение оставляет иконку с доступным именем `Play video`. Поле поддерживает dynamic source и сохраняет подпись в consent-state.
Play Button Position `play_button_position`	`overlay` — default — размещает кнопку с подписью поверх poster. `controls` заменяет её штатной кнопкой Play/Pause в нижней панели local video; external provider всегда использует `overlay`.
Close Action `close_action`	`dismiss` — default — полностью закрывает widget после анимации; `minimize` оставляет доступный toggle. В версии 0.1.6 отдельной кнопки сворачивания нет.

Settings — Position and Size

Position `widget_position`	Фиксирует widget в углу viewport: `bottom-right` — default, `bottom-left`, `top-right` или `top-left`. Сторона также определяет направление spatial motion.
Desktop Width `width`	Ширина expanded card при viewport шире 639 px. Диапазон 180–520 px; default 280 px.
Mobile Width `width_mobile`	Ширина expanded card при viewport до 639 px. Диапазон 140–360 px; default 200 px; Full Width on Mobile может переопределить итоговую ширину.
Full Width on Mobile `full_width_mobile`	Default выключен. В expanded state занимает доступную ширину viewport за вычетом mobile offsets и safe-area; размер свёрнутого toggle остаётся равен Minimized Size.
Minimized Size `minimized_size`	Диаметр свёрнутого toggle. Диапазон 48–120 px; default 72 px.
Horizontal Offset `offset_x`	Горизонтальный отступ desktop от выбранного левого или правого края. Runtime ограничивает значение диапазоном 0–200 px; default 24 px.
Vertical Offset `offset_y`	Вертикальный отступ desktop от выбранного верхнего или нижнего края. Runtime ограничивает значение диапазоном 0–200 px; default 24 px.
Mobile Horizontal Offset `offset_x_mobile`	Горизонтальный отступ при viewport до 639 px. Runtime ограничивает значение диапазоном 0–100 px и добавляет соответствующий safe-area inset; default 16 px.
Mobile Vertical Offset `offset_y_mobile`	Вертикальный отступ при viewport до 639 px. Runtime ограничивает значение диапазоном 0–100 px и добавляет соответствующий safe-area inset; default 16 px.
Stacking Order `z_index`	Определяет слой fixed widget относительно остального интерфейса. Default 999; runtime принимает целое значение от 0 до 2147483647.

Settings — Appearance

Border Radius `border_radius`	Скругляет expanded card. Диапазон 0–100 px; default 20 px.
Border Width `border_width`	Толщина рамки card. Диапазон 0–12 px; default 0 px, поэтому Border Color визуально не применяется.
Border Color `border_color`	Цвет рамки при Border Width больше нуля. Default: `#ffffff`.
Box Shadow `box_shadow`	Выбирает тень контейнера: `none`, `small`, `medium` — default — или `large`.

Settings — Display and Motion

Trigger `trigger`	Определяет момент первого reveal: `immediate`, `delay` — default, `scroll` или `event`. При срабатывании дополнительно проверяются device visibility и Frequency; внешнее открытие по Widget ID обходит Trigger и Frequency.
Delay (ms) `delay_ms`	Показывается при `trigger=delay`. Задержка отсчитывается после инициализации на разрешённом device; runtime принимает 0–600000 мс, default 5000 мс.
Scroll Depth `scroll_percent`	Показывается при `trigger=scroll`. Reveal срабатывает при достижении доли прокручиваемого диапазона страницы 0–100%; default 35%.
Event Name `trigger_event`	Показывается при `trigger=event`. Window listener ждёт CustomEvent с точным именем; default `msgwelcome:show`. Некорректное имя runtime заменяет default.
Initial State `initial_state`	`minimized` — default — показывает toggle; `expanded` сразу показывает card; `auto-expand` сначала проигрывает Initial Appearance, затем запускает Expand после завершения первой фазы.
Show on Desktop `show_desktop`	Default включён. Разрешает widget при viewport шире 639 px; выключение скрывает экземпляр, снимает trigger и останавливает media на этом диапазоне.
Show on Mobile `show_mobile`	Default включён. Разрешает widget при viewport до 639 px; выключение скрывает экземпляр, снимает trigger и выгружает external iframe.
Frequency `frequency`	`always` показывает на каждом page view; `session` — default — один раз за browser session; `days` сохраняет срок в localStorage; `cookie` использует functional cookie.
Days `frequency_days`	Показывается при `frequency=days`. Задаёт паузу до следующего автоматического reveal; runtime принимает 1–365 дней, default 7.
Cookie Name `frequency_cookie_name`	Показывается при `frequency=cookie`. Допустимы буквы, цифры, точка, подчёркивание и дефис; пустое или некорректное значение заменяется стабильным `msgwelcome_<Widget ID>`.
Cookie Lifetime `frequency_cookie_lifetime`	Показывается при `frequency=cookie`. Срок functional cookie — 1–3650 выбранных единиц; default 30.
Lifetime Unit `frequency_cookie_unit`	Показывается при `frequency=cookie`. Единица срока: `minutes`, `hours` или `days` — default. До functional consent ограничение хранится только в памяти текущей страницы.
Initial Appearance Animation `load_animation`	Анимирует первое появление toggle: `spring`, `fade`, `slide-up` — default, `slide-side`, `offscreen-in`, `scale`, `bounce`, `shake`, `pulse`, `flip`, `none`.
Initial Appearance Duration `load_animation_duration`	Длительность enter-фазы: 80–1200 мс с шагом 20; default 360 мс. Поле отключено при `load_animation=none`.
Expand Animation `expand_animation`	Анимирует переход toggle → card: `scale` — default, `fade`, `slide`, `slide-side`, `spring`, `bounce`, `reveal`, `blur`, `flip`, `none`.
Expand Duration `expand_animation_duration`	Длительность expand-фазы: 80–1200 мс с шагом 20; default 460 мс. Поле отключено при `expand_animation=none`.
Minimize Animation `minimize_animation`	Анимирует переход card → toggle: `scale` — default, `fade`, `slide`, `slide-side`, `collapse`, `blur`, `flip`, `none`.
Minimize Duration `minimize_animation_duration`	Длительность minimize-фазы: 80–1200 мс с шагом 20; default 400 мс. Поле отключено при `minimize_animation=none`.
Close Animation `close_animation`	Скрывает toggle после полного Dismiss: `offscreen`, `fade` — default, `scale`, `slide`, `drop`, `blur`, `flip`, `none`. Dismiss сначала выполняет Minimize, затем Close.
Close Duration `close_animation_duration`	Длительность close-фазы: 80–1200 мс с шагом 20; default 360 мс. Поле отключено при `close_animation=none`; reduced motion выполняет фазу сразу, не меняя сохранённое значение.

Settings — Call to Action

CTA Type `cta_type`	`none` — default — отключает CTA; `link` открывает URL; `click-target` вызывает первый элемент по selector; `scroll-target` прокручивает к нему; `event` отправляет CustomEvent.
Label `cta_label`	Видимый текст CTA для всех типов, кроме `none`. CTA без Label выводится только при выбранной Icon и заполненном Link ARIA Label.
Icon `cta_icon`	Необязательная иконка YOOtheme для всех активных типов CTA. Поддерживает dynamic source; может работать без Label при наличии доступного имени.
Link `cta_link`	URL режима `link`. Принимает абсолютные и относительные Joomla links; пустой или небезопасный URL не создаёт CTA.
Link Title `cta_link_title`	Необязательный HTML `title` ссылки. Не заменяет видимый Label или Link ARIA Label.
Link ARIA Label `cta_aria_label`	Доступное имя CTA. Обязательно для icon-only CTA; при видимом Label заполняется только когда доступное имя должно отличаться от текста.
Style `cta_button_style`	Штатный стиль YOOtheme: `default` — default, `primary`, `secondary`, `danger`, `text`, пустой Link, `link-muted` или `link-text`.
Size `cta_button_size`	Штатный размер CTA: `small`, пустое значение — default — или `large`.
Icon Alignment `cta_icon_align`	Показывается при выбранной Icon. Размещает её `left` — default — или `right` относительно Label.
Position `cta_position`	Размещает CTA относительно нижних controls: `left` — default, `right`, `above` или `below`.
Open in a New Window `cta_link_target`	Только для `link`. Добавляет `target="_blank"`; runtime также формирует безопасное значение `rel`.
Download `cta_link_download`	Только для `link`. Добавляет HTML-атрибут `download` для подходящего URL.
Nofollow `cta_link_rel_nofollow`	Только для `link`. Добавляет `nofollow` в `rel`.
Noreferrer `cta_link_rel_noreferrer`	Только для `link`. Добавляет `noreferrer` в `rel`; New Window дополнительно требует `noopener`.
CSS Selector `cta_selector`	Показывается для `click-target` и `scroll-target`. Используется первый подходящий элемент вне Welcome widget; некорректный selector или отсутствие target завершают CTA без After Action.
Event Name `cta_event`	Показывается для `event`. Default `msgwelcome:cta-action`; аналитические `msgwelcome:close` и `msgwelcome:cta` зарезервированы и заменяются default.
After Action `cta_after_action`	После успешно выполненного CTA оставляет card открытой (`keep` — default), сворачивает (`minimize`) или полностью закрывает (`dismiss`). При ошибке CTA состояние не меняется.

Settings — Analytics

Widget ID `widget_id`	Стабильный идентификатор экземпляра для внешнего открытия, public API, frequency keys и фильтрации DOM events. Runtime оставляет буквы, цифры, подчёркивание и дефис; пустое значение заменяет element ID.
Enable analytics events `analytics_enabled`	Default включён. Отправляет bubbling DOM events impression, open, play, progress, CTA и close с техническим `event.detail`; плагин не загружает analytics SDK и не делает сетевых запросов.

Guide — CTA and External Open

CTA и внешнее открытие

CTA Type задаёт действие кнопки внутри виджета:

Link открывает URL из настроек CTA.
Click Existing Target активирует первый элемент, найденный по CSS Selector.
Scroll to Target прокручивает страницу к первому элементу, найденному по CSS Selector.
Dispatch Event отправляет CustomEvent с именем из Event Name.

After Action — Keep Open, Minimize или Dismiss — применяется только после успешно выполненного CTA.

Чтобы открыть виджет внешней кнопкой, задайте элементу MSG Welcome уникальный Widget ID, например homepage-welcome. Затем в Advanced → Attributes внешней кнопки добавьте атрибут:

data-msgwelcome-open="homepage-welcome"

Делегированный обработчик работает и для кнопок, добавленных после загрузки страницы. Внешнее открытие обходит автоматические Trigger и Frequency, но сохраняет ограничения Show on Desktop и Show on Mobile. Неизвестный или недоступный Widget ID не отменяет стандартное действие внешней кнопки.

Атрибут data-msgwelcome-open — основной способ интеграции. Для программного вызова доступен публичный API:

<script>
window.MSGWelcome?.get('homepage-welcome')?.openExternal();
</script>

Guide — Analytics Events

Analytics events и site-owned интеграции

MSG Welcome не загружает analytics SDK и не отправляет аналитические запросы. При включённом Enable analytics events успешный CTA отправляет msgwelcome:cta, а явное закрытие — msgwelcome:close. Оба события всплывают до document.

В event.detail доступны widgetId, elementId, provider, state, event, action, ctaType для CTA и timestamp. URL видео, CSS-селекторы и идентификаторы посетителя не передаются.

Имена msgwelcome:cta и msgwelcome:close зарезервированы для аналитики. Режим Dispatch Event по умолчанию использует отдельное имя msgwelcome:cta-action.

Скрипт добавьте в YOOtheme Pro → Settings → Scripts → Custom Script вместе с тегами <script>. Категорию Consent Manager выбирайте по назначению интеграции — обычно Statistics или Marketing. Скрипт начнёт работать после соответствующего согласия; более ранние события повторно не отправляются.

Базовый обработчик с фильтром Widget ID

<script>
document.addEventListener('msgwelcome:close', function (event) {
  if (event.detail.widgetId !== 'homepage-welcome') return;
  console.log('Welcome video closed', event.detail);
});

document.addEventListener('msgwelcome:cta', function (event) {
  if (event.detail.widgetId !== 'homepage-welcome') return;
  console.log('Welcome video CTA', event.detail);
});
</script>

Google Tag Manager или существующий dataLayer

<script>
window.dataLayer = window.dataLayer || [];

document.addEventListener('msgwelcome:close', function (event) {
  window.dataLayer.push({
    event: 'msgwelcome_close',
    widget_id: event.detail.widgetId,
    provider: event.detail.provider
  });
});

document.addEventListener('msgwelcome:cta', function (event) {
  window.dataLayer.push({
    event: 'msgwelcome_cta',
    widget_id: event.detail.widgetId,
    cta_type: event.detail.ctaType
  });
});
</script>

Яндекс Метрика

Замените 12345678 и имена целей значениями конкретного сайта.

<script>
document.addEventListener('msgwelcome:close', function (event) {
  ym(12345678, 'reachGoal', 'WELCOME_CLOSE', {
    widget_id: event.detail.widgetId
  });
});

document.addEventListener('msgwelcome:cta', function (event) {
  ym(12345678, 'reachGoal', 'WELCOME_CTA', {
    widget_id: event.detail.widgetId,
    cta_type: event.detail.ctaType
  });
});
</script>

Advanced

Dynamic Content `source`, `condition`, `condition_value`, `show_empty`	Штатная привязка Builder к dynamic source. Condition и Value фильтруют результат, а Show Empty разрешает render при пустом значении и отключает условие.
ID / Classes / Attributes `id`, `class`, `attributes`	Штатные advanced-атрибуты. В layout этой страницы произвольные Classes не используются.
CSS / Transform `css`, `transform`	Штатные CSS и Transform Builder. В layout этой страницы custom CSS не используется.

Motion Lab

Выберите фазу, эффект и длительность. Стенд повторяет production-motion Welcome Element и показывает фактическую траекторию до сохранения настроек в Builder.

Первое появление 480 мс

Responsive без отдельного CSS

width, width_mobile и offsets задаются раздельно. full_width_mobile использует доступный viewport с safe-area; touch targets сохраняют минимум 44 × 44 CSS px.

Keyboard controls, focus-visible и reduced motion встроены в runtime. При появлении фокус не перехватывается; smooth scroll отключается вместе с motion.

Welcome Element на desktop и mobile с безопасными отступами; в видеокадре показан человек

Последовательность Poster, Consent, Load и Play без запроса до согласия

Consent до создания iframe

Native video работает без внешнего сервиса. YouTube и Vimeo используют consent‑сервисы YOOtheme; остальные iframe‑провайдеры — preferences.msg-external-video.

До разрешения остаётся poster, iframe не создаётся. Плагин не подключает analytics SDK и не отправляет сетевые события; интеграция использует DOM events.

Список изменений

0.1.7

Изменено

Исправлена прокрутка страницы вверх при нажатии на кнопку или ссылку с `data-msgwelcome-open`

Изменено

Иконки Play, Pause, Volume, Muted и Close приведены к одному размеру и толщине линий

0.1.6

Добавлено

Добавлены отдельные эффекты и длительность для появления toggle, разворачивания и сворачивания видео, а также полного закрытия виджета

Добавлено

Добавлен режим `Auto Expand`: сначала появляется toggle, затем автоматически открывается видеокарточка

Добавлено

Расширен набор анимаций: пружина, отскок, тряска, пульсация, раскрытие, размытие, поворот, падение и появление из-за экрана

Добавлено

Для локального видео добавлен выбор между кнопкой запуска поверх видео и Play/Pause в нижней панели

Изменено

При выключенных элементах управления браузера кнопка Play/Pause поверх видео появляется при наведении на desktop. На mobile она прозрачна во время воспроизведения и остаётся видимой после паузы

Добавлено

Одна кнопка закрытия теперь может полностью закрыть или свернуть виджет — действие выбирается в настройках

Добавлено

Добавлены стабильные CSS-классы для видео, CTA, toggle и элементов управления

Изменено

Улучшена работа клавиатурного фокуса и поддержка reduced motion

Лицензия

GNU GPL v3

Бесплатно

Скачивание без ограничений
Использование на любом количестве сайтов

Платно

Помощь в установке и настройке
Техническая поддержка
Исправление проблем совместимости со сторонними расширениями и библиотеками
Доработка функционала под конкретные требования заказчика

Загляните в раздел услуг

Welcome Element

Видео по триггеру с переходом к CTA

Minimized, expanded и dismissed

Delay, Scroll Depth, External Event и Immediate

Delay

Scroll Depth

External Event

Immediate

Welcome Element в работе

Порядок выполнения

1. Source

2. Poster

3. Lifecycle

4. CTA

Все публичные настройки MSG Welcome

CTA и внешнее открытие

Analytics events и site-owned интеграции

Motion Lab

Responsive без отдельного CSS

Consent до создания iframe

Список изменений

0.1.7

0.1.6

Лицензия

Закажи разработку

Обязательные

Функциональные

Аналитические

Welcome Element

Видео по триггеру с переходом к CTA

Minimized, expanded и dismissed

Delay, Scroll Depth, External Event и Immediate

Delay

Scroll Depth

External Event

Immediate

Welcome Element в работе

Порядок выполнения

1. Source

2. Poster

3. Lifecycle

4. CTA

Все публичные настройки MSG Welcome

CTA и внешнее открытие

Analytics events и site-owned интеграции

Motion Lab

Responsive без отдельного CSS

Consent до создания iframe

Список изменений

0.1.7

0.1.6

Лицензия

Закажи разработку

Настройки Cookies

Обязательные

Функциональные

Аналитические