Настройка виджетов для сайта

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

Типы виджетов

Мы предоставляем 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. Настроить действия после того, как пользователь подписался или нажал на кнопку вызова.

Вызов виджета

Чтобы задать правила отображения виджета, нажмите на кнопку редактирования в соответствующем разделе вкладки “Параметры”:

Доступные настройки:

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

• Когда показывать

• Кому

• На страницах

По аналогии с построением условных групп, можно указать страницы, на которых (не) нужно отображать виджет.

• В странах

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

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

Действия после подписки

Вы можете использовать письмо, заданное по умолчанию, если у вас нет готового сообщения. Если же вы его подготовили, нажмите кнопку «Заменить» и выберите его.

1. Выберите сегменты, в которые нужно добавить контакты.

2. Настройте подтверждение подписки по email. Подробнее о двойной подписке >

3. Выберите письмо-подтверждение подписки.

Вы можете использовать письмо, заданное по умолчанию, если у вас нет готового сообщения. Если же вы его подготовили, нажмите кнопку «Заменить» и выберите его.

4. Выберите, куда перенаправить пользователя после того, как он нажмет на ссылку подтверждения.

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

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

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

1. Сохранив все настройки, проверьте, как посетители увидят виджет на сайте. Для этого нажмите на кнопку “Тестировать виджет”.

2. Введите ссылку на ваш сайт и нажмите “Открыть”.

3. Если настройка корректна, виджет будет отображаться на вашем сайте в соответствии с заданными условиями.

4. После тестирования формы опубликуйте ее, нажав кнопку “Опубликовано”, затем нажмите “Сохранить”.

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

Интеграции

На вкладке “Интеграции” вы можете настроить отправку действий в виджете и кастомных событий в Google Analytics. Обратите внимание, что интеграция совместима только со скриптом Universal Analytics, установленным на сайте.

Узнайте больше об экспорте данных в Google Analytics >

Аналитика

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

Статусы виджета отображаются в общем списке и в деталях виджета:

• Опубликовано — для опубликованных виджетов с текущим или незапланированным периодом показа
• Неопубликованный
• Запланированная - период публикации запланирован на будущее
• Время истекло - срок публикации истек

Статистика, такая как просмотры, подписки и конверсия, обновляется раз в минуту. Информация представлена в виде графиков, чтобы легче отслеживать эффективность виджета за определенный период.