> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://dots.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/c/7/6/3c7680cb850c3200/image_1a6lsv0.png)

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/c/7/6/3c7680cb850c3200/image_1ijao3n.png)

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

**Назва** - Внутрішня назва банера (видима тільки в адмін.панелі)
**Статус** - Активний / Неактивний
**Період дії** - Дата початку — Дата завершення
**Дата створення** - Коли банер був створений
Кнопка **Створити** - кнопка в правому верхньому куті
Кнопка **Редагувати** — іконка олівця в рядку банера.
Кнопка **Видалити** — іконка кошика в рядку банера.

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

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/c/7/6/3c7680cb850c3200/image_oig1en.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/c/7/6/3c7680cb850c3200/image_1k30rvf.png)

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

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

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

* Налаштування **Період автозакриття** дозволяє вибрати, через скільки секунд банер автоматично закриється. Доступні варіанти: 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.

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

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

Посилання на цю статтю: ** [тут.](https://dots.crisp.help/uk/article/nalashtuvannya-promo-baneriv-na-golovnij-storinci-ucm2ys/) **