Статті на: Панель Управління

Налаштування промо-банерів на Головній сторінці

Функціонал дозволяє маркетинг-команді створювати та публікувати промо-банери на головній сторінці вебсайту через адмін-панель. Банер показується як модальне вікно по центру екрана. Підтримується мультимовність, налаштування частоти показу та автозакриття.


Зверніть увагу! Банер доступний тільки на веб-сайті і тільки на головній сторінці.



Де знаходиться вкладка:


  1. Перейдіть в розділ Маркетинг а Панелі керування.
  2. Натисніть на пункт Промо-банери.



Відображувальні елементи:


Назва - Внутрішня назва банера (видима тільки в адмін.панелі)

Статус - Активний / Неактивний

Період дії - Дата початку — Дата завершення

Дата створення - Коли банер був створений

Кнопка Створити - кнопка в правому верхньому куті

Кнопка Редагувати — іконка олівця в рядку банера.

Кнопка Видалити — іконка кошика в рядку банера.


Створення банера:


  1. Натисніть кнопку Створити.



  1. При створенні банера необхідно заповнити кілька основних полів для його коректного налаштування та відображення.



  • Назва — це внутрішня назва банера, яка використовується для зручності керування в системі. Поле є обов’язковим для заповнення.


  • Статус визначає, чи буде банер активним або неактивним. Відображаються тільки банери зі статусом *«Активний». Для відображення поточні дата та час повинні входити в період дії банера. Якщо активних банерів декілька — показується випадковий з них. Якщо активних банерів немає — нічого не відображається


  • У полі Дата початку вказуються дата та час початку показу банера, а в полі Дата завершення — дата та час завершення його відображення.


  • Налаштування Період автозакриття дозволяє вибрати, через скільки секунд банер автоматично закриється. Доступні варіанти: 3, 5, 10, 15, 30 секунд або опція «Не закривати автоматично».


Коли активна функція "Не закривати автоматично", то закрити банер можна такими способами:

  • Кнопка "x" (хрестик)
  • Клік на кнопку переходу за посиланням в банері.
  • Таймер автозакриття.
  • Клік поза банером.


Якщо обраний час на автозакриття, то стають доступні додаткові поля для налаштування:

-- Опція Показувати прогрес-бар додає візуальну смужку, яка показує час до автоматичного закриття банера. Це налаштування доступне лише тоді, коли обрано період автозакриття. Горизонтальна полоска зверху банера. Плавно зменшується від 100% до 0%. На десктопі при наведенні — призупиняється (якщо увімкнено). На мобільному пауза не працює.

-- Функція Пауза при наведенні призупиняє таймер автозакриття при наведенні курсора на банер у десктопній версії. Налаштування також відображається лише при активному автозакритті.


  • У параметрі Частота показу можна вибрати, як часто банер буде показуватися користувачу: раз на день, раз на тиждень або під час кожного візиту.

Раз на день — банер не показується користувачу, якщо він уже бачив його протягом останніх 24 годин.

Раз на тиждень — банер не відображається, якщо його вже було показано протягом останніх 7 днів.

Кожен візит — банер показується щоразу при кожному відвідуванні головної сторінки.

Зверніть увагу: частота показу банера визначається через localStorage браузера. Це означає, що дані зберігаються локально в конкретному браузері користувача. У разі очищення даних браузера або при вході з іншого пристрою банер буде відображатися знову, незалежно від попередніх показів.


  • Поле Текст кнопки використовується для CTA-кнопки банера. Максимальна довжина тексту — 30 символів.


  • У полі Посилання кнопки необхідно вказати URL-адресу, на яку користувач буде переходити після натискання кнопки.


  • Для коректного відображення банера на різних пристроях потрібно завантажити окремі зображення: Зображення для десктопу — для комп’ютерної версії сайту, та Зображення для мобільного — для мобільних пристроїв.


Примітка! Поля «Текст кнопки», «Посилання кнопки», а також зображення банера підтримують переклад. На основній сторінці необхідно заповнювати контент для головної мови сайту. Для додавання інформації іншими мовами слід перейти у вкладку «Переклади» та заповнити відповідні поля для кожної мови окремо.


6. Приклади використання


Приклад 1: Акційний банер на тиждень

Налаштування банера для промоакції зі знижкою:

  • Назва банера: «Акція -20% на піцу»
  • Статус: Активний
  • Період показу: понеділок — неділя
  • Автозакриття: 10 секунд
  • Частота показу: раз на день
  • Текст кнопки: «Замовити зараз»
  • Посилання кнопки: /category/pizza

Такий банер буде показуватися користувачу один раз на день протягом заданого періоду.


Приклад 2: Інформаційний банер

Налаштування банера для інформування користувачів про нову функцію:

  • Назва банера: «Нова функція доставки»
  • Статус: Активний
  • Автозакриття: Не закривати
  • Частота показу: раз на тиждень
  • Текст кнопки: «Дізнатись більше»
  • Посилання кнопки: /delivery-info

Такий банер буде залишатися відкритим, доки користувач не закриє його самостійно.


7. Поширені питання (FAQ)


Чому банер не показується?

Перевірте наступне:

  • статус банера — «Активний»;
  • поточна дата входить у період дії банера;
  • функціонал банерів увімкнений;
  • заповнений контент банера;
  • не спрацювало обмеження по частоті показу.


Як створити банер для різних мов?

Спочатку заповніть контент для основної мови сайту, після чого перейдіть у вкладку «Переклади» та додайте тексти для інших мов.


Що буде, якщо активних банерів декілька?

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


Чи можна використовувати різні зображення для мобільної та десктопної версії?

Так, для мобільної та десктопної версій можна завантажувати окремі зображення.


Через скільки часу банер зникне після деактивації?

Банер перестане відображатися максимум протягом 5 хвилин після деактивації через кешування API.


Що таке «Пауза при наведенні»?

На десктопі таймер автозакриття призупиняється при наведенні курсора на банер. Після відведення курсора відлік продовжується.


Чи працюють банери в мобільному додатку?

Ні, функціонал банерів наразі працює лише у вебверсії сайту. Для мобільного додатку потрібна окрема реалізація.


Посилання на цю статтю: ** тут. **

Оновлено: 08/05/2026

Чи була ця стаття корисною?

Поділіться своїм відгуком

Скасувати

Дякуємо!