Як налаштувати кастомну форму попапу
За допомогою різних типів елементів ви можете створити попап, щоб збирати необхідні дані контактів та зберігати їх у змінних для подальшої сегментації аудиторії та персоналізації взаємодій.
У статті розглянемо, як створити та налаштувати такий попап.
Створіть новий попап або перейдіть до режиму редагування існуючого. Додайте елементи для збору даних та кнопку для надсилання форми. Ви також можете додати обкладинку та змінити текст.
Читайте детальніше: Як створити розумний попап.
Налаштуйте елемент для введення даних
Додати елемент Поле введення
За допомогою елемента Поле введення ви можете запитувати у користувача різні дані та зберігати їх у змінну.
Щоб ідентифікувати підписника і додати або оновити його дані, зібрані з інших елементів, вам потрібно додати поле введення з запитом email адреси. Ви також можете приховати поле, якщо є можливість передавати значення з вашої системи.
В розділі Елементи (Elements) натисніть + Додати елемент (+ Add element) та виберіть Поле введення (Entry field).
Якщо в попапі вже є поле, натисніть на нього.
Виберіть змінну
Натисніть на вміст поля Змінна (Variable) і виберіть, яку змінну зберігати значення. Ви можете вибрати існуючу змінну або створити нову.
Щоб створити нову змінну, прокрутіть вниз та натисніть + Додати змінну. Вкажіть її назву та виберіть тип даних:
| Рядок (String) | Використовується для введення до 255 текстових символів. |
| Число (Number) | Використовується для введення числових значень. |
| Електронна пошта (Email) | Використовується для введення електронних адрес у вигляді example@example.com. |
| Телефон (Phone) | Використовується для введення номерів. Рекомендується вказувати у міжнародному форматі з кодом країни. |
Вкажіть назву поля
В полі Підказка всередині поля (Placeholder text) введіть текст, який допоможе користувачеві зрозуміти, що потрібно ввести. За замовчуванням у полі підставляється назва змінної.
Ви також можете додати додатковий заголовок поля, який відображатиметься над ним. Увімкніть перемикач Відображати заголовок (Display title) та введіть назву.
Зв'яжіться зі змінною
Для зручності користувачів ви можете автоматично заповнювати поля попапа. Дані в попапах будуть додаватися через Local Storage, Cookies (для збирання з локального сховища в браузері користувача) або API (для збирання з вашої системи) і передаватися після надсилання форми.
В полі Підказка всередині поля (Placeholder text) натисніть {} та виберіть створену в налаштуваннях змінну.
Читайте детальніше: Як передавати користувацькі змінні.
Ви також можете приховати поля, якщо вони попередньо заповнені значенням змінних. Наприклад, якщо користувач вже реєструвався та у вас є необхідні дані, ви можете не вимагати ту ж інформацію повторно.
За замовчуванням, якщо у вас чи користувача в системі є значення для вибраних змінних, віджет автоматично підставить їх у поля. Користувач може переглянути ці значення, відредагувати їх і потім відправити.
Якщо ви увімкнете функцію Приховати попередньо заповнене поле, поля будуть приховані від користувача, а значення будуть передаватися під час надсилання форми.
Налаштуйте подвійне підтвердження
Ви також можете активувати опцію Запитувати підтвердження підписки (Request subscription confirmation) — у такому разі підписник отримає лист підтвердження після заповнення поля із запитом адреси електронної пошти та надсилання форми. Дані SendPulse передаються тільки після підтвердження (метод double opt-in).
Виберіть лист зі списку створених у налаштуваннях інструментів підписки. Щоб додати повідомлення, яке відображатиметься після того, як користувач надішле форму, натисніть Налаштувати оповіщення (Set up the notification).
Встановіть обов'язковість поля
Якщо вам потрібно, щоб дані форми можна було надіслати лише після заповнення поля, позначте Зробити обов'язковим (Make required).
У такого поля біля заголовка з'явиться * – позначення, що поле є обов'язковим для заповнення.
Додайте елементи для вибору даних
Також ви можете збирати дані підписників, пропонуючи свої варіанти значень, а змінну записувати те, що вибрав підписник.
Наступні елементи підходять для збору даних із варіативністю вибору:
| Дропдаун | Елемент, в якому користувач зможе вибрати одне значення зі списку, що випадає. Наприклад, пріоритетну категорію товарів. |
| Радіо-кнопка | Елемент, у якому користувач зможе вибрати одне значення за допомогою радіокнопок. |
| Прапорець | Елемент із текстом, який відвідувач може відзначити галочкою. Наприклад, запитати згоду на обробку даних. |
| Мультивибір | Елемент, у якому користувач зможе відзначити кілька значень у чекбоксах. |
Елементи налаштовуються аналогічно елементу Поле введення.
Додатково потрібно буде настроїти поля з варіантами. В полі Варіант введіть значення, яке відображатиметься користувачам, та у полі Значення введіть значення, яке збережеться у змінну.
При додаванні кількох варіантів ви можете залишити поле позначки порожнім або відзначити їх за користувача, нагадуючи вибір. Наприклад, ви можете наперед відзначити поля, обов'язкові для заповнення.
Налаштуйте кнопку
У попапі з елементами, в яких ви запитуєте дані у користувача, обов'язково потрібно додати елемент Кнопка. Натискання на кнопку передає дані заповнених полів у розділ Контакти та, якщо ви налаштуєте відповідні дії, — в Email і CRM сервіси.
Введіть текст кнопки та виберіть дію за кліком на кнопку: Закрити модальне вікно (Close modal window) або Відкрити URL (Open URL). Якщо вибрано другий варіант, у наступному полі вставте посилання.
Ви можете також вибрати колір кнопки. За замовчуванням береться колір із вкладки Стиль попапа.
Додати інші елементи
Також ви можете урізноманітнити попап та додати до неї інші елементи. Наприклад, щоб збирати підписників на чат-бота, додайте елемент Месенджер, а для додаткового тексту використовуйте елемент Текст.
Читайте детальніше: Як налаштувати елементи.
Налаштуйте порядок елементів
Щоб змінити порядок відображення полів або елементів, наведіть ліворуч на іконку, затисніть її та перетягніть у відповідне місце зверху або знизу.
Після того як закінчили налаштовувати дизайн та елементи форми, натисніть Далі.
Налаштуйте зовнішній вигляд
Ви також маєте можливість налаштувати розмір кожного поля. В полі Розмір (Size) виберіть опції: малий (S), середній (M) і великий (L).
Також стилі можна застосувати до всіх інших параметрів елементів у вкладці Стиль.
Налаштуйте сценарій відображення
У вкладці Умови відображення (Display condition), можна активувати показ попапа по кліку або налаштувати сценарій відображення форми відповідно до дій користувача на сайті. Ви можете додати кілька умов, використовуючи оператори зв'язку, та вибирати порядок їх виконання.
Читайте детальніше: Як налаштувати сценарій показу попапа.
Налаштуйте збереження даних
У вкладці Збереження даних (Data saving) ви можете вибрати, де зберігати дані підписників в інших сервісах.
Активуйте відповідний перемикач та виберіть, куди зберігати дані:
| Зберегти до адресної книги (Save to a mailing list) | Зберігає контакт із даними у вибрану адресну книгу в сервісі Email. Назва змінної береться з назви поля чи елемента, а значення – із заповненого поля чи відзначеного відвідувачем елемента попапа.
Виберіть адресну книгу, в якій зберігатимете контакт. |
| Створити угоду в CRM (Create a deal in CRM) | Зберігає дані у вигляді угоди та контакту у CRM. Виберіть лійку, введіть назву та статус угоди.
При збереженні даних контактів у CRM створюються нові поля контакту. |
| Надсилати email повідомлення про нових підписників (Send an email notification about new subscribers) | Надсилає листа про кожного нового підписника. Введіть пошту, на яку надсилати повідомлення. |
Після налаштування попапа натисніть Зберегти та опублікувати (Save and publish) або Зберегти та закрити.
Створені попапи відображатимуться в рамках вашого проекту у вкладці Попапи (Pop-ups).
Оновлено: 29.03.2024
або