Содержание

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:

And 2 categories:

Collecting

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.

The additional (optional) class marketing-consent–enpop is responsible for the mechanics of subscribing to a mailing list. Using this class with the name marketingConsent, you can add a checkbox for “Consent to advertising mailings”. If the user does not check it, they will not be subscribed to the mailing lists of the pop-up collector, but will be added to the enKod platform.

Informing

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

Templates for downloading

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.

Example of pop-up window structure

<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">Weekly news</div>
        <div class="popup__text--enpop enpop_text">Leave us your email-address so we can sent you more information</div>
        <div class="popup__inputs-container--enpop">
            <input class="inputs-container__input--enpop" name="firstName" type="text" 
            placeholder="name">
            <input class="inputs-container__input--enpop" name="email" type="email" 
            placeholder="email">
            <input class="inputs-container__input--enpop" name="phone" type="tel" 
            placeholder="phone number">
            <input class="inputs-container__submit--enpop enpop_submit" type="submit" 
            value="Subscribe">
        </div>
        <div class="popup__accept-container--enpop">
            <p class="accept-container__text--enpop">By pressing this button you are agreeing to
            <a class="accept-container__link--enpop enpop_accept">our polices</a></p>
        </div>
    </form>
</div>

Example layout of a checkbox for agreeing to receive advertising mailings 

<div class="marketing-consent marketing-consent--enpop">
            <input type="checkbox" name="marketingConsent" class="marketing-consent__checkbox" />
            <label class="marketing-consent__label">
                 I agree to receive promotional emails
            </label>
</div>

Example of a pop-up window structure with a checkbox for consent to receive advertising mailings 

<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">News of the week</div>
        <div class="popup__text--enpop enpop_text">
            Leave your email here and we will write back to you
        </div>
        <div class="popup__inputs-container--enpop">
            <input
                class="inputs-container__input--enpop"
                name="firstName"
                type="text"
                placeholder="phone"
            />
            <input
                class="inputs-container__input--enpop"
                name="email"
                type="email"
                placeholder="email"
            />
            <input
                class="inputs-container__input--enpop"
                name="phone"
                type="tel"
                placeholder="phone number"
            />
            <input
                class="inputs-container__submit--enpop enpop_submit"
                type="submit"
                value="Subscribe"
            />
        </div>

        <div class="popup__accept-container--enpop">
            <p class="accept-container__text--enpop">
                By pressing this button you agree with
                <a class="accept-container__link--enpop enpop_accept">the info in this link</a>
            </p>
        </div>

        <!-- Agree to accept marketing mailings -->
        <div class="marketing-consent marketing-consent--enpop">
            <input
                class="marketing-consent__checkbox"
                type="checkbox"
                name="marketingConsent"
            />
            <label class="marketing-consent__label">
                Agree to accept marketing mailings
            </label>
        </div>

    </form>
</div>

Layout requirements

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
  14. If you plan to add a “Consent to advertising mailing list” checkbox (the presence of such a checkbox in the pop-up is optional), then the class marketing-consent–enpop and name marketingConsent are required for the checkbox.

Desirable:

  1. For naming classes, use BEM
  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
  5. Images for pop-ups should be pre-loaded to the image repository and use links to them in the layout

Stylisation Themes

Stylisation Themes:

Pages before/after:

Colour themes:

…

Special Effects:

…

Formatting of configuration JSON file

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.

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