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

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

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

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

Створіть попап

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

Перейдіть в потрібний проект у вкладку Попапи (Pop-ups) і натисніть Створити попап (Create pop-up).

Виберіть тип форми попапу:

З нуля

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

Натисніть Новий попап (New pop-up).

За шаблоном

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

Виберіть праворуч категорію та ліворуч сам шаблон.

Налаштуйте елементи

Після вибору шаблону відкривається конструктор попапів у вкладці Дизайн (Design), де можна відредагувати його зовнішній вигляд і налаштувати елементи.

Якщо ви вибрали створити новий попап з нуля натисніть + Додати елемент (+ Add element) та виберіть потрібний.

Можна додавати елементи для попапів типу Стандартний, Модальне вікно, Перекриваючий і Горизонтальний. Про попапи типу Відео і Лаунчер читайте у секції Додаткові елементи.

Якщо ви вибрали створити попап за шаблоном, можна відредагувати наявні елементи. Для цього натисніть на іконку олівця — і відкриється вкладка редагування вибраного елемента.

Також ви можете перейти до редагування елемента, вибравши його на віджеті. При наведенні на елемент і режимі редагування він буде виділений зеленою рамкою.

Докладніше про кожен елемент читайте нижче.

Обкладинка

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

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

Поле введення

Запитує у користувача дані, які можна зберегти в змінні та створити контакт або оновити його дані. Наприклад, ім'я, email, телефон, дату народження та інші.

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

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

Месенджер

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

Додайте елемент Месенджер. Виберіть піктограму соцмережі та введіть текст на кнопці. У наступному полі додайте посилання на соцмережу.

Текст

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

Додайте елемент Текст. Введіть та відформатуйте текст. Додатково можна додати посилання та емодзі, а також персоналізувати повідомлення за допомогою змінних.

Дропдаун

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

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

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

Кнопка

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

Додайте елемент Кнопка. Ви можете додати кнопки у вигляді тексту чи зображення. Введіть текст або завантажте зображення та виберіть дію за кліком на кнопку.

Зображення

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

Додайте елемент Зображення. Натисніть Завантажити зображення та виберіть його з файлового менеджера.

Радіокнопки

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

Додайте елемент Радіокнопки. Виберіть змінну, в яку зберігати значення. Для кожного варіанта в полі Текст введіть текст, який буде бачити відвідувач, та у полі Значення введіть значення, яке буде записано у відповідну змінну.

Чекбокс

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

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

Мультивибір

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

Додайте елемент Мультивибір. Виберіть змінну, в яку зберігати значення. Для кожного варіанта в полі Текст введіть текст, який буде бачити відвідувач, та у полі Значення введіть значення, яке буде записано у відповідну змінну.

NPS-опитування

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

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

Ланцюжок

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

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

Курси

Показує користувачу форму реєстрації на курс. Для платного курсу відкриває форму оплати.

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

Коментар

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

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

Відео

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

На відміну від типу попапу Відео, цей елемент дає змогу комбінувати відео з іншими елементами попапу вибраного типу.

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

Таймер

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

Додайте елемент Таймер та налаштуйте дати і зовнішній вигляд.

Галерея

Показує відвідувачу по черзі зображення в режимі слайд-шоу або за кліком.

Додайте елемент Галерея. Натисніть Завантажити зображення та виберіть його з файлового менеджера.

Акордеон

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

Додайте елемент Акордеон. Налаштуйте стиль аккордеону та додайте елементи.

Завантаження файлу

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

Додайте елемент Завантаження файлу. Виберіть тип та розмір очікуваного файлу та налаштуйте відображення.

Колесо

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

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

Скретч-карта

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

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

Подарунок

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

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

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

Гральні кубики

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

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

Слот-машина

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

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

Наперстки

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

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

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

Щоб перейти до налаштування стилю, натисніть на іконку першої вкладки (Стиль). У цьому розділі ви можете:

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

Додайте мовну версію

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

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

Читайте докладніше: Як налаштувати багатомовність попапу.

Попередній перегляд

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

Після того, як перестали налаштовувати дизайн попапа, натисніть Далі (Next).

Встановіть умови показу

У наступній вкладці Умови відображення (Display conditions) ви можете налаштувати сценарій показу віджету після кліку на лаунчер або настання умови щодо відстеження поведінки відвідувачів.

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

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

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

Читайте детальніше: Як налаштувати сценарій показу попапа і Як створити попап лаунчер.

Коли ви налаштуєте сценарій показу попапа, натисніть Далі (Next).

Налаштуйте збереження даних

У наступній вкладці Збереження даних (Data saving) ви можете вибрати, де зберігати дані підписників в інших сервісах.

Активуйте відповідний перемикач* та виберіть, куди зберігати:

*Ви можете зберігати значення лише з попапів, де збираєте дані користувачів. Якщо у вас немає елементів Поле введення, Поле вводу, Дропдаун, Радіокнопка, Чекбокс, Мультивибір, NPS та Курси, перемикачі будуть неактивні.

Встановіть назву попапа

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

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

Коли ви налаштуєте попап, натисніть Зберегти та опублікувати (Save and publish) або Зберегти та закрити.

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

Всі попапи відображаються у розділі Попапи (Pop-ups) в окремих вкладках. Після створення ви можете переглянути зовнішній вигляд попапа, відстежувати статистику та відредагувати будь-яке налаштування.

Оновлено: 17.12.2024