Як створити розумний попап

За допомогою конструктора віджетів ви можете створювати розумні попапи, які показуються відвідувачам лише за заданим сценарієм. Робіть персональну пропозицію у потрібний час, допомагайте клієнту з вибором послуги або збирайте підписників, щоб продовжити роботу з ними у сервісі SendPulse.

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

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

Перейдіть до потрібного проєкту у вкладку «Сценарії показу» (Display scenarios) та натисніть «Створити попап» (Create pop-up).

Виберіть шаблон

Шаблон — це віджет із встановленими налаштуваннями на вигляд і головною дією віджета. Ви можете вибрати шаблон попапа зі списку популярних, святкових, за типом або дією віджета.

За типом попапа

Використовується для вибору шаблону на вигляд виджета.

Перекривний (Overlay) — блок, що перекриває всю сторінку сайту. Для взаємодії з контентом необхідно закрити вікно попапа.

Спливний (Floating) — рухомий блок, зафіксований ліворуч або праворуч у вікні браузера під час прокручування сторінки. Не заважає взаємодіяти із контентом.

Горизонтальний (Horizontal) — горизонтальний блок, який можна зафіксувати зверху або знизу сторінки. Взаємодії із контентом не заважає.

З відео (Video) — блок, який відтворює відео з YouTube. Якщо вибрано автоматичний сценарій, відео розпочнеться після будь-якої дії користувача на сторінці.

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

На мобільних пристроях відеопопапи завжди відтворюються після натискання, щоб не бути нав'язливими.

Модальне вікно (Modal window) — блок, розташований по центру сторінки. Контент поза блоком затемнений і не клікабельний. Для взаємодії з контентом необхідно закрити модальне вікно.

По дії попапа

Використовується для вибору шаблону цільової дії.

Запит куків (Cookie request) — запитує у відвідувача згоду на використання кукі. Натискання кнопки закриває попап. Також відвідувач може перейти за посиланням, щоб ознайомитися з правилами використання кукі.

Заклик до дії (Call to action) — мотивує відвідувача вчинити дію: закрити попап або перейти на цільову сторінку.

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

Напишіть нам (Write to us) — дає відвідувачу сайту можливість зв'язатися з вами через соцмережу або форму зворотного зв'язку.

Підписка на пошту (Newsletters subscription) — збирає email підписників.

Запит телефону (Phone request) — збирає телефони підписників.

Кастомна форма (Custom form) — збирає додаткові дані підписника.

Налаштуйте зовнішній вигляд

Після вибору шаблону відкривається конструктор віджета у вкладці «Контент» (Content), де можна відредагувати його зовнішній вигляд і змінити цільову дію.

Виберіть, відображати зображення чи ні. Якщо вибрали відображати, завантажте зображення у форматі JPG, PNG або GIF вагою до 1 MB і виберіть положення щодо тексту та кнопки: ліворуч, праворуч, зверху або на весь екран.

Для типу «Відео» (Video) додайте посилання на відео в Youtube і виберіть, коли програвати відео — автоматично або після натискання.

Виберіть колір фону — білий, чорний або кольоровий — і розташування попапа на сторінці.

Ви можете вибрати розташування тільки для попапів типу «Попап» (Pop-up) та «Відео» (Video) — ліворуч або праворуч та «Довгий» (Long) — знизу чи зверху.

Праворуч ви можете подивитися, як виглядатиме попап на вашому сайті.

Додайте повідомлення

Введіть корисне повідомлення для відвідувачів сайту, яке відповідає ситуації та залучить потенційних клієнтів до взаємодії з попапом. Ви можете форматувати текст, додавати посилання та емодзі.

Наприклад, якщо відвідувач переглянув сторінку продукту понад три рази, повідомлення у спливаючому попе йому допоможе зробити вибір, а вам — закрити продаж. Тим, хто знаходиться на сторінці доставки та оплати, віджет допоможе розрахувати вартість доставляння товару.

Налаштуйте дію

Кожен вибраний шаблон передбачає свою цільову дію, яка очікується від користувача: натиснути на кнопку, підписатися або надати контактні дані.

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

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

Дія Опис Як налаштувати
Заклик до дії Закликає відвідувача вчинити дію: закрити попап або перевести на цільову сторінку. Додайте текст до кнопки й виберіть дію — що робити при натисканні: закрити попап або відкрити посилання.
Без кнопки

Не додає елементи взаємодії з відвідувачем. 

Віджет використовується лише для відображення інформації.

Немає кнопки або поля введення для налаштування.
Кнопка месенджера

Перенаправляє відвідувача на месенджер обраної соціальної мережі. 

Ви можете додати до 10 соцмереж в один попап. 

Якщо у вас підключено чат-бот, підписує на нього і запускає ланцюжки.

Виберіть піктограму соцмережі та введіть текст на кнопці. 

 

