Эта инструкция поможет вам сверстать всплывающее окно (поп-ап), CSS-стили которого не будет искажать или конфликтовать со стилями вашего сайта. Вы сможете управлять настройками всплывающего окна в интерфейсе сервиса в разделе «Поп-апы».

В сервисе доступны три типа всплывающих окон:

• fullscreen – по центру экрана;
• line – полоса снизу или сверху экрана;
• small – маленькое угловое окно.

И 2 категории:

• collecting – собирающие
• informing – информирующие

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

Оставляя емейл (и другие пользовательские данные) в поле всплывающего окна, пользователь подписывается на рассылку. После подписки он видит «спасибо-страницу» с подтверждением успешной подписки.

Класс .enpop_thanks-window, который необходимо добавить в родительский блок с id #enpop, отвечает за механику показа «спасибо-страницы». При добавлении одного класса меняется поведение остальных элементов.

Дополнительный (необязательный) класс marketing-consent–enpop, отвечает за механику подписки на группу рассылок. С помощью этого класса с использованием name marketingConsent можно добавить чекбокс “Согласия на рекламную рассылку”. Если пользователь не прожмет его - он не будет подписан на группы рассылок собирающего поп-апа, но будет добавлен в платформу enKod.

Предназначены для оповещения пользователя о той или иной услуге/акции и т. д. «Спасибо-страницы» для такого всплывающего окна не используют.

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

• fullscren_collecting
• line_collecting
• small_collecting
• fullscren_info
• line_info
• small_info

<div id="enpop" class="container--enpop enpop_color_1 enpop_position_bottom-right">
    <form class="popup--enpop" data-role="body">
        <input class="popup__close-button--enpop" type="button" data-role="close" />
        <div class="popup__title--enpop enpop_title">Новости недели</div>
        <div class="popup__text--enpop enpop_text">Оставьте емейл и мы вам напишем</div>
        <div class="popup__inputs-container--enpop">
            <input class="inputs-container__input--enpop" name="firstName" type="text" 
            placeholder="имя">
            <input class="inputs-container__input--enpop" name="email" type="email" 
            placeholder="емейл">
            <input class="inputs-container__input--enpop" name="phone" type="tel" 
            placeholder="телефон">
            <input class="inputs-container__submit--enpop enpop_submit" type="submit" 
            value="Подписаться">
        </div>
        <div class="popup__accept-container--enpop">
            <p class="accept-container__text--enpop">Нажимая на кнопку, вы соглашаетесь
            <a class="accept-container__link--enpop enpop_accept">с ссылкой</a></p>
        </div>
    </form>
</div>

Пример верстки для чекбокса согласия на рекламную рассылку

<div class="marketing-consent marketing-consent--enpop">
            <input type="checkbox" name="marketingConsent" class="marketing-consent__checkbox" />
            <label class="marketing-consent__label">
                Согласен на получение рекламной рассылки
            </label>
</div>

Пример структуры всплывающего окна с чекбоксом согласия на рекламную рассылку

<div
    id="enpop"
    class="container--enpop enpop_color_1 enpop_position_bottom-right"
>
    <form class="popup--enpop" data-role="body">
        <input class="popup__close-button--enpop" type="button" data-role="close" />
        <div class="popup__title--enpop enpop_title">Новости недели</div>
        <div class="popup__text--enpop enpop_text">
            Оставьте емейл и мы вам напишем
        </div>
        <div class="popup__inputs-container--enpop">
            <input
                class="inputs-container__input--enpop"
                name="firstName"
                type="text"
                placeholder="имя"
            />
            <input
                class="inputs-container__input--enpop"
                name="email"
                type="email"
                placeholder="емейл"
            />
            <input
                class="inputs-container__input--enpop"
                name="phone"
                type="tel"
                placeholder="телефон"
            />
            <input
                class="inputs-container__submit--enpop enpop_submit"
                type="submit"
                value="Подписаться"
            />
        </div>

        <div class="popup__accept-container--enpop">
            <p class="accept-container__text--enpop">
                Нажимая на кнопку, вы соглашаетесь
                <a class="accept-container__link--enpop enpop_accept">с ссылкой</a>
            </p>
        </div>

        <!-- Согласие на получение рекламной рассылки -->
        <div class="marketing-consent marketing-consent--enpop">
            <input
                class="marketing-consent__checkbox"
                type="checkbox"
                name="marketingConsent"
            />
            <label class="marketing-consent__label">
                Согласен на получение рекламной рассылки
            </label>
        </div>

    </form>
</div>

Обязательные:

1. Наличие спасибо-страницы (только для собирающего окна!)
2. Наличие крестика для закрытия окна
3. На все стили поставьте !important
4. В начале CSS файла обнулите все стили, которые могут просочиться: #enpop * {all: initial !important}
5. Всем классам поставьте модификатор –enpop для уникальности стилей
6. Класс первого контейнера у всех всплывающих окон .container–enpop. Все темы с цветом, позиционированием и др. необходимо применять к нему
7. У класса .container–enpop поставьте id #enpop и все стили пропишите через него
8. Не забывайте разницу между #enpop.container–enpop и #enpop .container–enpop
9. Для правильной работы всплывающего окна необходимо добавить роли:
   • data-role='overlay' — блок фона (если есть)
   • data-role='body' — тело всплывающего окна
   • data-role='close' — кнопка закрытия всплывающего окна
   • name='firstName' type='text' — инпут с именем
   • name='lastName' type='text' — инпут с фамилией
   • name='email' type='email' — инпут с емейлом
   • name='phone' type='tel' — инпут с телефоном
   • type='submit' — кнопка отправки формы
