Відеокружок

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

Головна відмінність від звичних відеовіджетів — ролик тут не окремий файл. Це відео товару вашого меню або каталогу, яке вже лежить у його картці: завантажене вами або згенероване ШІ з фото страви. Другого сховища відео у віджета немає, а кнопка «Замовити» відкриває у віджеті замовлення саме ту страву, яку гість щойно дивився.

Віджет безкоштовний: окремого розширення купувати не потрібно.

Де ввімкнути: Адмін-панель → Маркетинг → «Мій сайт» → картка «Відеокружок». Тумблер вмикає віджет, шестерня відкриває налаштування.

Встановлення на сайт#

Власного коду не потрібно — працює спільний тег розділу «Мій сайт»:

<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>

Його атрибути:

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

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

Звідки беруться ролики#

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

Щоб у товару з'явилося відео:

1. Відкрийте товар у розділі «Меню» (або в каталозі товарів) і завантажте відео в його медіа.
2. Або згенеруйте ролик ШІ з фото страви прямо в картці. Генерація — функція картки страви зі своїми умовами; кружок за неї не платить. ⚠️ На брендах у хмарі Yandex (cenaly.ru) генерації відео немає — там ролик завантажують готовим.
3. Дочекайтеся, поки відео обробиться: платформа робить постер і, де це налаштовано, варіанти якості від 360p до 1080p.

Якщо в жодного товару немає відео, панель кружка так і скаже й запропонує перейти в меню — вигаданого прев'ю без ролика не буде.

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

Налаштування віджета#

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

Ролики#

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

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

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

⚠️ Кнопка працює через сусідній віджет. Якщо віджет, на який вона веде, у вас вимкнено (або це платне розширення без підписки), кнопки на сайті не буде — гість просто подивиться ролик. Панель позначає такі дії заздалегідь, а в статистиці кружечка це видно окремою причиною.

Стандартні підписи кнопок і службові підписи кружечка вбудовані чотирма мовами — англійською, російською, грузинською та турецькою; іншими мовами сторінки вони англійські. Свої підписи ви задаєте будь-якими мовами.

Зовнішній вигляд#

«Не показувати після закриття» — скільки днів кружечок мовчить після того, як гість закрив його хрестиком. 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 секунд, натискання кнопки за видами дій і закриття — без персональних даних і без номерів роликів.

Пов’язані розділи#

• Мій сайт — код встановлення та інші віджети
• Онлайн-замовлення на своєму сайті — куди веде кнопка «Замовити»
• Жива вітрина — чесні плашки з числами замовлень поруч із кружком
• Мультикнопка — усі канали зв’язку в одній кнопці
• Cookies і згода — чому ми не вставляємо чужі плеєри