C cenaly.com
Начать бесплатно

Видеокружок

Кружок с роликом из вашего меню в углу сайта: по нажатию — видео со звуком и кнопка «Заказать» именно этого блюда

11 мин чтения Открыть этот экран в демо
На этой странице 21

Видеокружок

«Видеокружок» — круглый плавающий виджет с роликом в нижнем углу вашего сайта. Сначала гость видит постер или тихое превью без звука; по нажатию открывается окно с роликом со звуком, подписью и кнопкой действия: «Заказать», «Забронировать столик», «Записаться», «Спросить в чате» и другие.

Главное отличие от привычных видеовиджетов — ролик здесь не отдельный файл. Это видео позиции вашего меню или каталога, которое уже лежит в её карточке: загруженное вами или сгенерированное ИИ из фото блюда. Второго хранилища видео у виджета нет, а кнопка «Заказать» открывает в виджете заказа именно то блюдо, которое гость только что смотрел.

Виджет бесплатный: отдельного расширения покупать не нужно.

Где включить: Админ-панель → Маркетинг → «Мой сайт» → карточка «Видеокружок». Тумблер включает виджет, шестерёнка открывает настройки.


Установка на сайт#

Своего кода не требуется — работает общий тег раздела «Мой сайт»:

<script src="https://cdn.cenaly.com/site/v1.js" data-domain="ВАШ-ДОМЕН" async></script>

Одна строка в <head> или перед </body>, дальше состав виджетов задаётся тумблерами в кабинете. Инструкции по платформам (HTML, Google Tag Manager, WordPress, Tilda/Wix, Shopify, Webflow) — в статье Мой сайт, раздел «Установка на популярных платформах».

Одиночный тег кружка лежит в блоке «Продвинутое»:

<script src="https://cdn.cenaly.com/video-widget/v1.js" data-domain="ВАШ-ДОМЕН" async></script>

Его атрибуты:

Атрибут Что задаёт
data-domain Ваш домен в «Мой сайт» — обязателен
data-brand Бренд платформы, если тег стоит не на его домене
data-lang Язык служебных подписей; без него — язык страницы (<html lang>), затем язык браузера
data-position Угол: bl — слева внизу, br — справа внизу
data-color Цвет рамки и кнопки, #rrggbb
data-size Диаметр кружка в пикселях, от 64 до 160

⚠️ Атрибут на теге сильнее настройки в кабинете — у других виджетов наоборот. Кружок часто ставят на страницу, где угол уже занят чужой вёрсткой, и подвинуть его должен тот, кто правит эту страницу, не заходя в админку.

Что видит и чего не видит проверка установки. Кнопка «Проверить установку» читает исходный HTML страницы: она найдёт общий загрузчик или одиночный тег кружка, код другой локации или его отсутствие. Тег, который вставляет уже в браузере Google Tag Manager, она не увидит — смотрите сайт глазами.


Откуда берутся ролики#

Ролик кружка — это видео позиции меню или каталога. Отдельной загрузки «ролика для виджета» нет, и это сознательно: одно и то же видео работает в карточке блюда на витрине и в кружке на сайте.

Чтобы у позиции появилось видео:

  1. Откройте позицию в разделе «Меню» (или в каталоге товаров) и загрузите видео в её медиа.
  2. Или сгенерируйте ролик ИИ из фото блюда прямо в карточке. Генерация — функция карточки блюда со своими условиями; кружок за неё не платит. ⚠️ На брендах в облаке Yandex (cenaly.ru) генерации видео нет — там ролик загружают готовым.
  3. Дождитесь, пока видео обработается: платформа делает постер и, где это настроено, варианты качества от 360p до 1080p.

Если ни у одной позиции видео нет, панель кружка так и скажет и предложит перейти в меню — выдуманного превью без ролика не будет.

⚠️ Формат файла важен. Браузеры уверенно играют mp4, webm и m4v. Ролик в другом формате (например, .mov с iPhone, .avi, .mkv) кружок покажет, только если для него готовы варианты качества; иначе он в кружок не попадает вовсе — кружок, который открывается в «видео недоступно», хуже отсутствующего.


Настройка виджета#

Настройки сохраняются сами. Рядом с полями — превью: кружок с постером первого выбранного ролика и раскрытое окно с подписью и кнопкой, теми же словами, что увидит гость.

