Попап на сайті (pop-up): що це, види і як зробити

Попап (pop-up) це спливне вікно, яке з’являється поверх сторінки сайту і перекриває її частину, поки відвідувач не закриє його або не відреагує. В інтернет-магазині він пропонує промокод, показує таймер акції або нагадує про товари в кошику.

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

Що таке попап на сайті простими словами

Слово прийшло з англійської: to pop up означає «раптово з’явитися». Англійською пишуть pop-up, через дефіс, а українською кажуть попап або спливне вікно. Також трапляються «спливаюче вікно», «поп-ап», «поп ап», «pop up» і «popup», і всі вони означають те саме. У російськомовному пошуку це вікно шукають як «попап на сайте» або «всплывающее окно».

Не плутайте попап на сайті з окремим вікном браузера. Спливне вікно браузера відкривається як нове вікно, і його зупиняє вбудований блокувальник. Попап на сайті є частиною самої сторінки, тому цей блокувальник його зазвичай не прибирає. Закрити такий попап можна хрестиком у самому вікні.

Як виглядає попап: 5 видів з прикладами

Слово «попап» описує не вигляд, а спосіб показу: вікно виникає поверх сторінки в певний момент. Всередині може бути що завгодно. У магазинах найчастіше зустрічаються п’ять видів, і саме ці типи є у віджеті Попапи:

1. Купон на першу покупку. Велике число знижки, наприклад «−15%», підпис «на перше замовлення» і промокод з кнопкою «Копіювати код». Найпростіший і найвідоміший вид. Як налаштувати сам промокод, розібрано в статті про промокод на перше замовлення.
2. Таймер акції. Відлік годин, хвилин і секунд до кінця пропозиції. Відлік буває двох видів: до однієї дати для всіх або окремо для кожного відвідувача, наприклад 30 хвилин від першого показу. Докладніше про відлік читайте в статті про таймер зворотного відліку на сайті.
3. Тизер. Спочатку тільки запитання, наприклад «Хочете знижку?», і дві кнопки «Так» та «Ні». Промокод відкривається після відповіді «Так». Вікно менш нав’язливе, бо людина сама обирає, чи дивитися далі.
4. Попап у кошику. Нагадування для людини, яка поклала товари і відволіклась: у вікні видно фото і назви товарів з її кошика та кнопку «Повернутись до кошика». Порожній кошик означає, що вікна не буде.
5. Збір email. Заголовок, пропозиція і поле для пошти або просто оголошення. Є макети з картинкою: збоку, зверху або на весь фон. Зверніть увагу: введена пошта у віджеті зберігається лише в браузері покупця і до магазину не надсилається. Тому як інструмент для розсилки цей тип поки не підходить, а як оголошення чи подача промокоду працює.

Вигляд налаштовується окремо: три готові теми (світла, темна, кремова), свої кольори, радіус кутів і місце на екрані. Вікно може стояти по центру або компактною карткою в одному з кутів. Тоді решта сторінки лишається видимою, і людина розуміє, що її нікуди не «викинуло» з сайту.

Приклад із життя: покупець читає опис куртки, а через вісім секунд у кутку екрана з’являється картка «−10% на перше замовлення» з кодом. Вона не закриває товар, її видно, і вона легко закривається хрестиком. Така ж пропозиція, показана на весь екран у першу секунду, виглядала б як перешкода, а не допомога. Різниця лише в моменті, розмірі й тому, чи легко відмовитись.

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

Nielsen Norman Group розрізняє два основні види. Модальний попап блокує сторінку: поки вікно не закрите, клікати по сайту не можна. Немодальний лишає сторінку доступною, наприклад вікно в кутку екрана. Від банера і плашки попап відрізняється головним: він з’являється поверх сторінки в певний момент, а не стоїть на своєму місці. Про розміри й вимоги до банерів читайте в статті про банер на сайт для Хорошопу.

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

Коли попап дратує і коли допомагає?

Допомагає той попап, який з’являється вчасно, рідко і відповідає на запитання людини. Дратує той, що виникає на першій секунді, повторюється на кожній сторінці або закриває товар. Nielsen Norman Group за кілька тижнів спостережень у середньому натрапляла на 25 попапів на тиждень і описує учасника тестування, який після кількох вікон поспіль кинув завдання і пішов із сайту. Практичні правила:

