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

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

Вы можете добавить форму сами. Для этого заходите в кампании и выбирайте нужную (можно создать отдельную кампанию для поп-апов).

Затем нажмите “Добавить” - “Поп-ап”.

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

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

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

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

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

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

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

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

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

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

Таргетинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь можно:

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

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

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

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

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

По всем возникающим вопросам пишите в чат поддержки.