Налаштування pop-up віджета для сайту

Відстеження подій та поведінки

Email

Омніканальність

Автоматизація

Налаштування модального вікна

Pop-up – це віджет для збирання контактної інформації, що спливає поверх вікна сайту.

Ви можете помістити цей віджет будь-де на вашому сайті без зміни коду.

Важливо

Для публікування віджета встановіть наш скрипт на сайті. Щоб отримати скрипт, перейдіть до розділу “Сайт” – “Віджети”, натисніть кнопку “Отримати скрипт” та вкажіть домен вашого сайту. Встановіть скрипт на вебсайті перед тегом /body на кожній сторінці сайту.

Отримати скрипт

Створення pop-up форми для сайту

Тип форми

  1. Перейдіть на вкладку “Сайт” – “Віджети” та натисніть кнопку “Створити форму підписки”.
    Створити новий віджет
  2. Виберіть тип: Pop-up.
  3. Введіть назву віджета. Зауважте, що назва використовується для пошуку в системі; відвідувачі не побачать її на вашому сайті.
  4. Виберіть поля контакту, які потрібно зібрати: email, номер телефону та/або ім'я.
    Вибір типу та полів
  5. Після завершення налаштування натисніть кнопку "Далі".

Зовнішній вигляд форми

  1. Щоб встановити кольори для головного заголовка, фону та кнопки, натисніть на відповідний елемент та виберіть колір.
    Колір елементів форми
  2. Щоб вибрати стиль форми, оберіть шаблон, який вам подобається. Всього є п'ять стилів: класичний, мінімалізм, м'який, декоративний і сучасний. Потім натисніть "Далі".
    Стилі
  3. Виберіть найбільш підходящий вид форми. Ви зможете редагувати його пізніше:

Варіант 1

Варіант 1

Варіант 2

Варіант 2

Варіант 3

Варіант 3

Варіант 4

Варіант 4

Натисніть “Далі”.

Контент форми

Редагуйте контент для всіх станів форми:

  • Форма підписки – бачить новий користувач;
  • Успішна підписка – користувач успішно підтвердив запит;
  • Повторна підписка – користувач повторно підтвердив запит;
  • Помилка – виникла помилка.

Ліва панель налаштувань

Зліва розташовані елементи структури для перетягування у форму.

Перетягування елементів

У верхньому лівому куті розташовані кнопки для копіювання, дублювання та вирізування елементів форми, а також інструменти для редагування тексту.

Інструменти для редагування

Права панель налаштувань

Праворуч розташовані три вкладки з налаштуваннями: "Оформлення", "Контент", "Загальні".

Права панель налаштувань

Вкладка "Оформлення"

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

Іконка "Закрити"
  1. Встановіть позиціонування іконки “Закрити” для десктопу та мобільної версії:
    Позиціонування
  2. Виберіть готове зображення для іконки “Закрити” або завантажте власне:
    Зображення
Стиль тексту

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

Щоб використати інший шрифт для вебсайту, введіть його назву.

Адаптивність

У розділі “Адаптивність” вкажіть ширину екрана, починаючи з якої відображення віджета перебудовується на мобільну версію. За замовчуванням це менше ніж 576 пікселів.

Адаптивність

Вкладка “Контент”

Попап може складатися з таких рівнів:

  • структура
  • контейнер (для деяких видів віджетів)
  • елемент

Структура

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

Налаштування відображення

Важливо

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

Іконка замка

За замовчуванням для параметрів поля введення, таких як “Фон”, “Тінь” та “Обведення”, встановлено значення “Для всіх”. Це означає, що вони залишаються незмінними у разі помилки. Якщо ви хочете, щоб вони змінювалися, коли виникає помилка, у розкривному списку виберіть “Не синхронізувати”.

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

Налаштування вигляду

На рівні структури та контейнера можна змінити вирівнювання полів: з вертикального на горизонтальне та навпаки.

Налаштування полів

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

Перейти до батьківського елемента

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

Код країни

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

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

Валідація

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

Зображення для фону

Вкладка “Загальні”

У вкладці “Загальні” виберіть дію по кліку.

Дія по кліку

Верхня панель налаштувань

Верхня панель налаштувань

  1. Стрілки “Назад” та “Вперед” дозволяють скасувати або повторити внесені зміни.
  2. Налаштування багатомовності:
    • налаштування зовнішнього вигляду віджета виконуються лише для основної мови, звідки вони автоматично копіюються для всіх інших мовних версій;
    • у мовних версіях можна змінити лише текст;
    • віджет відображається мовою сайту, яка визначається значенням атрибуту lang у тезі HTML; якщо його немає, то мовою браузера.
  3. Колір фону лаунчера допоможе вам перевірити, як кнопка виглядатиме на реальному тлі.
  4. Кнопки для перемикання на мобільну та десктопну версію віджета.
  5. Попередній перегляд віджета.
  6. Закрити без збереження.
  7. Зберегти.

Вкладка “Параметри”

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

Вкладка параметрів

Виклик віджета

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

Параметри виклику віджета

Виклик за правилами

Для налаштування попапу за правилами натисніть кнопку "Редагувати".

Редагувати правила

Налаштуйте:

  • частоту показу:
    Частота показу
  • коли показувати:
    Коли показувати
  • кому показувати:
    Кому показувати
  • на яких сторінках:
    На яких сторінках показувати

Як і в конструкторі динамічних сегментів, тут можна вибрати сторінки для відображення віджета.

Ви можете керувати відображенням форм за допомогою API: по кліку на елемент або через JavaScript. Якщо потрібно використовувати спеціальний лаунчер, вставте CSS-селектор елемента виклику. Щоб відобразити форму за деяких додаткових умов, скопіюйте функцію JS нижче:

Умови для показу віджета

Виклик по кліку на кнопку

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

По кліку на кнопку

Дії після заповнення форми

  1. Виберіть групу, куди зберігатимуться контакти після заповнення форми:
    Вибір групиВи можете додати лише нові або всі контакти:
    Тільки нові контакти
  2. Налаштуйте підтвердження підписки за допомогою емейла. Детальніше про Double Opt-In>>
    Підтвердження підписки
  3. Оберіть лист-підтвердження:
    Лист-підтвердженняЯкщо у вас немає готового повідомлення, ви можете використовувати емейл за замовчуванням. Якщо воно вже є, натисніть кнопку “Замінити”, щоб вибрати потрібне.
  4. Виберіть, куди перенаправити користувача після натискання на лінк-підтвердження:
    Сторінка переадресаціїВи можете перенаправити його на сторінку подяки за замовчуванням або конкретну сторінку на вашому сайті.
  5. Підвищити залученість:
    Онбординг

Ви можете вибрати вітальний лист або налаштувати welcome-серію через сценарій, щоб залучити підписників. Активуйте перемикач “Тільки новим контактам”, щоб уникнути надсилання вітальної кампанії існуючим контактам.

Публікація pop-up форми

Зберігши всі налаштування, перевірте, як відвідувачі побачать віджет на сайті. Для цього натисніть кнопку "Тестувати віджет".

Тестування

Введіть посилання на свій сайт та натисніть кнопку “Відкрити”.

Відкрити

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

Відображення віджета

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

Опубліковано

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

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

Піктограма розкладу

Статистика форми

Перейдіть на вкладку "Сайт" – "Віджети", виберіть потрібний віджет, відкрийте вкладку "Статистика", щоб побачити показники:

  • переглядів
  • підписок
  • конверсії

"Динаміка активності" відображає ті ж показники на графіку. За потреби можна фільтрувати дані звіту за датою.

Статистика

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email