Ролики#

  • Выбор — список позиций выбранной точки, у которых есть видео. Отметьте до 6 роликов и расставьте их по порядку: в этом порядке гость листает их стрелками.
  • Подпись — короткий текст ролика (до 80 символов) на нужных языках: под кружком и в раскрытом окне.
  • Кнопка действия — что сделать после просмотра (см. таблицу ниже). По умолчанию — «Заказать» с этим же блюдом.
  • Подпись кнопки — своя, до 40 символов на каждом языке; пусто — стандартная подпись по виду действия.

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

Кнопка под роликом#

Действие Что произойдёт Подпись по умолчанию
Заказать Откроется виджет заказа — сразу на этом блюде «Заказать»
Забронировать столик Откроется форма брони столика «Забронировать столик»
Записаться Откроется онлайн-запись, можно сразу на нужную услугу «Записаться»
Чат Откроется чат «Спросить в чате»
Обратный звонок Откроется форма обратного звонка «Заказать звонок»
Мультикнопка Раскроется мультикнопка с каналами связи «Связаться»
Справка Откроется центр поддержки «Справка»
Документ Откроется выбранный юридический документ — документ обязателен «Открыть документ»
Поддержка Откроется вкладка «Обращения» чата — форма нового обращения «Написать в поддержку»
Ссылка Откроется ваш адрес http(s)://… в новой вкладке «Подробнее»

⚠️ Кнопка работает через соседний виджет. Если виджет, в который она ведёт, у вас выключен (или это платное расширение без подписки), кнопки на сайте не будет — гость просто посмотрит ролик. Панель помечает такие действия заранее, а в статистике кружка это видно отдельной причиной.

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

Внешний вид#

Настройка Значения По умолчанию
Угол Слева внизу · справа внизу Слева внизу (справа обычно уже стоит чья-то кнопка)
Размер Диаметр 64…160 px 96 px
Цвет Рамка кружка и кнопка действия Синий
Тихое превью Включено · выключено Включено
Не показывать после закрытия 0…90 дней 7 дней

«Не показывать после закрытия» — сколько дней кружок молчит после того, как гость закрыл его крестиком. 0 — только до конца визита (сессии браузера).

Когда показывать#

Блок общий с мультикнопкой, обратным звонком и «Живой витриной»: маски страниц «только на…» и «кроме…» (до 20 в каждом списке, * = любой фрагмент, исключения сильнее), задержка до 600 секунд, устройство (все · компьютеры · телефоны), расписание — до 14 своих окон либо часы работы точки.

⚠️ Часы считаются в часовом поясе локации; пояс не задан — окна считаются по времени посетителя.


Когда кружок играет ролик сам#

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

Тихое превью (без звука, по кругу) запускается, только когда выполнены все условия:

  1. превью не выключено в настройках;
  2. страница уже загрузилась — ролик не отнимает канал у вашего контента;
  3. кружок в видимой части экрана;
  4. у гостя не включено «уменьшить движение» (prefers-reduced-motion);
  5. у гостя не включена экономия трафика (Save-Data).

Иначе в кружке — постер ролика. Постера нет (платформа его ещё не сделала или обработка видео не настроена) — кружок показывает первый кадр: это дороже постера, поэтому только при условиях 1, 2 и 5. Превью выключено и постера нет — тёмный круг с рамкой и ▶.

Качество под экран. Если для ролика готовы варианты от 360p до 1080p, виджет берёт подходящий: в кружке — лёгкий, в раскрытом окне — под его ширину. Вариантов нет — играется исходный файл.

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

Вес виджета — около 20 КБ в gzip (тег с async). Файлы роликов в этот вес не входят.


Что видит посетитель и что при этом собирается#

Гость видит кружок в выбранном углу — с постером или тихим превью, длительностью ролика и подписью под ним. По нажатию (или Enter / пробел с клавиатуры) открывается окно:

  • ролик со звуком и кнопкой «выключить звук»;
  • стрелки ‹ › между роликами, если их несколько;
  • подпись и кнопка действия;
  • закрыть — крестиком, клавишей Esc или нажатием мимо окна; фокус возвращается на кружок.

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

Если в том же углу уже стоит наша кнопка (мультикнопка, обратный звонок, заказ, бронь, запись, чат), кружок поднимается над ней, а плашки «Живой витрины» — над кружком. Мультикнопка кружок не поглощает: это не канал связи.

Виджет не собирает персональных данных. У него нет форм и полей. Заказ, бронь или запись, сделанные по кнопке, приходят в те же разделы, что и с самих виджетов, — например, в «Заказы». Сам кружок отправляет только обезличенную статистику: показ, раскрытие, просмотр со звуком дольше 3 секунд, нажатие кнопки по виду действия (заказ, бронь, чат…) и закрытие. Ни имён, ни контактов, ни номеров роликов в ней нет. Сводка видна на карточке виджета в «Мой сайт».


