Как создать попап

Как добавлять формы в сервис Mindbox

Перейдите в раздел Кампании -> Список кампаний:

Нажмите на «Создать кампанию» -> «Попап»:

Выберите папку и нажмите «Создать»:

Выбор шаблона

Затем выбираем шаблон в зависимости от механики. С какой целью всплывает поп-ап?

• Собрать email;
• Показать баннер;
• Собрать телефоны;
• Пригласить в соц.сети;
• Провести опрос.

Параметры шаблона формы (текст, расположение, размеры) маркетолог может сам заполнять визуально в админке Mindbox. Об этом расскажем дальше. Подробнее о механиках и деталях настройки поп-апа под каждую механику вы можете прочитать в статьях о механиках.

После выбора шаблона укажите сайт:

Редактирование шаблона

В разделе "Попап" нажмите "Изменить", затем - "Редактировать":

Так выглядит окно редактирования шаблона:

Здесь можно:

1. Редактировать расположение поп-апа на сайте;
2. Проверить как поп-ап будет выглядеть на сайте;
3. Увидеть как поп-ап будет отображаться на разных устройствах;
4. Настроить цвет фона, иконок, размеры рамки и полей ввода и все остальное для поп-апа. Для каждой выбранной формы это поле позволяет настроить свои параметры такие как таймер, политика конфиденциальности, шрифты;

6. Выполнить настройку поп-апа в HTML-коде;
7. Скрыть поле “Настройки”, чтобы увидеть форму в целиком;
8. Сохранить настройки для формы;
9. Настроить главный экран и экран после выполнения клиентом требуемого действия;
10. Написать по вопросам работы редактора в чат поддержки Mindbox;
11. Протестировать форму на сайте.

Таргетинг

По фильтру выберите кому и при каких условиях показывать поп-ап. Можно заранее настроить сегмент клиентов в Mindbox и выводить или не выводить форму для этих клиентов.

Общие настройки

Далее переходим в “Общие настройки”. Здесь указываем:

• Сайт;
• Дни недели для показа формы;
• Частоту всплывания;
• Является ли форма приоритетной.

Условие всплывания

Далее указываем условия всплывания формы:

• уходит ли клиент со страницы,
• при проведении какого времени на странице,
• по количеству посещенных страниц,
• при определенном действии на сайте.

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

• Создать нового клиента

  • Тип данных - в какое поле клиента в Mindbox вписываем данные;
  • Поле формы - откуда из формы забираем данные для записи;
  • Управление подписками - подписываем на канал и тематику.

• Редактировать существующего

  • Тип данных - в какое поле вписываем данные. Редактировать можно пол, зону и публичные дополнительные поля.
  • поле формы - откуда из формы забираем данные для записи.

Дополнительные настройки

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

• Передавать события в Google Analytics при просмотре, заполнении и клике в форме
  Для настройки интеграции с GA следуйте инструкции.

• Webhook
  Настраиваем вызов вебхука:

  • ключ дополнительного поля - переменная для передачи данных;
  • значение дополнительного поля - значение, полученное из формы. Описания полей формы можно найти выше в разделе создания/редактирования клиента и в разделе “Дополнительные поля” при редактировании внешнего вида формы.

• Вызывать пользовательский JS
  Вставляем код, который должен отрабатывать при отрисовке, показе или закрытии формы или выполнении целевого действия.

И дополнительные настройки:

• Передавать события в Google Analytics при просмотре, заполнении и клике в форме
• Webhook
• Вызывать пользовательский JS

Как протестировать форму на сайте

Нажимаем “Проверить на сайте”. Вставляем ссылку на сайт и переходим по ссылке:

И ее можно будет увидеть на своем сайте:

Чтобы клонировать попап, нажимаем на соответствующую кнопку:

Клонировать можно и в другие кампании.

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