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

Email

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

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

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

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

Типи виджетів

Ми надаємо 4 типи віджетів:

1. Форми підписки – віджети для збирання контактних даних: email, телефон, ім'я.

Форми підписки

2. Інформери – клікабельні віджети для інформування відвідувачів сайту про акції, знижки, нові надходження, майбутні події та підвищення залучення до соцмереж.

Інформери

3. Кнопки виклику – віджети, що дозволяють відвідувачам оформити підписку у зручний момент.

Кнопки виклику

4. Вікове обмеження – віджет, який перекриває основний контент сайту, поки відвідувач не підтвердить свій вік.

Вікове обмеження

Важливо

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

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

Після встановлення скрипта можна приступити до створення віджета. Всі типи віджетів мають схожі налаштування.

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

Виберіть тип віджета

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

Почніть створення віджета з базових налаштувань.

1. Вкладка “Тип віджета і поля”

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

1.2. Для форм підписки та інформерів виберіть тип:

  • Вбудований — вбудовується всередину будь-якого існуючого елемента на сайті.
  • Pop-up — з'являється поверх інших елементів, відтіняючи їх фоном. Не дозволить працювати з сайтом, поки відкрито.
  • Плаваюче вікно — з'являється поверх інших елементів у нижньому куті або на всю ширину екрану. Не заважає взаємодіяти з сайтом.
  • Плаваюча панель — з'являється поверх інших елементів у нижній частині екрана або всю його ширину. Не заважає взаємодіяти із сайтом.

Типи віджетів

1.3. Для форм підписки активуйте поля контакта.

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

Вибір контактних полів

2. Вкладка “Стилі сайту” (у кнопок виклику відсутня)

2.1. Щоб створити віджет у стилі вашого сайту, виберіть кольори та стиль. Система генерує віджет на основі ваших налаштувань.

Стилі сайту

2.2. Натисніть "Далі".

3. Вкладка “Оберіть зовнішній вигляд”

Виберіть найвідповідніший віджет. Після цього його можна доопрацювати на свій смак.

Оберіть зовнішній вигляд

Редактор віджетів

Розглянемо інструменти для налаштування стилю та елементів віджета.

Базові дії

Структура віджета має 3 рівні:

  1. Стан.
  2. Контейнер (у деяких типів віджетів).
  3. Елемент.

Структура віджета

При натисканні правої кнопки миші на елементі віджету стають доступними такі основні дії:

Основні дії

Копіювати.

Дублювати.

  1. Вирізати.
  2. Дублювати.
  3. Вирізати.
  4. Видалити.
  5. Поставити за всіма плаваючими зображеннями.
  6. Поставити перед всіма плаваючими зображеннями.
  7. До контейнера.

Верхня панель

У меню верхньої панелі розташовані такі кнопки:

Верхня панель

1. Скасувати/Повторити.

2. Налаштування мультимовності:

  • Зовнішній вигляд віджета налаштовується лише для версії з мовою за промовчанням. Потім він автоматично застосовується до інших мовних версій.
  • В інших мовних версіях можна змінити лише текст.
  • Форма відображається мовою сайту, яка визначається значенням атрибуту lang у html-тегу. Якщо код сторінки не містить його, мовна версія буде відповідати мові браузера користувача.

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

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

5. Попередній перегляд віджета.

6. Закрити без збереження.

7. Зберегти.

Ліва панель

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

Ліва панель

Права панель

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

  • Вирівнювання елементів всередині,
  • Відстань між елементами,
  • Розмір,

Загальні налаштування

  • Фон,
  • Обведення,
  • Тінь,
  • Скруглення кутів,
  • Внутрішні відступи,
  • Зовнішні відступи,
  • Адаптивність.

Загальні налаштування

+ Налаштування кнопок виклику:

  • Дія по кліку,
  • Анімація появи,
  • Циклічна анімація.

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

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

Синхронізація параметрів

Редагування елементів віджета

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

Редагування елементів віджета

Налаштування тексту

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

Налаштування тексту

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

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

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

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

Завантаження картинок

Важливо

Завантажуйте зображення у форматах PNG, JPEG, SVG, GIF, до 3 МБ

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

  • Заповнення,
  • Підгонка,
  • За розміром зображення.

Налаштування картинок

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

Натисніть на елемент виджету, щоб з'явилася вкладка “Загальні” з такими параметрами:

  • Дія по кліку

Дія по кліку

  • Валідація полів контакта

Валідація полів контакта

  • Налаштування таймера

Налаштування таймера

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

1. Форма обмеження віку повністю перекриває екран, доки користувач не підтвердить свій вік, тому цей віджет не має налаштувань розміщення.

2. Місце розташування кнопки виклику настроюється у вікні редагування зовнішнього вигляду.

3. Щоб задати місце розташування форми підписки або інформера, вкажіть CSS-селектор елемента, до якого потрібно додати розміщення. Ця вкладка з'являється після того, як ви налаштували зовнішній вигляд віджета та натиснули кнопку “Зберегти”.

CSS-селектор

4. Виберіть, куди додати форму відносно знайденого елемента:

  • Перед елементом
  • Після елемента
  • Всередині елемента першою
  • Всередину елемента останньою
  • Замінити елемент

Куди додати форму

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

5. Натисніть "Готово". Спочатку форму буде видно тільки вам; на вкладці "Параметри" можна зробити її загальнодоступною.

Параметри

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

  1. Редагувати зовнішній вигляд віджета.
  2. Налаштувати умови виклику віджета.
  3. Редагувати розміщення форми чи інформера.
  4. Налаштувати дії після того, як користувач підписався або натиснув кнопку виклику.

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

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

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

Доступні налаштування:

  • Частота показу

Частота показу

  • Коли (припинити) показувати

  • Кому

Кому

  • На сторінках

На сторінках

За аналогією з побудовою умовних груп можна вказати сторінки, на яких (не) потрібно відображати віджет.

  • У країнах

У країнах

  • По кліку на HTML-елемент

По кліку на HTML-елемент

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

Показ через API

Важливо

При керуванні віджетом за допомогою API, керування через інші умови недоступне

Дії після підписки

1. Виберіть сегменти, до яких потрібно додати контакти.

Виберіть сегменти

2. Налаштуйте підтвердження підписки електронною поштою. Докладніше про подвійну підписку >

Налаштуйте підтвердження підписки

3. Виберіть лист-підтвердження підписки.

Виберіть лист-підтвердження підписки

Ви можете використовувати лист за замовчуванням, якщо у вас немає готового повідомлення. Якщо ви його підготували, натисніть кнопку “Замінити” і виберіть його.

4. Виберіть, куди перенаправити користувача після натискання на посилання підтвердження.

Куди перенаправити користувача

5. Активуйте онбординг.

Активуйте онбординг

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

Публікація віджета

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

Тестувати віджет

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

Відкрити

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

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

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

Публікація

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

Інтеграції

На вкладці “Інтеграції” можна настроїти надсилання дій у віджеті та кастомних подій у Google Analytics. Зверніть увагу, що інтеграція сумісна лише зі скриптом Universal Analytics, встановленим на сайті.

Google Analytics

Дізнайтеся більше про експорт даних у Google Analytics >

Аналітика

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

Натисніть на назву віджета

 

Статуси віджета відображаються у загальному списку та деталях віджету:

  • Опубліковано — для опублікованих віджетів із поточним або незапланованим періодом показу
  • Неопублікований
  • Запланована – період публікації запланований на майбутнє
  • Час вийшов - термін публікації минув

 

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

Статистика

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