Настройка pop-up виджета для вашего сайта

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

Email

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

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

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

Pop-up – это виджет для сбора контактной информации, который всплывает поверх окна сайта.

Вы можете поместить этот виджет где угодно на вашем сайте без изменения кода.

Важно

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

Получить скрипт

Создание pop-up формы для сайта

Тип формы

  1. Перейдите на “Сайт” – “Виджеты” и нажмите кнопку “Создать форму подписки”.
    Создать новую форму
  2. Выберите тип: Pop-up.
  3. Введите название виджета. Обратите внимание, что название используется для поиска в системе; посетители не увидят его на вашем сайте.
  4. Выберите поля контакта, которые нужно собрать: email, номер телефона и/или имя.
    Название и нужные поля
  5. После завершения настройки нажмите кнопку “Далее”.

Внешний вид формы

  1. Чтобы задать цвета для главного заголовка, фона и кнопки, нажмите на соответствующий элемент и выберите его цвет.
    Цвет элемента
  2. Чтобы выбрать стиль формы, нажмите на шаблон, который вам нравится. Всего доступно пять стилей: классический, минимализм, мягкий, декоративный и современный. Затем нажмите “Далее”.
    Стиль
  3. Выберите наиболее подходящий вид формы. Вы сможете редактировать его позже:

Вариант 1

Вариант 1

Вариант 2

Вариант 2

Вариант 3

Вариант 3

Вариант 4

Вариант 4

Нажмите “Далее”.

Контент формы

Редактируйте контент для всех состояний формы:

  • Форма подписки – видит новый пользователь;
  • Успешная подписка – пользователь успешно подтвердил запрос;
  • Повторная подписка – пользователь повторно подтвердил запрос;
  • Ошибка – возникла ошибка.

Левая панель настроек

Слева расположены элементы структуры формы для перетаскивания в форму.

Элементы для перетаскивания

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

Инструменты для редактирования

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

Справа расположены три вкладки с настройками: “Оформление”, “Контент”, “Общие”.

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

Вкладка “Оформление”

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

Иконка “Закрыть”
  1. Установите позиционирование иконки “Закрыть” для десктопа и мобильной версии:
    Позиционирование
  2. Выберите готовое изображение для иконки “Закрыть” или загрузите собственное:
    Изображение
Стиль текста

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

Чтобы использовать другой шрифт для веб-сайта, введите его название.

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

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

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

Вкладка “Контент”

Попап может состоять из таких уровней:

  • структура
  • контейнер (для некоторых видов виджетов)
  • элемент

Структура

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

Важно

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

По умолчанию для параметров поля ввода, таких как “Фон”, “Тень” и “Обводка”, установлено значение “Для всех”. Это означает, что они остаются неизменными при ошибке. Если вы хотите, чтобы они менялись при ошибке, в раскрывающемся списке выберите “Не синхронизировать”.

Вы можете изменить расположение элементов, перетаскивая их. Отредактируйте поля, отступы и скругление углов справа:

Настройка

На уровне структуры и контейнера можно изменить выравнивание полей: с вертикального на горизонтальное и наоборот:

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

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

Перейти к родительскому элементу

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

Код страныПопап имеет встроенную валидацию. Если формат введенных данных неверен, автоматически будет отображен текст ошибки. Вы можете выбрать обязательные поля. При попытке отправить форму с пустым обязательным полем пользователь увидит текст ошибки.

Все ошибки отображаются на одном из языков: английском, русском, украинском. Браузер контакта определяет язык текста.

Валидация

Вы можете установить изображение в качестве фона структуры, контейнеров или элементов (например, кнопок).

Изображение в качестве фона

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

Во вкладке “Общие” выберите действие по клику.

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

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

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

  1. Стрелки “Назад” и “Вперед” позволяют отменить или повторить внесенные изменения.
  2. Настройки мультиязычности:
    • настройки внешнего вида виджета выполняются только для основного языка, откуда они автоматически копируются для всех других языковых версий;
    • в языковых версиях изменить можно только текст;
    • виджет отображается на языке сайта, который определяется значением атрибута lang в теге HTML; если его нет, то по языку браузера.
  3. Цвет фона лаунчера поможет вам проверить, как кнопка будет выглядеть на реальном фоне.
  4. Кнопки для переключения на мобильную и десктопную версию виджета.
  5. Предпросмотр виджета.
  6. Закрыть без сохранения.
  7. Сохранить.

Вкладка “Параметры”

Вы будете автоматически перенаправлены к настройкам после сохранения виджета. Позже вы можете найти их во вкладке “Сайт” – “Виджеты” – определенный виджет – “Параметры”.

Вкладка параметров

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

Выберите параметры вызова виджета на соответствующей панели: по правилам или по клику на кнопку вызова.

Параметры вызова

Вызов по правилам

Для настройки попапа по правилам нажмите кнопку “Редактировать”.

Редактировать правила

Настройте:

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

Вызов по клику на кнопку

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

По клику на кнопку

Действия после заполнения формы

  1. Выберите группу, куда будут сохраняться контакты после заполнения формы:
    Сохранять контактыВы можете добавить только новые или все контакты:
    Добавить только новые
  2. Настройте подтверждение подписки с помощью email. Подробнее о Double Opt-In>>
    Подтверждение подписки
  3. Выберите письмо-подтверждение.
    Выбор письмаЕсли у вас нет готового сообщения, вы можете использовать емейл по умолчанию. Если оно у вас уже есть, нажмите кнопку “Заменить”, чтобы выбрать нужное.
  4. Выберите, куда перенаправить пользователя после клика на ссылку подтверждения.
    Перенаправить после кликаВы можете перенаправить на страницу благодарности по умолчанию или конкретную страницу на вашем сайте.
  5. Повысить вовлеченность.
    Повысить вовлеченность

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

Публикация pop-up формы

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

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

Введите ссылку на свой сайт и нажмите кнопку “Открыть”:

Открыть

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

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

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

Опубликовано

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

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

Расписание

Статистика формы

Перейдите на вкладку “Сайт” – “Виджеты”, выберите нужный виджет, откройте вкладку “Статистика”, чтобы увидеть показатели:

  • просмотров
  • подписок
  • конверсии

“Динамика активности” отображает те же показатели на графике. При необходимости можно фильтровать даные отчета по дате.

Статистика

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