Как зритель видит демо

Опубликованное демо открывается по публичной ссылке или внутри вставки на сайте. Зритель видит стартовый экран, шаги, подсказки, плашки действия, блюр, меню, нижнюю панель, видео-кружки и субтитры, если автор включил эти элементы.

Новые публичные ссылки могут включать пространство: /w/{space}/demo/{slug}. Такая ссылка открывается только если демо принадлежит указанному пространству. Старые ссылки /demo/{slug} и старые вставки /embed/{slug} остаются рабочими.

Навигация

Зритель может двигаться по демо несколькими способами:

• нажимать точки внимания, области и подсказки;
• нажимать плашки действия на шаге;
• использовать кнопки на экранах глав;
• выбирать шаги на нижней панели;
• открывать меню;
• запускать повтор;
• нажимать стрелки на клавиатуре;
• смотреть демо с автоматическим переходом, если автор его включил.

Нижняя панель показывает все шаги, которые автор оставил видимыми в навигации. Если стартовый экран включен, он остается доступным как первый шаг. Пункты меню и кнопка меню тоже не ведут на шаги, которые автор скрыл из навигации. Если подсказка или кнопка шага указывает на скрытый шаг, viewer пропускает его и открывает следующий видимый шаг. Плашки действия используют те же правила переходов, но не переключают очередь обычных подсказок на текущем шаге.

• ArrowRight — следующий доступный шаг
• ArrowLeft — предыдущий доступный шаг

Если включен автоматический переход, статичные шаги переключаются после заданной задержки. Шаги с видео, видео-кружком или озвучкой ждут окончания самого длинного слоя шага. Если видео заканчивается раньше видео-кружка или озвучки, кадр видео остается на месте, а звук или кружок продолжают играть. Любое ручное действие зрителя сбрасывает текущий таймер.

Автор может выбрать основной цвет элементов плеера. Он применяется к кнопке Начать / Продолжить / Повторить и активному прогрессу нижней панели на компьютере и телефоне. Для читаемости Smotree автоматически использует на этом фоне белый или чёрный текст. Цвета кнопок внутри стартового экрана, заставок, меню и подсказок от этой настройки не зависят.

Стартовый экран и главы

Стартовый экран показывает обложку и кнопку начала просмотра. Автор может оставить фоном кадр следующего шага, выбрать однотонный цвет или загрузить свою картинку, а также настроить цвет заголовка и описания. Экраны глав делят сценарий на смысловые части: например, настройка, проверка результата и следующий шаг.

На экране главы могут быть фон, изображение предпросмотра и кнопки. Если автор выключил размытие, фон заполняет экран без размытия; варианты S и M размывают этот же фон. Изображение предпросмотра показывается отдельным слоем и не заменяет фон заставки. В боковой компоновке оно заполняет блок до боковой и нижней границ без растяжения; часть исходного изображения может быть обрезана по краям. Цвет и шрифт текста главы применяются к заголовку и описанию. Цвет кнопок можно выбрать из пресетов или настроить отдельно для фона и текста. Логотип управляется общими настройками плеера, а не отдельной главой.

Заставка может показывать форму вместо кнопок. Viewer проверяет обязательные поля и формат значений, сохраняет ответ, и только после успешного сохранения переходит дальше или открывает настроенный автором URL. Если сеть или сервер недоступны, введённые значения остаются на экране и зритель может повторить отправку. Формы не попадают в скачиваемые Video/GIF; остальные шаги экспортируются в обычном порядке.

Медиа и движение

Демо может состоять из статичных экранов, фрагментов видео, пустых экранов и кадров, созданных из видео. При переходе между шагами Smotree старается сохранять визуальную непрерывность, чтобы зритель не терял контекст. Если автор добавил отдельный видео-шаг, при переходе на него канвас показывает само видео, а не предыдущий статичный экран. Viewer ждёт готовый первый кадр видео и меняет основной слой только после того, как новое медиа можно показать без пустого или мерцающего кадра.

Приближение двигает только содержимое шага. Подсказки, меню и элементы плеера остаются на месте.

Плашка действия остается поверх канваса в месте или типе размещения, который выбрал автор. Она может быть обычным баннером, верхней панелью, мини-кнопкой или загруженным изображением. Кликабельна вся плашка целиком: текст и стрелка не являются отдельными ссылками. Плашка может вести на другой шаг или открыть внешний URL, а такой клик учитывается в аналитике как нажатие кнопки действия. Плашки действия сейчас не добавляются в экспорт изображений, видео или GIF.

Блюр скрывает выбранные области экрана или видео-шага и не влияет на навигацию или воспроизведение. Если демо встроено на сайт или открыто на другом размере экрана, блюр остается на нужной области интерфейса.

