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

Email

Омниканальность

Автоматизация

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

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

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

Мы предоставляем 4 типа виджетов:

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

Формы подписки

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

Информеры

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

Кнопки вызова

4. Ограничение возраста – виджет, который перекрывает основной контент сайта до тех пор, пока посетитель не подтвердит свой возраст.

Ограничение возраста

Важно

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

Получение скрипта

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

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

Выбор типа виджета

Внешний вид

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

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

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

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

  3. Превью виджета.

  4. Закрыть без сохранения.

  5. Сохранить.

Левая панель

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

Базовые компоненты виджета на левой панели

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

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

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

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

  • Размер,

Базовые компоненты виджета на правой панели

  • Фон,

  • Обводка,

  • Тень,

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

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

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

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

Базовые компоненты виджета на правой панели

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

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

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

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

Обратите внимание

Настройки, отмеченные значком замка, синхронизируют параметры на разных страницах. Вы можете изменить настройку синхронизации, нажав на значок и выбрав нужную опцию.

Синхронизация параметров

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

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

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

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

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

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

Обратите внимание

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

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

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

Важно

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

Загрузка изображений для виджета

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

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

  • Подгонка,

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

Настройка позиционирования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расположение виджета относительно элемента

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

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

Параметры

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

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

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

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

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

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

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

Правила отображения виджета

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

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

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

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

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

  • Кому

Кому

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

На страницах

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

  • В странах

В странах

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

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

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

Показ через API

Важно

При управлении показом виджета с помощью API, управление через другие условия недоступно

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

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

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

Добавление контактов в сегменты

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

Настройка подтверждения подписки по email.

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

Выбор письма-подтверждения

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

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

Перенаправление пользователя после нажатия ссылки

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

Активация онбординга

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

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

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

Тестирование виджета

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

Открытие ссылки

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

Отображение виджета

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

Публикация и сохранение формы

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

Интеграции

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

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

Интеграция виджета

Аналитика

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

Аналитика виджета

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

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

 

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

Графическая статистика виджета

 

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email