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

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

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

Для персоналізації віджетів використовуйте динамічні теги або налаштуйте автозаповнення полів форми даними з полів контакту в eSputnik, URL query параметрів, змінних JavaScript, Local storage, cookie чи подій Data layer. У багатокрокових віджетах додавайте розгалуження, щоб спрямовувати користувачів на різні сторінки залежно від їхніх відповідей.

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

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

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

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

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

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

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

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. Зберегти.

Ліва панель

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

Гейміфіковані компоненти та NPS**/**Оцінка описані в окремих статтях.

Права панель

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

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

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

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

• Дія по кліку,
• Позиціонування,
• Анімація появи,
• Циклічна анімація.
• Z-індекс

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

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

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

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

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

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

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

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

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

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

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

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

• Керуйте порядком відображення, додавайте, дублюйте або перейменовуйте слайди у вікні Керування слайдами.

Також можна додати слайд, натиснувши на значок +.

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

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

Кнопка закриття

Натисніть на кнопку закриття віджета, щоб відкрити її налаштування на правій панелі: оберіть більш або менш помітний дизайн, задайте колір та прозорість іконки, налаштуйте її розмір (особливо корисно, щоб полегшити натискання на мобільних пристроях) та розмістіть її всередині, по центру або зовні межі віджета. Вкладка Custom дозволяє завантажити власну іконку закриття замість стандартної.

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

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

• Дія по кліку

• Підказки, валідація та автозаповнення полів контакту

Автозаповнення полів форми

Для полів Email, Phone, First Name, Last Name і текстових полів можна ввімкнути автозаповнення. Значення може надходити з таких джерел:

• Статичне поле — поле контакту в eSputnik, наприклад Email;
• URL query параметр;
• JavaScript variable;
• Local storage;
• Cookie;
• Data layer event.

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

Докладніше про джерела та налаштування див. у статті Підставлення даних із сайту у віджети.

• Налаштування відео

Створення багатокрокових віджетів

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

• квізи з різними результатами;
• прогресивні знижки;
• NPS-опитування з уточнювальними запитаннями;
• форми, у яких наступне запитання, промокод або заклик до дії залежить від попередньої відповіді.

Щоб додати сторінку до віджета, використовуйте:

• Додати — щоб створити сторінку на основі наявної;
• меню Три крапки на додатковій сторінці — щоб дублювати, перемістити або видалити її.

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

За допомогою розгалужень можна відкривати різні сторінки віджета залежно від відповіді користувача.

1. Додайте всі сторінки, які можуть бути показані в межах сценарію.
2. Виберіть компонент, відповідь у якому визначатиме наступний крок.
3. Для кожного варіанта відповіді вкажіть сторінку, яка має відкритися далі.
4. Налаштуйте вміст кінцевих сторінок.
5. Перевірте кожну гілку в режимі попереднього перегляду.

Наприклад, у NPS-опитуванні оцінка від 0 до 6 може відкривати сторінку із запитанням про причину негативної оцінки, а оцінка 9 або 10 — пропозицію залишити публічний відгук. Докладніше про налаштування оцінок читайте у статті Компоненти віджета NPS/Оцінка.

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

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

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

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

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

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

Параметри

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

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

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

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

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

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

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

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

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

Розклад включає наступні опції:

• Дати початку та закінчення
• Дозволені дні та час
• Часовий пояс користувача

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

• Опубліковані
• Неопубліковані
• Заплановані – період публікації запланований на майбутнє
• Завершені – термін публікації минув

Інтеграції

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

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

Подальші налаштування включають:

• Виклик віджета
• Дії після підписки