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

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

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

Выберите тип виджета в меню слева или в раскрывающемся списке.

Внешний вид

Начните создание виджета с базовых настроек.

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. Сохранить.

Левая панель

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

Правая панель

Когда ни один элемент виджета не выделен, в правой части экрана видны общие настройки виджета:

• Выравнивание элементов внутри,

• Расстояние между элементами,

• Размер,

• Фон,

• Обводка,

• Тень,

• Скругление углов,

• Внутренние отступы,

• Внешние отступы,

• Адаптивность.

+ Настройки кнопок вызова: 

• Действие по клику,

• Позиционирование,

• Анимация появления,

• Цикличная анимация.

Редактирование элементов виджета

Чтобы перейти к редактированию отдельного элемента, нажмите на него левой кнопкой мыши.

Настройки текста

Чтобы изменить настройки текста, нажмите элемент виджета с текстом, после чего откроются панели.

 1. Панель параметров стиля текста — в верхней части редактора.

2. Панель расположения текста и изменение фона текста в контейнере — в правой части редактора, с такими параметрами:

• Размер (по ширине контейнера и высоте содержимого),

• Фон,

• Внутренние отступы,

• Наружные отступы.

Настройки изображения

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

Помимо стандартных настроек, для изображений также доступна настройка позиционирования:

• Заполнение,

• Подгонка,

• По размеру изображения.

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

Перетащите слайдер из левой панели в шаблон виджета. На правой боковой панели появятся кнопки “Настройка слайдера” и “Управление слайдами”.

• Настройте кнопки навигации, индикацию, анимацию показа слайдов и общий дизайн слайдера в окне настройки слайдера.

• Управляйте порядком отображения, добавляйте, дублируйте или переименовывайте слайды в окне “Управление слайдами”.

Также вы можете добавить слайд, нажав на значок +.

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

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

Вкладка “Общие”

Нажмите на элемент виджета, чтобы появилась вкладка “Общие” с такими настройками:

• Действие по клику 

• Валидация полей контакта

• Настройки таймера

• Настройки видео

Создание многошаговых виджетов

Многошаговые виджеты используются для повышения удобства и эффективности процесса подписки на сайте. Их основные цели:

1. Повышение конверсии: Разделение большого количества полей на несколько шагов делает процесс менее утомительным для пользователя.
2. Улучшение пользовательского опыта: Постепенное предоставление информации кажется менее сложным, чем заполнение длинной формы на одной странице.

Чтобы добавить страницу в виджет, можно использовать кнопки 

• “Добавить” — чтобы дублировать текущую страницу,
• Три точки на дополнительной странице, чтобы дублировать ее (здесь же можно переместить страницу влева или вправо, а также удалить ее).

Место размещения

1. Форма ограничения возраста полностью перекрывает экран, пока пользователь не подтвердит свой возраст, поэтому у этого виджета нет настроек размещения.

2. Место размещения кнопки вызова настраивается в окне редактирования внешнего вида.

3. Чтобы задать место размещения формы подписки или информера, укажите CSS-селектор элемента, к которому вы хотите добавить размещение. Эта вкладка появляется после того, как вы настроили внешний вид виджета и нажали кнопку “Сохранить”.

4. Выберите, куда добавить виджет относительно найденного элемента:

• Перед элементом

• После элемента

• Внутрь элемента первой

• Внутрь элемента последней

• Заменить элемент

 Если вы не готовы указать место размещения виджета, активируйте переключатель “Указать место размещения позже”.

5. Нажмите “Готово”. Изначально форма будет видна только вам; на вкладке “Параметры” можно сделать ее общедоступной.

6. При необходимости добавьте дополнительные места размещения.

Параметры

На вкладке “Параметры” вы можете:

1. Редактировать внешний вид виджета.

2. Редактировать размещение формы или информера.

3. Настроить условия вызова виджета.

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

5. Активировавть или деактивировать расчет дохода от виджета (настройки описаны в инструкции).

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

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

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

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

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

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

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

Расписание включает следующие настройки:

• Даты начала и окончания
• Разрешенные дни и время
• Часовой пояс пользователя

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

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

Интеграции

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

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