Email

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

In-App

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

Сценарії. Опис блоків

Документи

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

Інтеграція

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

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

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

Важливо

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

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

Нижче — інструкція зі створення віджета для сайту.

1. Тип форми та поля

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

2. Налаштування стилю форми

У вкладці "Стилі сайту" ви можете налаштувати:

  1. Колір основної кнопки, основного заголовка та фону: для цього клікніть елемент, оберіть колорпікером колір або введіть його код, відрегулюйте прозорість і виберіть кольорову модель.
  2. Дизайн форми: класичний, мінімалізм, м'який, декоративний або сучасний. Завершивши внесення налаштувань на цій сторінці, натисніть кнопку “Далі”.
    Дизайн форми

3. Вибір вигляду форми

На цій сторінці ви можете вибрати один із чотирьох способів розміщення полів форми:

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

Вертикальна форма із супровідним текстом2. Вертикальний із картинкою та супровідним текстом:

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

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

Вертикальна форма в рамці та із текстомПісля того, як ви натиснете кнопку “Вибрати” біля одного з варіантів, відкриється сторінка редагування контенту форми.

4. Редагування контенту форми

Тут ви можете відредагувати контент форми в чотирьох її базових станах:

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

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

Редактор форм працює за принципом Drag-n-Drop конструктора. Якщо вам потрібно додати якийсь елемент, просто натисніть на нього лівою кнопкою миші й перенесіть у відповідне місце форми.

Елементи структури форми

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

Панель редагування

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

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

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

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

Ця вкладка призначена для редагування шрифту і адаптивності (ширина екрана для переходу до мобільної версії).

Стиль тексту

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

Стиль тексту

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

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

Щоб змінити відображення елементів на мобільному, натисніть на елемент і перейдіть у вкладку "Контент" → "Мобільні налаштування".

Вкладка "Контент"

Відредагуйте окремі структурні частини форми.

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

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

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

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

Важливо

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

 

Піктограма замка

Параметри поля вводу, такі як тло, тінь і обведення, встановлені "для всіх" за замовчуванням. Це означає, що вони залишаються незмінними у разі помилки. Якщо ви бажаєте, щоб вони змінювалися в разі помилки, у випадному списку оберіть "Не синхронізувати".

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

Налаштування

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

Вирівнювання елементів

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

Батьківський елемент

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

Код країни

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

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

Валідація

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

Вибір зображення

Вкладка "Загальні"

У цій вкладці виберіть дію по кліку.

Дія по кліку

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

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

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

5. Вибір місця розміщення

  1. Введіть CSS-селектор елемента, який ви бажаєте зробити місцем розміщення форми.CSS-селектор
  2. Вкажіть, як розмістити форму відносно знайденого елемента:
  • перед елементом;
  • після елемента;
  • всередині елемента першою;
  • всередині елемента останньою;
  • замінити елемент.

Місце розміщення

Якщо ви не готові вказати місце розміщення форми, активуйте перемикач "Вказати місце розміщення пізніше".

Натисніть “Готово”. Спочатку форму бачитимете тільки ви, на наступній сторінці ви зможете зробити її загальнодоступною.

6. Перевірка коректності налаштувань

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

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

У вкладці "Параметри" ви можете:

  1. змінити назву форми;
  2. відредагувати зовнішній вигляд
  3. відредагувати умови відображення;
  4. змінити розміщення;
  5. встановити дії після підписки:
  • визначити групу для збереження контактів;
  • увімкнути або вимкнути DOI;
  • додати або змінити лист-підтвердження;
  • обрати, куди перенаправити користувача після натискання посилання для підтвердження;
  • підключити або відключити онбординг.

За замовчуванням до форми автоматично підставляється лист для підтвердження email, який раніше було створено в акаунті. Якщо в акаунті немає листа-підтвердження, буде автоматично додано базовий шаблон. За потреби можна відредагувати або створити інший лист; головна умова – він має містити кнопку підтвердження email-адреси контакту.

Посилання для підтвердження

До кнопки буде автоматично прив'язаний тип події SysConactConfirmed, який запускає системний сценарій.

Тип події

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

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

За замовчуванням цю форму бачите лише ви. Перш ніж публікувати форму, не забудьте перевірити, як вона виглядає на вебсторінці. Для цього натисніть кнопку "Тестувати віджет", введіть вебадресу сторінки з формою і ще раз натисніть "Тестувати віджет".

Коли всі необхідні налаштування додані, натисніть кнопку "Опубліковано" і збережіть налаштування. 

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

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

Розклад

7. Статистика

Щоб побачити статистику, перейдіть до вкладки “Сайт” → “Віджети”, клікніть назву форми, яка вас цікавить, перейдіть у вкладку "Статистика". Тут ви можете побачити:

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

Статистичні дані оновлюються щохвилини. Інформація подається у вигляді графіків за певний період для зручного відстеження ефективності форми.

Статистика

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