Для Telegram, WhatsApp, Instagram та Facebook Messenger ви можете вибрати  підключений бот. 

 

 

Передплата на пошту

Запитує у відвідувача його email. 

Ви також можете зберегти контакт в Email, CRM сервіси та запустити Automation.

Вставте текст підказки для поля, в якому підписники залишатимуть свої контактні дані та введіть назву кнопки. 

Щоб зберегти в Email сервіс, активуйте «Зберігати в адресну книгу для розсилок» (Save to address book for mailings) та виберіть адресну книгу. 

Якщо у вас немає створеної адресної книги, сервіс автоматично створить її з назвою проєкту. 

Для збереження в CRM активуйте «Створити угоду в CRM» (Create a deal in CRM) і виберіть, в яку воронку та на який етап створювати угоду з даними про контакт. 

Під час створення операцій у CRM автоматично створюються контакти у розділі «Контакти» (Contacts).

Запит телефону

Запитує у відвідувача його телефон. 

 

Ви також можете зберегти контакти в Email і CRM сервіси.

Кастомна форма

Запитує користувача вибрані вами дані. 

 

Ви можете додати до форми додаткові поля: телефон, емейл, ім'я, нікнейм, розташування та дату народження. 

Ви також можете зберегти контакт в Email та CRM сервіси.

Після налаштування зовнішнього вигляду та дії натисніть «Далі» (Next).

Налаштуйте сценарій показу

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

Типи умов

Виберіть подію, яка буде відстежуватися в поведінці відвідувача сайту, оператор умови й введіть значення, що відстежується.

Подія Опис Як налаштувати
Показувати завжди Віджет відображатиметься одразу при переході на сайт, не очікуючи виконання різних умов.
UTM Medium

Відстежує параметр, який визначає тип трафіку. 

Віджет активується лише у користувачів із заданим значенням параметра utm_medium

 

Виберіть умову «рівно», «не рівно» або «містить». 

 

Введіть значення, що дорівнює або містить символи параметра utm_medium.                

Можливі значення:

cpc/em> — реклама з оплатою за клік,

cpm — реклама з оплатою за покази,

referral , organic — перехід на сайт із пошукових систем,

social — перехід з поста, налаштування реклами в соціальних мережах та інше.

UTM Content

Відстежує параметр, який визначає частину сторінки, з якої користувач прийшов. 

Віджет спрацює лише у користувачів із заданим значенням параметра utm_content.

Виберіть умову «рівно» (equal), «не рівно» (not equal) або «містить» (contains). 

Введіть значення, що дорівнює або містить символи параметра utm_content

Можливі значення:

/ — перехід з головної сторінки сайту або кінцева частина адреси,

/emailserviсe/forms — перехід з іншої сторінки сайту. Також може включати назву елементів сторінки.

UTM Term

Відстежує параметр, який визначає ключове слово або фразу запиту, за яким користувач потрапив на сайт з пошукової системи. 

Віджет працює тільки у користувачів із заданим значенням параметра utm_term.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, що дорівнює або містить символи utm_term.

UTM Campaign

Відстежує параметр, який визначає назву рекламної кампанії. 

Віджет відображатиметься лише у користувачів із заданим значенням параметра utm_campaign.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, що дорівнює або містить символи utm_campaign.

UTM Sourse

Відстежує параметр, який визначає джерело трафіку, звідки користувач перейшов. 

Віджет відображається лише для користувачів із заданим значенням параметра utm_source.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, що дорівнює або містить символи параметра utm_source

Можливі значення:

site.com — будь-який сайт,

google — пошукова система.

facebook.com — соціальні мережі.

direct — користувач ввів URL у браузері або зайшов на сайт із закладок.

Тип трафіку

Відстежує, звідки перейшов відвідувач. 

Віджет активується лише у відвідувачів із вибраного каналу трафіку.

Виберіть умову «рівно» або «не рівно».

Виберіть один із семи можливих типів трафіку:

referral — прийшов за посиланням,

organic — перейшов на сайт із пошукових систем,

utm — прийшов за посиланням з UTM-міткою,

social — перейшов із соціальних мереж,

typein — ввів URL-адресу в адресний рядок.

Час на поточній сторінці

Відстежує час на сторінці. 

Віджет спрацює, коли відвідувач перебуває на сторінці вказаний у налаштуваннях час.

Виберіть «більше» або «менше». 

Введіть значення, яке буде більшим або меншим за тривалість відвідування цільової сторінки в секундах, хвилинах або годинах.

Час на сайті

Відстеження часу, проведеного на всіх сторінках сайту. 

Віджет спрацює, коли відвідувач перебуває на сайті вказаний у налаштуваннях час.

Виберіть «більше» або «менше». 

Введіть значення, яке буде більшим або меншим за тривалість відвідування сайту в секундах, хвилинах або годинах

Кількість сесій

Відстежує кількість сесій відвідувача. 

