Instructions on how to layout custom pop-ups

This instruction will help you to layout a pop-up, which CSS styles will not distort or conflict with the styles of your site. You will be able to manage pop-up settings in the service interface in the “Pop-ups” section.

Three types of pop-ups are available in the service:

• fullscreen - in the centre of the screen;
• line - a bar at the bottom or top of the screen;
• small - small corner window.

And 2 categories:

• collecting - collecting
• informing - informing

Designed to collect user information: email, phone number, name, etc.

By leaving an email address (and other user data) in the field of the pop-up window, the user subscribes to the newsletter. After subscribing, he/she sees a “thank you page” with a confirmation of successful subscription.

Class .enpop_thanks-windowwhich should be added to the parent block with id #enpopclass is responsible for the mechanics of showing the “thank you page”. Adding one class changes the behaviour of the other elements.

Designed to inform the user about a particular service/promotion, etc. “Thank you page” is not used for such a popup.

Pop-up service pop-up templates have the correct structure and classes, which can be modified and supplemented if necessary. Therefore, we recommend using them for layout.

• 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>

Mandatory:

1. Presence of a thank you page (for the collecting window only!)
2. Presence of a cross to close the window
3. On all styles put !important
4. At the beginning of the CSS file, zero out any styles that may leak: #enpop * {all: initial !important}
5. Put a modifier on all classes –enpop to make the styles unique.
6. First container class for all popups .container–enpop. All themes with colour, positioning, etc. should be applied to it
7. Class .container–enpop put id #enpop and write all styles through it.
8. Don't forget the difference between #enpop.container–enpop и #enpop .container–enpop
9. Roles must be added for the popup to work properly:
   • data-role='overlay' - background block (if any)
   • data-role='body' - popup body
   • data-role='close' - button to close the pop-up window
   • name='firstName' type='text' - input with name
   • name='lastName' type='text' - surname input
   • name='email' type='email' - email input
   • name='phone' type='tel' - phone input
   • type='submit' - form submit button
10. Add modification classes to the modifiable values at the popup for the identity of the configuration file:
    • enpop_title - title text
    • enpop_text - body text
    • enpop_submit - subscribe button
    • enpop_accept - link to the agreement on processing of personal data
    • enpop_accept_container - if there is a checkbox, wrap the container with the PD and the checkbox.
11. Style the link to the PDN by referring to .enpop_accept a (or another class of the PDN container), i.e. without creating a class for it
12. When laying out the PDN container, take into account that it will be hidden display:noneso the top indents should not be set, so that the layout will not break when it is hidden
13. Standard positioning themes for popup previews in the platform:
    • enpop_position_bottom - for line popups
    • enpop_position_bottom-right - for small pop-ups

Desirable:

1. For naming classes, use БЭМ
2. When creating the layout, you need to take into account the fact that not all elements will be able to be rearranged when adapting, accordingly, they will be hidden on mobiles
3. Consider the effect of hovering :hover for buttons on a pop-up window
4. Border marking of text blocks will allow you to control the transfer of text. The minimum volume is 2 lines. Such volume will allow to keep line spacing
5. The fields for email, phone number and name should be provided for the collecting pop-up cone. Any of these fields can be disabled when setting up the pop-up window

What else is important:

1. You can't use paid or custom fonts, we can only take free fonts from the Google Fonts
2. When creating a layout keep in mind that most modern screens have Full HD 1920×1080 resolution.
3. If animation is planned, it is better to discuss the possibility of its connection with your personal manager.
4. Stylisation themes are the same for all pop-ups and are listed below

• 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

…

Configuration file is needed to describe the popup parameters that can be changed, as well as for its proper operation when loaded into enKod. Only part of the config file needs to be filled in, we will do the rest ourselves.

Examples of configuration files can be found in the download templates.

• type - popup type (fullscreen/line/small)

• category - pop-up category (collecting/informing)

• scriptSettings - settings that are passed to the script. If you don't add these settings, you won't be able to choose to display a thank you page in the editor
  • thanksPageClass - thanksPage class
  • containerSelector - container to which you want to add a class

• settings - general settings
  • personalData - PD settings
    • show - whether to show by default (true/false)
    • selector - selector for the container with the AP text (by default enpop_accept)
    • text - default AP text
    • href - default PD link
    • containerSelector - If the AP link contains not only text but also other elements like a checkbox, you can specify their common container to be hidden to avoid cases where the text is hidden but the checkbox remains. Field optional
  • custom - popup settings
    • name - description of the field that will be displayed in the interface when customising the pop-up window
    • selector - selector for the container (by default 'enpop_title/enpop_text/enpop_submit)
    • param - changeable property (textContent/value/innerHTML/style.width)
    • value - default field value
    • type - type (text)
  • themes - design themes
    • value - default colour scheme (enpop_color_1)
    • selector - selector (container–enpop)
      • enum
        • colour - theme colour for preview
        • class - colour scheme class (enpop_color_X)
  • fields - Configuring dynamically added form fields

Warning. If you specify a field inputContainerSelectorfield, its contents will be automatically cleared and only those fields specified in the settings will be rendered.

• fieldClass - class with which the input field is added
• inputContainerSelector - selector of the container to which fields will be added
• enum
  • name - field name (email/phone/firstName/lastName)
  • placeholder - name of the field the user will see
  • required - whether the field is required (true/false)
• positions - design themes
• value - default position
• selector - selector (ontainer–enpop)
  • enum
    • aligment - position (top-left/top-right/bottom-left/bottom-right)
    • class - position class
• thanksPage - text settings for thanks page
• name - description of the field that will be displayed in the interface when setting up the pop-up window
• selector - selector for the container (by default enpop_title/enpop_text/enpop_submit)
• param - modifiable property (textContent/value/innerHTML/style.width)
• value - default field value
• type - type (text)