• Час показу. Дайте людині хоч кілька секунд побачити сторінку. У віджеті за замовчуванням попап чекає 8 секунд на сторінці, і цей час можна змінити.
• Момент показу. Є чотири варіанти: намір піти (exit-intent), через задану кількість секунд, після прокручування сторінки і коли в кошику є товар. На комп’ютері намір піти означає, що миша йде за верхній край вікна, на телефоні це натискання «Назад». Як працює цей підхід, розібрано в статті про exit-intent попап.
• Частота. Закрите вікно не повинно повертатися на наступній сторінці. За замовчуванням попап мовчить 24 години для цього покупця.
• Один попап за раз. Два вікна поспіль, плюс згода на cookie, плюс чат перетворюють сторінку на смугу перешкод.
• Не перебивайте оформлення замовлення. Людина на останньому кроці не має відволікатися на нову пропозицію.
• Телефон. На малому екрані вікно по центру закриває майже все. У віджеті на телефоні воно відкривається як нижня панель, а хрестик закриття можна зробити помітнішим і дозволити закрити вікно свайпом вниз.

Щодо Google: у документації Search Central нав’язливими названо елементи, які закривають людині вміст сторінки, зазвичай з рекламною метою. Google пише, що через них сторінка може гірше виглядати в пошуку, бо пошуковій системі важче зрозуміти вміст. Замість вікон на весь екран радять банери, що займають лише невелику частину екрана. Для телефону цю вимогу Google оголосив ще в серпні 2016 року: сторінки, де вміст важко побачити одразу після переходу з пошуку, можуть опуститися нижче. Вікна, потрібні за законом, наприклад підтвердження віку або згода на cookie, під це не підпадають. Висновок простий: не показуйте повноекранний попап відразу після переходу з пошуку.

Що кажуть цифри: чужі і наші

Wisepops у звіті 2026 року порівнює налаштування попапів зі збором email. Нижче цифри з цього звіту, це середні значення по його вибірці, а не гарантія для вашого магазину:

• попапи зі знижкою: 7,45% проти 4,60% без знижки;
• попапи з картинкою: 5,71% проти 3,98% без картинки;
• попапи з таймером зворотного відліку: 12,84% проти 4,73% без таймера;
• на телефоні 4,98%, на комп’ютері 3,67%.

Наші власні цифри скромніші за обсягом. Лічильники Widgetis з 20 жовтня по 1 листопада 2026 року показали для одного живого магазину з попапом (купон і таймер) такий результат:

Це один магазин і близько двох тижнів даних, тож це приклад, а не норма. Кліки не дорівнюють замовленням: частина людей натиснула кнопку, скопіювала код і не купила. Щоб порахувати користь для продажів, у попапу має бути власний промокод, а в Хорошопі варто дивитися, скільки замовлень пройшло саме з ним. Міняйте за раз один параметр, текст або момент показу, і порівнюйте тижні між собою. Щоб не просити клієнта вводити код вручну, подивіться авто-застосування промокоду.

Як зробити попап на сайті: 5 способів

Спосіб залежить від того, на чому зроблено сайт і чи є у вас програміст. Для відвідувача результат той самий: вікно поверх сторінки.

Перед вибором перевірте три речі: чи можна обмежити частоту показу, чи вікно зручне на телефоні і чи не сповільнює воно сайт.

Як додати попап на сайт Хорошоп без програміста?

У довідці Хорошопу описано банер над шапкою і банерні лінії на головній та в каталозі, а окремого конструктора спливних вікон серед них немає. Попап додають скриптом або готовим віджетом. Порядок дій з віджетом Попапи такий:

1. Створіть промокод у Хорошопі. Віджет показує і копіює код, але сам його не створює. Знижку дає купон в адмінці магазину.
2. Підключіть магазин до Widgetis. Зареєструйтесь, додайте сайт і вставте скрипт за інструкцією в кабінеті.
3. Відкрийте віджет «Попапи» і оберіть шаблон. У галереї є готові варіанти, наприклад «Класична знижка», «Кинутий кошик», «Збір email». Шаблон сам ставить тип, тему і кольори.
4. Змініть тексти і промокод. Впишіть свій код, заголовок і напис на кнопці. Знижка у великому числі це лише текст, тому вона має збігатися з купоном у Хорошопі.
5. Оберіть момент і частоту показу. Наприклад, через 15 секунд, один раз на добу. Для попапа в кошику момент ставиться сам.
6. Перевірте на телефоні і комп’ютері. Вікно має закриватися хрестиком, не перекривати кнопки магазину і не з’являтися двічі поспіль.

Хороший попап відповідає на питання відвідувача раніше, ніж той його поставив: де знижка, що в кошику, скільки лишилось до кінця акції. Поганий просто стоїть між людиною і товаром.

Джерела

• Nielsen Norman Group: Popups, 10 Problematic Trends and Alternatives (2019)
• Google Search Central: Avoid intrusive interstitials and dialogs
• Google Search Central Blog: Helping users easily access content on mobile (2016)
• Wisepops: Popup statistics and benchmarks, 2026 report
• Google Chrome Help: Block or allow pop-ups in Chrome
• MDN: The Dialog element