10. Добавьте модификационные классы к изменяемым значениям у всплывающего окна для идентичности конфигурационного файла:
    • enpop_title — текст заголовка
    • enpop_text — основной текст
    • enpop_submit — кнопка подписаться
    • enpop_accept — ссылка на соглашение на обработку ПД
    • enpop_accept_container — если есть чекбокс, оборачиваем контейнер с ПД и чекбоксом
11. Ссылку на ПДн стилизуйте, обращаясь к .enpop_accept a (или к другому классу контейнера ПДн), то есть не создавая для этого класс
12. При верстке контейнера с ПД учитывайте, что он будет скрываться display:none, потому верхние отступы не задаются, чтобы при скрытии верстка не сломалась
13. Стандартные темы позиционирования для превью всплывающего окна в платформе:
    • enpop_position_bottom — для всплывающих окон линий
    • enpop_position_bottom-right — для маленьких всплывающих окон
14. Если вы планируете добавлять чекбокс «Согласия на рекламную рассылку» (наличие такого чекбокса в поп-апе необязательно), то обязательны класс marketing-consent–enpop и name marketingConsent у checkbox

Желательные:

1. Для наименования классов используйте БЭМ
2. При создании макета нужно учитывать то, что при адаптации не все элементы получится перестроить, соответственно, они будут скрыты на мобильных
3. Продумайте эффект при наведении :hover для кнопок на всплывающем окне
4. Разметка границы текстовых блоков позволит контролировать перенос текста. Минимальный объем – 2 строки. Такой объем позволит сохранить межстрочный интервал
5. Для собирающего всплывающего кона необходимо предусмотреть поля для ввода емейла, телефона и имени. Любое из этих полей можно отключить при настройке всплывающего окна

Что ещё важно:

1. Нельзя использовать платные или кастомные шрифты, мы можем брать только бесплатные из Google Fonts
2. При создании макета имейте ввиду, что большинство современных экранов имеют разрешение Full HD 1920×1080
3. Если планируется анимация, то лучше обсудить возможность её подключения с персональным менеджером
4. Стилизационные темы одинаковы для всех всплывающих окон и приведены ниже
5. Изображения для поп-апов предварительно загрузите в хранилище изображений и используйте ссылки на них в верстке

• enpop_position_top-left
• enpop_position_top-right
• enpop_position_bottom-left
• enpop_position_bottom-right
• enpop_position_top
• enpop_position_bottom
• enpop_position_left
• enpop_position_right

• enpop_offer-window
• enpop_thanks-window

• enpop_color_1
• enpop_color_2
• enpop_color_3

…

• enpop_special-effect_1
• enpop_special-effect_2
• enpop_special-effect_3

…

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

Примеры конфигурационных файлов можно найти в шаблонах для загрузки.

• type — тип всплывающего окна (fullscreen/line/small)

• category — категория всплывающего окна (collecting/informing)

• scriptSettings — настройки, которые передаются скрипту. Если эти настройки не добавить, в редакторе нельзя будет выбрать показ спасибо-страницы.
  • thanksPageClass — класс спасибо-страницы
  • containerSelector — контейнер, к которому нужно добавить класс
  • "marketingNewslettersConsent": true — поле (необязательное), отвечающее за показ чекбокса на согласие с рекламной рассылкой. Если вы не планируете в поп-апе подобный чекбокс, то эту настройку добавлять не нужно.

• settings — общие настройки
  • personalData — настройки ПД
    • show — показывать ли по умолчанию (true/false)
    • selector — селектор для контейнера с текстом ПД (по умолчанию enpop_accept)
    • text — текст ПД по умолчанию
    • href — ссылка на ПД по умолчанию
    • containerSelector — если ссылка на ПД содержит не только текст, но и другие элементы вроде чекбокса, можно указать их общий контейнер, который будет скрываться, чтобы избежать случаев, когда скрывается текст, а чекбокс остаётся. Поле опционально
  • custom — настройки всплывающего окна
    • name — описание поля, что отобразится в интерфейсе при настройке всплывающего окна
    • selector — селектор для контейнера (по умолчанию 'enpop_title/enpop_text/enpop_submit)
    • param — меняемое свойство (textContent/value/innerHTML/style.width)
    • value — значение поля по умолчанию
    • type — тип (text)
  • themes — темы оформления
    • value — цветовая схема по умолчанию (enpop_color_1)
    • selector — селектор (container–enpop)
      • enum
        • color — цвет темы для предпросмотра
        • class — класс цветовой схемы (enpop_color_Х)
  • fields — Настройка динамически добавляемых полей формы

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

• fieldClass — класс, с которым добавляется поле ввода
• inputContainerSelector — селектор контейнера, в который будут добавляться поля
• enum
  • name — название поля (email/phone/firstName/lastName)
  • placeholder — название поля, которое будет видеть пользователь
  • required — обязательно ли поле к заполнению (true/false)
• positions — темы оформления
• value — позиция по умолчанию
• selector — селектор (ontainer–enpop)
  • enum
    • aligment — позиция (top-left/top-right/bottom-left/bottom-right)
    • class — класс позиции
• thanksPage — настройки текста для спасибо-страницы
• name — описание поля, что отобразится в интерфейсе при настройке всплывающего окна
• selector — селектор для контейнера (по умолчанию enpop_title/enpop_text/enpop_submit)
• param — изменяемое свойство (textContent/value/innerHTML/style.width)
• value — значение поля по умолчанию
• type — тип (text)