Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Updated: 1. August 2020

How to code your own custom pop-up?

In Mailocator you can use your own HTML / CSS code so that it is possible to build a pop-up (or any object) without restrictions and according to your own requirements.

To create a pop-up, you can use the following minimal skeleton, which contains the basic semantics of the objects used in Mailocator. This procedure can be used for the current PRO and AGENCY version or the original version of Mailocator.

You can download and try out a sample pop-up, including acknowledgments and error messages, in Mailocator Designer.


Basic mandatory HTML structure of a pop-up

<main class="mlctr-underlayer">
     <div class="mlctr-popup">
          <img src="https://static.mailocator.com/img/icon/close.png" class="mlctr-close-button"
               onclick="return mailocator.action.do('close')">

              <div class="mlctr-message-success mlctr-next-step">
                  <form onsubmit="return mailocator.action.do('subscribe')">
                      <input type="email" name="email" value="" placeholder="your email">
                      <div class="mlctr-message-error" data-edit="mark text"></div>
                      <button >Subscribe</button>
                 </form>
             </div>

     </div>
</main>



Description of the mandatory structure

The MAIN tag and the .mlctr-popup class element indicate the basic containers for overlaying the screen with a semi-transparent background and placing the contents of the window.
If you want to have a closing cross, an image, or any button in the corner of the window, you need to add a Mailocator action mailocator.action.do ('close') that forces the window to close.
To submit the form, use the javascript event onsubmit and the Mailocator action mailocator.action.do ('subscribe')
The content of an element with class .mlctr-message-success is overwritten by a thank you page if the collected data was successfully passed.
The content of an element with class .mlctr-message-error is filled with an error message in case an error has occurred (duplicate contact etc.)
If you use multistep, then the individual steps are displayed in a container with class .mlctr-next-step



Recommended minimum CSS

.mlctr-underlayer {
   position: fixed;
   z-index: 9999999;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background-color:rgba(0, 0, 0, 0.65)";
}

.mlctr-popup {
   width: 500px;
   height: 400px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
}
 
.mlctr-close-button {
   position:absolute;
   width: 28px;
   height: 28px;
   right: -14px;
   top: -14px;
   z-index: 9999999
}




background settings .mlctr-underlayer
default window settings .mlctr-popup
closing cross position .mlctr-close-button





Download:

You can download the functional Mailocator package here - Popup basic skeleton.mlctr

RELATED

Scenario in Mailocator

The Mailocator scenario is a key tool for setting up your campaigns to work properly. See everything and how easy it is to set up.

Discount codes

Mailocator allows you to pass discount and promotional codes to email campaigns

Discount codes obtained from the API in real time

In addition to code stacks, Mailocator allows you to read discount codes in real time from an external API, display them in a thank you page and pass them to an email tool.

Transfer of data from Mailocator to ESP

Sometimes it is useful to provide additional information from Mailocator, usually state, gender, favorite categories, discount code or name and surname. How to do it?

Preparation of the winning calendar (Advent calendar)

Mailocator contains pre-prepared templates for action calendars, which reveal to users the winnings for a specific day in exchange for an email address. You can easily prepare an Advent calendar with a discount or an event for each day.

Scratch card

A scratch card is a campaign in which the marketing content (discount, notification, coupon...) is covered by an image that can be wiped with the mouse cursor or a finger on the screen of the smart device. After deleting and revealing the content, you can automatically trigger an action, such as getting an email address.