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

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

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

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

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

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

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

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

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

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

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

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

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

Ліва панель

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

Права панель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Дія по кліку

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

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

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

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

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

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

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

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

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

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

Параметри

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

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

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

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

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

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

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

• Після підписки

Ви можете не показувати віджет контактам, які вже оформили підписку.

Увімкніть перемикач Після підписки та виберіть один з наступних варіантів:

• З будь-якого віджету
• З цього віджету

Наша система визначає статус підписки контакту за ID контакту. Коли контакт заходить на ваш сайт, скрипт надсилає запит на перевірку статусу підписки. Цей запит включає ID контакту, який зберігається на сайті в результаті будь-якої з наступних подій:

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

Ви можете вибрати опцію «З будь-якого віджету» для загальних типів передплати, наприклад щотижневих дайджестів. При цьому, якщо контакт вже зареєструвався за допомогою будь-якого віджету або каналу, цей віджет не відображатиметься.

Якщо ви виберете «З цього віджету», віджет не відображатиметься лише в тому випадку, якщо контакт вже підписався з цього віджету.

• Кому

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

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

• У країнах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Інтеграції

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

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

Аналітика

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

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

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

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