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

Пользовательские данные

Email

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

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

Отслеживание событий и поведения

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

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

Важно

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

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

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

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

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

Внешний вид

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

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

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

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

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

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

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

Левая панель

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

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

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

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

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

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

  • Размер,

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

  • Фон,

  • Обводка,

  • Тень,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верхняя панель настройки текста

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

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

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

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

  • Фон,

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

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

Правая панель настройки текста

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

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

Важно

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

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

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

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

  • Подгонка,

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

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

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

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

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

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

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

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

Управление слайдами

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

Добавление слайда

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

Редактирование изображения

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

Переключение между изображениями

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

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

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

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

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

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

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

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

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

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

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

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

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

Многошаговый виджет

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

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

Добавление страницы

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

  • Многошаговые формы доступны во всех типах виджетов кроме кнопок вызова.
  • Виджет может иметь только один игровой компонент.
  • Только один компонент виджета может записывать данные в одно поле контакта.
  • Максимальное количество страниц — 20.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить место размещения

Параметры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расписание показа

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

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

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

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

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

Интеграции

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

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

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

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