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

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

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

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

Тип форми

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

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

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

Варіант 1

Варіант 2

Варіант 3

Варіант 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 форми

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

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

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

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

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

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

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

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

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

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