Вхiд

Email

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

In-App
Рекомендації в мобільних додатках

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

Мультимовність

Документи

Відповідність GDPR

Інтеграція

Інтеграція з сайтом

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

Модальне вікно — елемент (форма підписки в eSputnik), що знаходиться поверх головного вікна сайту.

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

Зверніть увагу!

Для роботи модальної форми на вашому сайті необхідно встановити скрипт eSputnik. Щоб його отримати, перейдіть до вкладки "Сайт" — "Форми" і натисніть "Отримати код". Після цього вкажіть домен вашого сайту і додайте скрипт у код сайту перед закриваючим тегом. Скрипт має бути встановлений на всіх сторінках.

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

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

Тип форми

  1. Перейдіть до вкладки “Сайт” — “Форми”: Сайт — Форми
  2. У розділі “Власні форми” натисніть кнопку “Створити власну форму”: Створити власні форми
  3. У меню, що відкриється, виберіть “Модальне вікно”: Тип форми та поля — Модальне вікно
  4. Надайте формі назву. Зверніть увагу, що ім'я форми використовується для пошуку в системі eSputnik, відвідувачі сайту його не побачать.
  5. Виберіть поля контакту, які необхідно зібрати: Поля контакту, які треба зібрати
  6. Натисніть "Далі".

Створення форми в стилі сайту

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

 

Вертикальна із зображенням

 

  • Вертикальна із фоном: Вертикальна із фоном
  • Вертикальна з зображенням зліва: Вертикальна з зображенням ліворуч 
  • Вертикальна мінімалістична: Вертикальна без зображення

    Оформлення та контент форми

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

 

  1. У вкладці "Оформлення" ви зможете попрацювати зі стилем тексту. Стандартний шрифт — Arial, але можна вибрати будь-який інший. Його має бути завантажено на сайт: Стиль тексту
  2. У розділі "Адаптивність" вкажіть ширину екрану, починаючи з якої відображення форми перебудовується на мобільну версію. За замовчуванням це менше ніж 576 пікселів:  

 

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

Панель “Базові компоненти”

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

  1. Клікнувши головний текст, ви побачите редактор із налаштуваннями. Тут можна встановити розміри контейнера, стиль тексту, внутрішні та зовнішні відступи: Редактор із налаштуваннями
  2. За кліком зображення відкриються його налаштування. Тут можна завантажити потрібну картинку або знайти її у внутрішніх джерелах. А також задати її розмір та позиціонування: Редактор зображень
  3. Перейдіть до структури, що складається з полів для заповнення (просто натисніть лівою кнопкою миші на будь-якій вільній від елементів зоні форми). Встановіть для неї потрібні налаштування. Крім стандартних розмірів та відступів, ви можете вибирати розміщення елементів: Вирівнювання елементів усередині

Можна встановити для структури фон, додати тіні або обведення, закруглити кути: Фон

4. У полях для заповнення теж можна встановити всі налаштування: розміри, відступи, фон, текст і т.ін. Якщо в полі є номер телефону, виберіть код країни за замовчуванням: Код країни за замовчуванням

Вкажіть, які поля мають бути обов'язковими (наприклад, ім'я та email, або ж усі поля): Валідація 

5. Після того, як ви встановили всі налаштування, для кнопки “Підписка” можна увімкнути ховер-ефект (при наведенні на кнопку вона буде мінятися відповідно до заданих налаштувань): Ефект ховера 

6. Загальні налаштування форми стандартні: виберіть фон, виберіть розміщення, задайте розміри та відступи: Загальні налаштування форми

7. Для станів форми “Успішна підписка”, “Повторна підписка” та “Помилка” слід також задати актуальні параметри (так само як для форми підписки): Форми “Повторна підписка” та “Помилка”

8. У вкладці “Контент” у розділі “Мобільні налаштування” ви зможете побачити, як форма виглядатиме на телефоні, та зробити необхідні налаштування: Мобільні налаштування

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

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

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

Параметри

Параметри форми

Для налаштування умов показу вікна натисніть “Редагувати” навпроти цього пункту: Параметри форми

Тут можна:

  • Вибрати частоту показу: Частота показу форми
  • Коли буде показано форму: Коли буде показано форму
  • Кому показувати: Кому буде показано форму
  • Вибрати сторінки, на яких відображатиметься форма. Або виключити непотрібні: Сторінки, на яких відображатиметься форма
  • Можна управляти показом форми за допомогою API, показувати її за кліком елемента на сайті. Для цього треба вставити CSS-селектор елемента виклику: Показ форми за допомогою API

Або показувати за допомогою JavaScript: Показ форми за допомогою JavaScript

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

  1. За бажанням виберіть групу, до якої будуть додаватися контакти: Зберегти контакти до групи

Додавати можна або тільки нові, або також існуючі контакти: Додати тільки нові контакти

2. Підтвердження email-адреси через відправлення повідомлення. Для чого потрібен Double Opt-In, читайте тутПідтвердження email-адреси через відправлення повідомлення

3. Виберіть лист, що підтверджує підписку: Відправити лист-підтвердження

4. Виберіть, куди направити користувача після кліку в листі. Можна створити сторінку подяки за підписку, можна перенаправити на сторінку сайту: Перенаправити юзера після кліку

5. За бажання вибудовуйте власний welcome-ланцюжокWelcome-ланцюжок

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

7. Введіть посилання на сайт і натисніть "Переглянути на сторінці": URL сторінки 

8. При успішному виконанні всіх кроків pop-up відобразиться у вас на веб-сайті відповідно до заданих умов.

9. Після тестування форми відкрийте її, натиснувши кнопку “Можуть бачити відвідувачі сайту”, і після цього натисніть “Зберегти”: Форму бачать відвідувачі сайту

10. Щоб зупинити показ форми, натисніть кнопку "Бачите тільки ви", і після цього — "Зберегти": Форму бачите тільки ви

11. У вкладці “Статистика” можна побачити результати форми: Статистика за формами

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