Ограничения#

  • Формат один — кружок в нижнем углу. Историй (stories), карусели и плеера, встроенного в страницу, нет.
  • Ролик — только видео позиции меню или каталога. Загрузить «просто ролик» отдельно от карточки нельзя.
  • Ссылки на YouTube и TikTok не поддерживаются: чужой плеер ставит свои cookies (это против баннера согласия) и тяжелее, чем позволяет контракт скорости.
  • Неиграбельный ролик не показывается: формат, который браузер не воспроизводит, без готовых вариантов качества в кружок не попадает. Кружок без единого играбельного ролика не появляется вовсе.
  • На нашей витрине кружка нет — там видео блюда и так стоит в его карточке. Кружок работает только на вашем собственном сайте.
  • Кнопки нет, если нет её виджета: действие ведёт в соседний виджет, и без него кнопка не рисуется.
  • Не больше 6 роликов в одном кружке.
  • Служебные подписи — четыре языка (en, ru, ka, tr), остальные языки — по-английски.
  • ИИ-генерации ролика нет на cenaly.ru — там ролики только загруженные.

Устранение неполадок#

Кружка на сайте нет.

  1. Тег не найден — «Проверить установку». «Кода нет» — тег не вставлен или стоит не на всех страницах шаблона; «код другой локации» — чужой data-domain. Тег ставит GTM — проверка его не увидит.
  2. Виджет выключен — тумблер на карточке «Видеокружок».
  3. Не выбрано ни одного ролика — без роликов кружок не рисуется.
  4. Ни один ролик не играбелен — у всех выбранных роликов формат, который браузер не воспроизводит, а вариантов качества нет. Загрузите в карточку позиции mp4 или дождитесь обработки видео.
  5. Гость закрыл кружок крестиком — он молчит заданное число дней (по умолчанию 7). Проверяйте в окне инкогнито или новом профиле браузера.
  6. Условия показа отсекли страницу — проверьте маски, устройство, задержку и расписание.
  7. Изменения не доехали — настройки раздаются через CDN с кэшем до 5 минут: подождите и обновите страницу.

Кружок есть, а кнопки под роликом нет. Виджет, в который ведёт кнопка, выключен на сайте (или не оплачен, если это расширение) — включите его в «Мой сайт». Для действия «Документ» нужен выбранный документ, для «Ссылки» — адрес http(s)://.

Кружок не играет превью, только постер. Так и задумано, если превью выключено, страница ещё грузится, кружок вне экрана или у гостя включены «уменьшить движение» либо экономия трафика. Проверьте на другом устройстве.

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

Заменили видео в карточке, а в кружке старое. Кружок хранит ссылку на конкретное видео позиции и его данные на момент выбора. Выберите ролик заново — так же, если выбирали его, пока видео ещё обрабатывалось.

«Заказать» открывает не то блюдо. Кнопка «Заказать» по умолчанию ведёт на позицию, чьё это видео; если вы меняли действие вручную, проверьте выбранную позицию в настройках кнопки.


Частые вопросы#

Замедлит ли кружок сайт?#

Виджет весит около 20 КБ в gzip и грузится с async. Файлы роликов не скачиваются, пока виджет не решил показать превью, — а превью запускается только после загрузки страницы и только в видимой части экрана.

Можно загрузить ролик прямо в виджет?#

Нет. Ролик — это видео позиции меню или каталога: загрузите его в карточку позиции или сгенерируйте из фото блюда (кроме cenaly.ru), а в кружке выберите.

Что будет с роликами, если я отключу кружок или уйду с платформы?#

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

Можно вставить видео с YouTube или TikTok?#

Нет. Чужой плеер ставит cookies и тяжелее, чем позволяет контракт скорости кружка.

Звук включается сам?#

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

Сколько роликов можно показать?#

До шести в одном кружке. Гость листает их стрелками; у каждого своя подпись и своя кнопка.

Кружок появится на витрине Cenaly?#

Нет. На витрине видео блюда и так есть в его карточке, поэтому кружок работает только на вашем собственном сайте.

Что попадает в статистику?#

Показы кружка, раскрытия, просмотры со звуком дольше 3 секунд, нажатия кнопки по видам действий и закрытия — без персональных данных и без номеров роликов.


Связанные разделы#

Была ли статья полезной?