Віджет спрацює, коли користувач здійснить задану в налаштуваннях кількість сесій.

Виберіть «більше» (more) або «менше» (less). 

Введіть значення, яке буде більшим або меншим за цільову кількість сесій на одного користувача

Скролл понад 50% сторінки

Відстежує глибину перегляду сторінки. 

Віджет спрацює, коли відвідувач прокрутить половину сторінки.

Виберіть «так» (yes) або «ні» (no).
Вихід курсору за межі екрана

Відстежує рух курсору мишки. 

Віджет спрацює, якщо відвідувач почне або не розпочне рух курсором для переходу на іншу вкладку або закриття поточної.

Виберіть «так» або «ні».
Джерело трафіку

Відстежує сторінку, з якої перейшов відвідувач. 

Віджет спрацює, якщо вказаний URL відповідає URL переходу.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть адресу сторінки, на якій користувач перейшов на ваш сайт.

URL поточної сторінки

Відстежує, на якій сторінці зараз користувач знаходиться. 

Ви можете вибирати це налаштування для показу (або приховування) попапа на певних сторінках сайту. 

Віджет спрацює після завантаження сторінки із заданою URL-адресою.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, яке містить посилання або частину посилання на цільову сторінку

URL поточної сторінки

URL відвіданої сторінки

Відстежує, з якої сторінки користувач перейшов. 

Віджет спрацює після завантаження сторінки із заданою URL-адресою.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, яке містить посилання або частину посилання на цільову сторінку URL відвіданої сторінки.

Заголовок сторінки

Відстежує сторінки за назвою заголовка. 

Віджет спрацює, коли відвідувач зайде на сторінку з таким самим заголовком.

Виберіть умову «рівно», «не рівно» або «містить». 

Введіть значення, що дорівнює або містить символи заголовка цільової сторінки.

Браузер

Відстежує, з якого браузера та на якому пристрої заходить відвідувач. 

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

Введіть значення, яке збігається з назвою браузера або відповідає всім браузерам на мобільних пристроях або на робочих столах.
Період дат

Відстежує дату, коли відвідувач зайшов на сайт. 

Віджет спрацьовуватиме лише протягом вибраного часу

Виберіть часовий інтервал, коли віджет відображатиметься на сайті. 

Після 00:00 розпочинається відлік нового дня. Тому нічні періоди потрібно прописувати за формулою: «період до 23:59», оператор «або», «період з 00:01». 

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

Відвідано сторінок

Відстежує кількість відвідуваних сторінок за весь час. 

Віджет працює, коли користувач відвідає більше або менше певної кількості сторінок.

Виберіть «більше» або «менше». 

Введіть значення, яке відповідає кількості сторінок, які потрібно переглянути, перш ніж запуститься віджет.

Відвідано сторінок у поточній сесії

Відстежує кількість відвідуваних сторінок за поточну сесію. 

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

Виберіть «більше» або «менше». 

Введіть значення, яке буде більшим або меншим від кількості сторінок, відвіданих під час поточної сесії.

Мова браузера

Відстежує мову, виставлену у відвідувача у налаштуваннях браузера 

Ви можете вибрати це налаштування для показу (або приховування) попапа для різних мовних версій сайту.

Виберіть умову «рівно» або «не рівно». 

Виберіть мову браузера зі списку.

Додавання зв'язувальних операторів

І або

Якщо потрібно додати додаткові значення для поточного типу умови, клацніть значок + праворуч.

Виберіть оператор «і» (and) або «або» (or).

Оператор «і» використовується, щоб враховувалося строго кожне значення — і перше, і друге. Якщо жодна з умов не враховується, то попап не з'явиться на сайті.

Оператор «або» використовується, щоб враховувалося будь-яке зі значень — перше або друге.

Кожне будь-яке

Ви можете комбінувати різні типи умов та перевіряти інформацію відразу за кількома параметрами.

Якщо потрібно додати ще одну умову, натисніть «Додати умову» (Add condition).

Виберіть порядок виконання умов:

Оператор «кожну» (all) використовується, щоб попап відобразився лише у разі настання всіх умов.

Оператор «будь-яку» (any) використовується, щоб попап відобразився у разі виконання будь-якої із заданих умов.

Введіть назву сценарію

За замовчуванням назва проекту береться з дати та часу, коли створюється сценарій. Щоб змінити назву, натисніть відповідну іконку біля назви.

Опублікуйте попап

Після налаштування умов натисніть «Зберегти та опублікувати» (Save and publish).

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

Усі попапи відображаються у розділі «Сценарії на сайті» (Scripts on the site) в окремих вкладках. Після створення ви можете переглянути зовнішній вигляд попапа, відстежувати статистику та відредагувати будь-яке налаштування, крім типу попапа.

    Оцініть, наскільки стаття була корисною "Як створити розумний попап"

    Оцінка: 4 / 5

    Почніть користуватися сервісом SendPulse прямо сьогодні