На телефонах и в узких вставках Smotree автоматически включает мобильный вид. Точки и области остаются интерактивными на экране, а текст активной подсказки переносится под изображение демо, чтобы не закрывать интерфейс. Внутри канваса остаются только записанный контент и точки аннотаций. Сразу под ним идет компактная нижняя панель со шкалой шагов, воспроизведением и звуком, ниже показываются текст подсказки и кнопки действия. Субтитры в мобильном виде не показываются, а логотип Smotree в канвасе сокращается до иконки. Если в демо больше одного шага, в мобильном виде также остаются круглые кнопки назад и вперед. Они не перекрывают записанный экран и остаются доступными после текста подсказки или кнопок действия.

Кнопки плеера

В зависимости от настроек демо зритель может видеть:

• полноэкранный режим;
• повтор;
• кнопку Поделиться или копирование ссылки, если ссылка доступна;
• сквозное управление звуком и субтитрами всего демо, если автор включил эти кнопки в настройках плеера;
• нижнюю панель со шагами;
• кнопки назад и вперед;
• меню;
• воспроизведение или паузу всего видео-шага.

Кнопка ссылки копирует публичный адрес просмотра. Даже внутри iframe зритель получит /demo/{slug} или /w/{space}/demo/{slug}, а не embed-адрес. Если автор перегенерировал публичную ссылку, копирование использует новый slug.

Если у демо включена Рамка, звук и субтитры находятся в верхней панели рядом с полноэкранным режимом и ссылкой. Без Рамки эти кнопки появляются в правом верхнем углу канваса при наведении или фокусе. Кнопка звука управляет основным видео, видео-кружком и AI-озвучкой, если такие медиа есть в демо. Отдельная настройка автора Звук включен при старте задает, стартуют ли эти медиа со звуком или без звука. Она работает независимо от видимости кнопки звука: автор может скрыть управление звуком, но все равно выбрать стартовое состояние звука.

При наведении на шаг нижняя панель показывает предпросмотр. Если шагов много, панель показывает шаги блоками до восьми полосок, а скрытые части сценария показывает тремя точками слева или справа. Наведённая полоска становится выше, но не шире и не перестраивает блок, поэтому таймлайн не сдвигается под курсором. Предпросмотр открывается рядом с наведённой полоской и остаётся внутри канваса. Стартовый экран подписывается отдельно, а обычные шаги сохраняют авторские названия из редактора. Если в редакторе шаг называется Шаг 2, viewer покажет его как Шаг 2, даже когда перед ним включен стартовый экран.

На видео-шаге нижняя панель управляет всем шагом сразу: основным видео, видео-кружком и AI-озвучкой. Перемотка активного сегмента также двигает все слои в одно и то же место шага. Выключение звука и субтитры остаются сквозными настройками плеера и не привязаны к текущему шагу. Стартовое состояние звука применяется одинаково к видео-шагам, видео-кружкам и озвучке. Если автор сделал видео-шаг ручным, окончание ролика не переводит зрителя на следующий шаг само по себе, но сам видео-шаг начинает проигрываться при входе. Загруженные вертикальные или квадратные видео-шаги вписываются в канвас с сохранением пропорций, как в редакторе.

Клик по пустому месту видео-шагa тоже ставит шаг на паузу или продолжает воспроизведение. Клики по подсказкам, областям, кнопкам и меню остаются действиями этих элементов.

На финальном шаге новых собранных демо основная кнопка по умолчанию называется К началу и возвращает зрителя к началу сценария. Текст финального шага универсальный: Демонстрация завершена. Вернитесь к началу, чтобы пройти ее еще раз.

Вставка на сайт

Код вставки показывает то же демо внутри страницы сайта или базы знаний. Если ссылка недоступна или демо еще не опубликовано, зритель увидит нейтральное сообщение вместо технической ошибки.

Новая вставка может использовать путь /w/{space}/embed/{slug}. Сообщение о размере iframe остается совместимым со старым кодом вставки, поэтому уже размещенные iframe не требуют миграции. Просмотры из /w/{space}/embed/{slug} учитываются как embed-просмотры в аналитике, а события по-прежнему отправляются по slug опубликованного демо.

Если контейнер вставки узкий, например внутри виджета чата или боковой панели, плеер сам переходит в мобильный вид. Дополнительные настройки в коде вставки для этого не нужны, а декоративная рамка телефона в публичном viewer или embed не добавляется.

Видео и GIF

Когда автор скачивает демо как видео или GIF, Smotree собирает файл из последней сохраненной версии редактора. Это не отдельная публичная ссылка, а файл для отправки в мессенджер, презентацию, письмо или соцсети.

Скачанный файл собирается как статичное слайд-шоу: шаги с видео и видео-кружком не проигрываются визуально, а фиксируются как кадр шага. Если автор выбирает видео со звуком, звук исходного видео, видео-кружка или AI-озвучки попадает в аудиодорожку. GIF всегда остается без звука. Субтитры в скачанный файл не прожигаются.

Аналитика просмотра

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