Як створити розумний попап
За допомогою конструктора віджетів ви можете створювати розумні попапи, які показуються відвідувачам лише за заданим сценарієм. Робіть персональну пропозицію у потрібний час, допомагайте клієнту з вибором послуги або збирайте підписників, щоб продовжити роботу з ними у сервісі SendPulse.
Ви можете вибрати готовий шаблон і використовувати його у такому вигляді або відредагувати з огляду на свої завдання.
Розглянемо, як створити віджет із шаблону: налаштувати зовнішній вигляд, повідомлення, цільову дію та умову показу.
Перейдіть до потрібного проєкту у вкладку «Сценарії показу» (Display scenarios) та натисніть «Створити попап» (Create pop-up).
Виберіть шаблон
Шаблон — це віджет із встановленими налаштуваннями на вигляд і головною дією віджета. Ви можете вибрати шаблон попапа зі списку популярних, святкових, за типом або дією віджета.
За типом попапа
Використовується для вибору шаблону на вигляд виджета.
| Перекриваючий (Overlay) | Блок, що перекриває всю сторінку сайту. Для взаємодії з контентом необхідно закрити вікно попапа. |
| Стандартний (Floating) | Рухомий блок, зафіксований ліворуч або праворуч у вікні браузера під час прокручування сторінки. Не заважає взаємодіяти із контентом. |
| Горизонтальний (Horizontal) | Горизонтальний блок, який можна зафіксувати зверху або знизу сторінки. Взаємодії із контентом не заважає. |
| З відео (Video) | Блок, який відтворює відео з YouTube. Якщо вибрано автоматичний сценарій, відео розпочнеться після будь-якої дії користувача на сторінці.
Якщо вибрано активацію за натисканням, після завантаження сторінки буде відображатися прев’ю, а відтворення відео почнеться після натискання на попап. На мобільних пристроях відеопопапи завжди відтворюються після натискання, щоб не бути нав'язливими. |
| Модальне вікно (Modal window) | Блок, розташований по центру сторінки. Контент поза блоком затемнений і не клікабельний. Для взаємодії з контентом необхідно закрити модальне вікно. |
| Лаунчер (Launcher) |
Маленький статичний блок у вигляді іконки, закріплений у вибраному кутку сторінки. При натисканні на нього запускається певна дія, наприклад, відкриття іншого попапу або перехід на вказану сторінку сайту. Читайте докладніше: «Як створити попап лаунчер». |
| NPS |
Блок зі шкалою та поле для коментарів для збору зворотнього звʼязку від користувачів щодо їхнього задоволення продуктом або сервісом. Шкала для визначення оцінок може бути подана у вигляді оцінок, зірочок та емодзі. |
По дії попапа
Використовується для вибору шаблону цільової дії.
| Запит cookies (Cookie request) | Запитує у відвідувача згоду на використання кукі. Натискання кнопки закриває попап. Також відвідувач може перейти за посиланням, щоб ознайомитися з правилами використання кукі. |
| Заклик до дії (Call to action) | Мотивує відвідувача вчинити дію: закрити попап або перейти на цільову сторінку. |
| Підписка на месенджер (Social media subscription) | Перенаправляє відвідувача на сторінку обраної соціальної мережі. Ви можете додати будь-яку кількість кнопок соцмереж в один попап. Якщо у вас підключено чат-бот, підпише на нього і відправить вітальний ланцюжок. |
| Зв’язок у чаті (Chat interaction) | Дає відвідувачу сайту можливість зв'язатися з вами через соцмережу або форму зворотного зв'язку. |
| Підписка на розсилку (Newsletters subscription) | Збирає email підписників. |
| Запит телефону (Phone request) | Збирає телефони підписників. |
| Кастомна форма (Custom form) | Збирає додаткові дані підписника. |
Налаштуйте зовнішній вигляд
Після вибору шаблону відкривається конструктор віджета у вкладці «Контент» (Content), де можна відредагувати його зовнішній вигляд і змінити цільову дію.
Виберіть, відображати зображення чи ні. Якщо вибрали відображати, завантажте зображення у форматі JPG, PNG або GIF вагою до 1 MB і виберіть положення щодо тексту та кнопки: ліворуч, праворуч, зверху або на весь екран.
Для типу «Відео» (Video) додайте посилання на відео в Youtube і виберіть, коли програвати відео — автоматично або після натискання.
Виберіть колір фону — білий, чорний або кольоровий — і розташування попапа на сторінці.
Ви можете вибрати розташування тільки для попапів типу «Попап» (Pop-up) та «Відео» (Video) — ліворуч або праворуч та «Довгий» (Long) — знизу чи зверху.
Праворуч ви можете подивитися, як виглядатиме попап на вашому сайті.
Додайте повідомлення
Введіть корисне повідомлення для відвідувачів сайту, яке відповідає ситуації та залучить потенційних клієнтів до взаємодії з попапом. Ви можете форматувати текст, додавати посилання та емодзі.
Наприклад, якщо відвідувач переглянув сторінку продукту понад три рази, повідомлення у спливаючому попе йому допоможе зробити вибір, а вам — закрити продаж. Тим, хто знаходиться на сторінці доставки та оплати, віджет допоможе розрахувати вартість доставляння товару.
Також ви можете персоналізувати повідомлення за допомогою користувацьких змінних. Натисніть {} та виберіть створену змінну.
Наприклад, ви можете звертатись до відвідувачів по імені, надавати унікальні купони на знижку, ділитися рекомендаціями на основі минулих замовлень або переглядів, сповіщати про незакінчене замовлення або передавати інші дані з вашої системи.
Налаштуйте дію
Кожен вибраний шаблон передбачає свою цільову дію, яка очікується від користувача: натиснути на кнопку, підписатися або надати контактні дані.
Ви можете пропустити це налаштування, щоб нічого додатково не додавати, або змінити дію, щоб прибрати або додати поля та кнопки.
Залежно від вибраної дії параметри можуть відрізнятися.
| Дія | Опис | Як налаштувати |
| Без дії (Without action) | Не додає елементи взаємодії з відвідувачем.
Віджет використовується лише для відображення інформації. |
Немає кнопки або поля введення для налаштування. |
| Заклик до дії (Call to action) | Закликає відвідувача вчинити дію: закрити попап або перевести на цільову сторінку. | Додайте текст до кнопки й виберіть дію — що робити при натисканні: закрити попап або відкрити посилання. |
| Підписка на месенджер (Social media subscription) | Перенаправляє відвідувача на месенджер обраної соціальної мережі.
Ви можете додати до 10 соцмереж в один попап. Якщо у вас підключено чат-бот, підписує на нього і запускає ланцюжки. |
Виберіть піктограму соцмережі та введіть текст на кнопці.
Для Telegram, WhatsApp, Instagram та Facebook Messenger ви можете вибрати підключений бот. |
| Підписка на розсилку (Newsletters subscription) | Запитує у відвідувача його email.
Ви також можете зберегти контакт в Email, CRM сервіси та запустити Automation. |
Вставте текст підказки для поля, в якому підписники залишатимуть свої контактні дані та введіть назву кнопки.
Щоб зберегти в Email сервіс, активуйте «Зберігати в адресну книгу для розсилок» (Save to address book for mailings) та виберіть адресну книгу. Якщо у вас немає створеної адресної книги, сервіс автоматично створить її з назвою проєкту. Для збереження в CRM активуйте «Створити угоду в CRM» (Create a deal in CRM) і виберіть, в яку воронку та на який етап створювати угоду з даними про контакт. Під час створення операцій у CRM автоматично створюються контакти у розділі «Контакти» (Contacts). |
| Запит телефону (Phone number request) | Запитує у відвідувача його телефон.
Ви також можете зберегти контакти в Email і CRM сервіси. |
|
| EDU оплата (EDU payment) | Відображає користувачу форму оплати за курс
Контакти, що оплатили, зберігаються в CRM. |
Виберіть курс, який користувач може оплатити, та виберіть метод оплати.
Читайте детальніше: «Як налаштувати оплату на сайті курсу» |
| Кастомна форма (Custom form) | Запитує у відвідувача сайту його персональні дані, наприклад, ім’я, телефон, дату народження тощо.
Ви також можете зберегти контакти з кастомними змінними в Email і CRM сервіси. |
В «Поле введення» виберіть тип даних та введіть текст підказки. Ви також можете додати додаткові елементи та звʼязати поля з кастомними змінними.
Читайте детальніше «Як налаштувати кастомну форму» та «Як передавати користувацькі змінні». |
| Посилання (Link) | Перенаправляє користувача на вказану сторінку сайту при натисканні на попап.
Доступно тільки для шаблону «Лаунчер». |
В полі «Введіть посилання» (Enter link) додайте посилання на сторінку, куди буде направлений користувач при натисканні на лаунчер.
Якщо хочете, щоб сторінка відкривалась в новому вікні, поставте галочку навпроти «Відкрити в новому вікні» (Open in new window). |
| Відкрити попап (Open pop-up) | Запускає інший попап на сторінці при натисканні.
Доступно тільки для шаблону «Лаунчер». |
В полі «Виберіть попап» (Choose a popup) виберіть за назвою потрібний попап з випадного списку, який буде відкриватися при натисканні лаунчера. |
Ви можете підключити будь-який попап до лаунчеру — тоді він буде відкриватися при натисканні на лаунчер. Для цього в налаштуваннях попапу оберіть необхідний лаунчер з випадного списку.
Після налаштування зовнішнього вигляду та дії натисніть «Далі» (Next).
Налаштуйте сценарій показу
У наступному вікні ви перейдете у вкладку «Таргетинг» (Targeting). Ви можете відстежувати поведінку відвідувачів та показувати віджет тільки тоді, коли користувач робить певну дію: прокручує сторінку до певної частини або перебуває на сайті більш як 40 секунд.
Типи умов
Виберіть подію, яка буде відстежуватися в поведінці відвідувача сайту, оператор умови й введіть значення, що відстежується.
| Подія | Опис | Як налаштувати |
| Показувати завжди (Show always) |
Віджет відображатиметься одразу при переході на сайт, не очікуючи виконання різних умов. Попап не буде показуватися після взаємодії з користувачем. | |
| UTM Medium |
Відстежує параметр, який визначає тип трафіку. Віджет активується лише у користувачів із заданим значенням параметра
|
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, що дорівнює або містить символи параметра Можливі значення:
|
| UTM Content |
Відстежує параметр, який визначає частину сторінки, з якої користувач прийшов. Віджет спрацює лише у користувачів із заданим значенням параметра |
Виберіть умову «рівно» (equal), «не рівно» (not equal) або «містить» (contains). Введіть значення, що дорівнює або містить символи параметра Можливі значення:
|
| UTM Term |
Відстежує параметр, який визначає ключове слово або фразу запиту, за яким користувач потрапив на сайт з пошукової системи. Віджет працює тільки у користувачів із заданим значенням параметра |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, що дорівнює або містить символи |
| UTM Campaign |
Відстежує параметр, який визначає назву рекламної кампанії. Віджет відображатиметься лише у користувачів із заданим значенням параметра |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, що дорівнює або містить символи |
| UTM Sourse |
Відстежує параметр, який визначає джерело трафіку, звідки користувач перейшов. Віджет відображається лише для користувачів із заданим значенням параметра |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, що дорівнює або містить символи параметра Можливі значення:
|
| Тип трафіку (Trafic type) |
Відстежує, звідки перейшов відвідувач. Віджет активується лише у відвідувачів із вибраного каналу трафіку. |
Виберіть умову «рівно» або «не рівно».
Виберіть один із семи можливих типів трафіку:
|
| Час на поточній сторінці (Time on current page) |
Відстежує час на сторінці. Віджет спрацює, коли відвідувач перебуває на сторінці вказаний у налаштуваннях час. |
Виберіть «більше» або «менше». Введіть значення, яке буде більшим або меншим за тривалість відвідування цільової сторінки в секундах, хвилинах або годинах. |
| Час на сайті (Time on site) |
Відстеження часу, проведеного на всіх сторінках сайту. Віджет спрацює, коли відвідувач перебуває на сайті вказаний у налаштуваннях час. |
Виберіть «більше» або «менше». Введіть значення, яке буде більшим або меншим за тривалість відвідування сайту в секундах, хвилинах або годинах |
| Кількість сесій (Session count) |
Відстежує кількість сесій відвідувача. Віджет спрацює, коли користувач здійснить задану в налаштуваннях кількість сесій. |
Виберіть «більше» (more) або «менше» (less). Введіть значення, яке буде більшим або меншим за цільову кількість сесій на одного користувача |
| Скролл понад 50% сторінки (Scrolled more than 50%) |
Відстежує глибину перегляду сторінки. Віджет спрацює, коли відвідувач прокрутить половину сторінки. |
Виберіть «так» (yes) або «ні» (no). |
| Вихід курсору за межі екрана (Move cursor out of page) |
Відстежує рух курсору мишки. Віджет спрацює, якщо відвідувач почне або не розпочне рух курсором для переходу на іншу вкладку або закриття поточної. |
Виберіть «так» або «ні». |
| Джерело трафіку (Referrer) |
Відстежує сторінку, з якої перейшов відвідувач. Віджет спрацює, якщо вказаний URL відповідає URL переходу. |
Виберіть умову «рівно», «не рівно» або «містить». Введіть адресу сторінки, на якій користувач перейшов на ваш сайт. |
| URL поточної сторінки |
Відстежує, на якій сторінці зараз користувач знаходиться. Ви можете вибирати це налаштування для показу (або приховування) попапа на певних сторінках сайту. Віджет спрацює після завантаження сторінки із заданою URL-адресою. |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, яке містить посилання або частину посилання на цільову сторінку URL поточної сторінки |
| URL відвіданої сторінки |
Відстежує, з якої сторінки користувач перейшов. Віджет спрацює після завантаження сторінки із заданою URL-адресою. |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, яке містить посилання або частину посилання на цільову сторінку URL відвіданої сторінки. |
| Заголовок сторінки |
Відстежує сторінки за назвою заголовка. Віджет спрацює, коли відвідувач зайде на сторінку з таким самим заголовком. |
Виберіть умову «рівно», «не рівно» або «містить». Введіть значення, що дорівнює або містить символи заголовка цільової сторінки. |
| Браузер |
Відстежує, з якого браузера та на якому пристрої заходить відвідувач. Віджет спрацює, коли відвідувач перейде на сайт із певного браузера або будь-якого браузера на мобільному/десктопі. |
Введіть значення, яке збігається з назвою браузера або відповідає всім браузерам на мобільних пристроях або на робочих столах. |
| Період дат (Date period) |
Відстежує дату, коли відвідувач зайшов на сайт. Віджет спрацьовуватиме лише протягом вибраних дат. |
Виберіть інтервал дат, коли віджет відображатиметься на сайті. Після 00:00 розпочинається відлік нового дня. Тому нічні періоди потрібно прописувати за формулою: «період до 23:59», оператор «або», «період з 00:01». При створенні враховується часовий пояс вашого браузера, а при використанні часовий пояс ваших клієнтів. |
| Відвідано сторінок (Pages visited) |
Відстежує кількість відвідуваних сторінок за весь час. Віджет працює, коли користувач відвідає більше або менше певної кількості сторінок. |
Виберіть «більше» або «менше». Введіть значення, яке відповідає кількості сторінок, які потрібно переглянути, перш ніж запуститься віджет. |
| Відвідано сторінок у поточній сесії (Pages visited in current session) |
Відстежує кількість відвідуваних сторінок за поточну сесію. Віджет працює, коли користувач відвідає більше або менше певної кількості сторінок протягом однієї сесії. |
Виберіть «більше» або «менше». Введіть значення, яке буде більшим або меншим від кількості сторінок, відвіданих під час поточної сесії. |
| Мова браузера (Browser language) |
Відстежує мову, виставлену у відвідувача у налаштуваннях браузера Ви можете вибрати це налаштування для показу (або приховування) попапа для різних мовних версій сайту. |
Виберіть умову «рівно» або «не рівно». Виберіть мову браузера зі списку. |
| Період часу (часова зона поп-апу) (User time period) | Відстежує години, коли відвідувач зайшов на сайт.
Враховується часовий пояс, виставлений в налаштуваннях вашого аккаунту. Віджет спрацьовуватиме лише протягом вибраного проміжку часу. |
Виберіть часовий інтервал, коли віджет показуватиметься на сайті.
Наприклад, ви можете вибрати години акції або години роботи – з 18:00 до 24:00. |
| Період часу (браузер клієнта) (Client time period) | Відстежує години, коли відвідувач зайшов на сайт.
Враховується часовий пояс відвідувача сайту. Віджет спрацьовуватиме лише протягом вибраного проміжку часу. |
|
| Показувати під час кожному вході на сайт (Show every time you enter the site) | Віджет буде показуватися одразу під час переходу на сайт незалежно від попередньої взаємодії користувача з попапом та не очікуючи виконання різних умов. | |
| Показувати тільки по кліку на лаунчер (Show only upon lancher click) | Відстежує натискання користувачем на лаунчер.
Віджет спрацює, коли користувач натисне на іконку лаунчера, повʼязаного з поточним попапом. |
|
| Змінна користувача (User variable) | Відстежує наявність певного значення користувацької змінної у контакта.
Віджет спрацює, коли у контакта буде або не буде (залежно від обраного оператора) введене значення. |
Виберіть змінну, значення якої потрібно відстежити, та оператор:
«дорівнює» — повний збіг введеного значення; «не дорівнює» — не збігається з введеним значенням; «містить» — частковий збіг; «заповнено» — є будь-яке значення змінної; «не заповнено» — немає будь-якого значення змінної. Для операторів «дорівнює», «не дорівнює» та «містить» введіть відстежуване значення. |
| Показувати тільки після кліку на кнопку (Show only upon button click) | Відстежує натискання користувачем на кнопку відправки форми.
Віджет спрацює, коли користувач натисне кнопку в іншому попапі. Рекомендуємо використовувати для створення ланцюжків. |
|
| Показувати після кліку на елемент (Show upon element click) |
Відстежує натискання користувачем цільового елемента. Віджет відобразиться, коли користувач натисне на обраний елемент. |
Щоб віджет зʼявився при натисненні на елемент, вам потрібно додати клас до цього елементу.
Для цього, у перегляді попапу, перейдіть на вкладку «Код для запуску вручну». Скопіюйте код, який відповідає значенню класу, і додайте його до елементу у редакторі сайту. |
| День тижня (Day of the week) |
Відстежує дні тижня, коли користувач заходить на сайт. Віджет відобразиться, коли користувач зайде на сайт у визначені дні тижня. |
Виберіть «показувати у» або «не показувати у».
Виберіть день/дні тижня. |
| Показувати періодично (Show periodically) |
Відстежує кількість разів, скільки користувач зайде на сайт у вибраний проміжок часу. Віджет відобразиться у вибрані інтервали. |
Виберіть інтервал показу попапу. Ви можете вибрати показ «Раз в день», «Раз на тиждень», «Раз на місяць», «Раз на рік» або «Встановити період» щоб налаштувати власний інтервал (у днях). |
Додавання зв'язувальних операторів
І або
Якщо потрібно додати додаткові значення для поточного типу умови, клацніть значок + праворуч.
Виберіть оператор «і» (and) або «або» (or).
Оператор «і» використовується, щоб враховувалося строго кожне значення — і перше, і друге. Якщо жодна з умов не враховується, то попап не з'явиться на сайті.
Оператор «або» використовується, щоб враховувалося будь-яке зі значень — перше або друге.
Кожне будь-яке
Ви можете комбінувати різні типи умов та перевіряти інформацію відразу за кількома параметрами.
Якщо потрібно додати ще одну умову, натисніть «Додати умову» (Add condition).
Виберіть порядок виконання умов:
Оператор «кожну» (all) використовується, щоб попап відобразився лише у разі настання всіх умов.
Оператор «будь-яку» (any) використовується, щоб попап відобразився у разі виконання будь-якої із заданих умов.
Введіть назву сценарію
За замовчуванням назва проекту береться з дати та часу, коли створюється сценарій. Щоб змінити назву, натисніть відповідну іконку біля назви.
Опублікуйте попап
Після налаштування умов натисніть «Зберегти та опублікувати» (Save and publish).
Щоб зміни відобразилися і ви могли перевірити все у своєму браузері, після збереження очистіть кеш і куки браузера.
Усі попапи відображаються у розділі «Сценарії на сайті» (Scripts on the site) в окремих вкладках. Після створення ви можете переглянути зовнішній вигляд попапа, відстежувати статистику та відредагувати будь-яке налаштування, крім типу попапа.
Оновлено: 18.09.2023
Зареєструватися через соцмережі
Увійти з Facebook Увійти з Google