Как настроить попап-форму. Настройка и отправка попапов в enKod

В этой статье мы расскажем о настройке попап-форм в модуле enPop — она производится в разделе Окна.

Здесь находятся все всплывающие окна, которые у вас есть. Их можно просмотреть по статусу активности. Активные — это те окна, которые сейчас показываются пользователям. Неактивные — те, которые вы создали, но пока не используете. Черновики нужны для экспериментов с дизайном и других тестовых попапов. Сплит-тесты — окна с тестированием в любом статусе, кроме черновика (подробнее про сплит-тест тут).

Здесь можно активировать/деактивировать, копировать или удалить окно, а также делать правки.

1. Нажмём на Новое окно, чтобы перейти к настройке попапа.2. На первом шаге нужно указать название окна и выбрать его тип.
[Собирающие модальные окна используются для лидогенерации — они содержат форму для захвата имейла или телефона. Информирующие позволят рассказать свежие новости, сообщить о новинках и акциях, просто пожелать хорошего дня.]

3. Далее выбираем шаблон PopUp и тип его расположения на странице. Вы можете создавать или добавлять свои собственные шаблоны. Также в enKod есть такое полезное решение, как возможность кастомной вёрстки попапов.

4. На шаге Внешний вид нужно настроить текст шаблона и кнопки. В случае с собирающим попапом указываем, какое действие следует сделать после того, как пользователь оставит свои данные в форме. Это могут быть закрытие окна, переход по ссылке или открытие спасибо-страницы.

[В enPop можно сделать дополнительный попап, который отблагодарит вашего подписчика и укажет ему верный путь. К примеру, даст подсказку проверить почту. Эта «спасибо-страница» будет в том же стиле, что и основное окно.]

Дополнительно необходимо настроить элементы:

• Основные поля — для сбора емейла, телефона или имени
• Дополнительные поля (доступны не для всех шаблонов) — укажите тип поля и выберите, куда записать собранную информацию
• Фон и цветовая схема (уникальная для каждого шаблона)

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

5. На шаге Настройки показа укажите следующее:

• Показывать в поп-апе ссылку на политику обработки персональных данных — согласно Федеральному закону №152-ФЗ «О персональных данных» вы должны рассказать подписчику о цели сбора, обработки, хранения, учёта его персональных данных до начала их сбора. Как добавить ссылку, можно узнать в настройках аккаунта.
• Закрывать окно по клику по внешней области. Если не отметить этот пункт, то закрыть окно можно будет только при нажатии крестика.
• Скрывать окно при неактивности в течение заданного времени — если всплывающее окно игнорируется подписчиком при появлении, оно может остаться до закрытия или исчезнуть через какое-то время (от 5 до 60 секунд).

6. Предпоследний шаг — настройка условий показа уведомлений Pop Up. Здесь можно сделать выбор сегментов, которым система откроет окно, а также присвоить попапу группы рассылок, на которые необходимо подписать пользователя.

7. На последнем этапе при создании попапа будет показано превью формы. Здесь можно проверить корректность заполнения предыдущих шагов.

Несколько правил HTML-вёрстки страниц с PopUp в enKod

• Обратите внимание: если вы подключаете модуль поп-апов впервые, в код HTML перед закрывающим тегом body необходимо добавить соответствующий скрипт. 
• В начале CSS файла нужно обнулить все стили, которые могут подтянуться из настроек сайта: #enpop * {all: initial !important}
• Ещё один важный момент в HTML — установка метода ekEvents.push(‘pageOpen’). Он позволяет отслеживать заходы пользователей и сегментировать их. Поэтому используется вместе с методом ekEvents.push(‘subscribe’).
• Заголовок и текст всплывающего уведомления в вёрстке HTML прописываются в тегах div с атрибутом class. Выглядит это так:

<div class=“popup__title–enpop enpop_title”>Новости недели</div>

<div class=“popup__text–enpop enpop_text”>Оставьте имейл и мы вам напишем</div>

• Для самого первого контейнера необходимо выбрать класс .container–enpop. У него же прописываем «enpop» в качестве div id. 
• Для правильной настройки попапа не обойтись без ролей — их нужно прописать с помощью атрибута data-role. Это overlay (блок фона), close (кнопка закрытия всплывающего окна) и другие.

Строка кода с закрывающей кнопкой (close button) будет иметь такой вид:

<input class=“popup__close-button–enpop” type=“button” data-role=“close” />

• Для стилизации используются позиционные темы «position» (top, bottom, left, right и др.) и цветовые темы «color». Код может выглядеть так:
  enpop_position_top-left
  enpop_color_1
• Помните, что попап всегда подразумевает соглашение на обработку персональных данных. Чтобы включить в конфигурационный файл ссылку на него, добавьте модификационный класс enpop_accept. Контейнер с ПД скрывается (задаём свойству display значение none).

В конфигурационном JSON-файле ссылка на ПД прописывается как href. А show определяет, показывать ли элемент по умолчанию.