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

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

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

Докладніше про отримання та встановлення скрипта веб-трекінгу

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

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

Для персоналізації віджетів використовуйте динамічні теги або налаштуйте автозаповнення полів форми даними з 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. Скасувати/Повторити.
3. Налаштування мультимовності:

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

4. Попередній перегляд віджета.
5. Закрити без збереження.
6. Зберегти.

Ліва панель

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

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

Права панель

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

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

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

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

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

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

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

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

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

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

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

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

1. Перейдіть до мобільної версії.
2. Виберіть текстовий елемент.

3. Змініть потрібні параметри, наприклад розмір шрифту або колір тексту.

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

Щоб повернути для змінених параметрів налаштування десктопної версії, натисніть Скинути. Ці параметри знову синхронізуватимуться з десктопною версією.

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

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

• За замовчуванням у віджеті використовується основний шрифт вашого сайту.
• Якщо автоматичне визначення не підхопило потрібний шрифт, встановіть його вручну: натисніть правою кнопкою миші на текст на своєму сайті та виберіть Inspect (Переглянути код), щоб відкрити інструменти розробника браузера, відфільтруйте панель Styles за font-family, скопіюйте значення активного (не перекресленого) правила та вставте його у поле Title font або Text font віджета. Вставлене значення застосується до всього тексту віджета, що використовує відповідний параметр шрифту.
• Віджет завантажує лише ті шрифти Google Fonts, які фактично використовуються в контенті віджета — шрифти, призначені невикористаним стилям чи класам, не завантажуються.
• Елемент Text roller анімує прокручування тексту, допомагаючи привернути увагу та показати більше інформації в компактному форматі.
• Merge tag використовується для персоналізації тексту віджета даними із сайту.

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

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

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

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

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

Ви можете редагувати зображення безпосередньо у редакторі при завантаженні (якщо воно не відповідає вимогам) або вже після завантаження (кнопка Редагувати). Після редагування зображення зберігається у форматі PNG.

Для Інформера з індивідуальним дизайном на основі повноекранного фонового зображення широке десктопне зображення може обрізатися або погано читатися після адаптації під мобільні пристрої. Щоб використати інше зображення для мобільної версії, перейдіть у мобільний режим перегляду на верхній панелі, натисніть на значок замка біля налаштування Фон, виберіть Не синхронізувати та завантажте окреме зображення — десктопна і мобільна версії тоді використовуватимуть різні зображення незалежно одна від одної. Квадратні або вертикальні зображення зазвичай найкраще адаптуються під обидва формати екрана.

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

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

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

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

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

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

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

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

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

Кнопку закриття не можна повністю приховати у стандартних віджетах — це зроблено навмисно, щоб відвідувачі завжди мали змогу закрити віджет.

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

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

• Дія по кліку

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

Перехід між сторінками віджета

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

Назва дії показує роль кнопки в цьому шляху: на проміжних сторінках це Наступна сторінка, а на кроці, де дані форми справді надсилаються, — Надіслати форму.

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

Налаштування кліків як цільових дій

В Інформері для дії за кліком Відкрити URL можна ввімкнути опцію Вважати цільовою дією. Вона визначає, які кліки враховуються під час розрахунку конверсії:

• якщо опцію не ввімкнено для жодної дії — усі відстежені кліки;
• якщо опцію ввімкнено хоча б для однієї дії — лише кліки за такими діями.

Наприклад, якщо очікуваною дією є перехід за кнопкою За покупками, увімкніть для неї цю опцію.

У Формах підписки система автоматично вважає цільовою дією відправлення форми.

Результати відображаються у Звіті зі взаємодії з віджетами.

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

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

Для полів Email, Телефон, Ім'я, Прізвище і текстових полів можна ввімкнути автозаповнення. Значення може надходити з таких джерел:

• Статичне поле — фіксоване значення з налаштувань поля, однакове для всіх відвідувачів;
• URL query параметр;
• JavaScript variable;
• Local storage;
• Cookie;
• Data layer event.

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

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

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

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

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

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

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

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

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

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

В ігровому віджеті сторінка результату може залежати від виграного призу: наприклад, знижка відкриває сторінку з промокодом, а подарунок — сторінку з умовами отримання. Для кожного призу виберіть сторінку в його налаштуваннях. Доступні лише сторінки після ігрової; за замовчуванням відкривається наступна за порядком. Докладніше читайте у розділі Сторінка після виграшу.

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

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

• Багатокрокові форми доступні в усіх типах віджетів, крім кнопок виклику.
• Віджет може містити лише один ігровий компонент.
• Поля Email, Телефон, Ім'я та Прізвище можна додавати на різних сторінках віджета, але не двічі на одній сторінці: такий віджет редактор не дасть опублікувати. Наприклад, у NPS-опитуванні промоутери, нейтральні користувачі й критики бачать різні сторінки, і поле Email потрібне на кожній із них.
• Для кожного поля контакту зберігається одне значення: якщо поле заповнили кілька разів, зберігається останнє непорожнє, а порожнє поле не затирає вже введене.
• Поля на гілках, якими відвідувач не пішов, не заважають надіслати форму.
• Для форми підписки або форми запиту типу Попап чи Плаваюче вікно під час першого збереження система запропонує додати сторінку Тизер, якщо її ще немає. Ви можете додати тизер одразу або зберегти віджет без нього.
• Остання сторінка багатокрокового віджета — системна Успішна підписка: у віджеті, який просить пошту, потім телефон, а тоді пропонує посилання, ці пропозиції розміщують на сторінці Успішна підписка.
• Максимальна кількість сторінок — 20.
• Часткове збирання даних із покинутих форм поки недоступне — функція очікує доопрацювання на бекенді. Через це умову «користувач заповнив хоча б одне поле» не можна вважати надійною ознакою відправлення форми.

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

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

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

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

Можна вставити до десяти вбудованих форм на одну сторінку, що особливо корисно для довгих статей чи лендінгів.

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

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

Параметри

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

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

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

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

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

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

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

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

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

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

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

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

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

Інтеграції

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

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

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

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

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