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

Blog / Knowledge base

Updated: 20. September 2020

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.

The following example describes how to make an Advent calendar

In Scenarios, create a new Calendar campaign



Select the Calendar campaign.
Choose the template that suits you.
Set the base color.
Set campaign delivery rules.
Set the default animation for the window display.
You can assign coupons or discount codes.





Setting the appearance of the Advent calendar



et the number of days to 24 (the first 24 days in December, the campaign is expected to run on December 1). After 24 days, the calendar will automatically stop appearing.
Set the first day of the campaign to 1 (December 1).
Choose the number of opening boxes with individual days on each line so that the grid corresponds to your ideas (you can see the preview in the right part).
Set the desired space between the fields.
If you don't want to create your own styles for the calendar (see below), check "Adjust automatically the size" and the boxes will be drawn at the optimal size.
Have the daily date automatically entered in the individual fields; if you have your own graphic fields composed of numbered images, you can turn off date listing.






Fields of days with your own pictures

If you want to cover the prizes with boxes with your own graphics, prepare 24 separate images (1 image for one day) and transfer them to the field for importing images.



Transfer pictures one at a time from day one to last.


Images can be PNG, JPG or SVG.
The maximum size of one image is 50 KB.
Images can be deleted but not moved.




See a preview



Launch a campaign and review the proposal.

Please note that if the date (calendar day number) is outside the proposed calendar range, the calendar campaign will not be displayed! For testing purposes, simply set the range of days to include today.

You can edit texts and colors in the Designer or via the Text tool.




Expert settings

The following is a description of CSS classes and HTML elements that affect the behavior and appearance of the calendar

.cal-calendar is the required area in which the calendar is drawn. If you want to set a picture background, add a background to this class.
.cal-calendar .cal-day describes the appearance of a field with a specific bottom. If you turn off automatic field sizing (see above), you can set dimensions and margins here.
.cal-calendar .cal-day .cal-day-box-number use to set the background or custom location of the day number.
.cal-win adjust if you want to affect the appearance of the win window.

Non-traditional calendars with their own positioning and individual field dimensions

In the HTML Editor, find the class .cal-calendar and manually paste the following code for each day:

<div class="cal-day day-1">
   <div class="cal-day-box">
       <div class="cal-day-box-number">1</div>
       <div class="cal-day-box-backside"></div>
   </div>
</div>


Write calendar day numbers in class .day-X and use this class for absolute positioning, z-index and other properties.

RELATED

Switching between integrations within the same project

If you need to route some campaigns to the CRM, others to an email tool, and store the results from surveys in an independent database, this solution is also easy to set up.

Automated values, adding values to hidden inputs

Merging of arbitrary fields and automatic filling of selected fields with a series of system values

Launch a campaign when you hover or touch a specific location on the page

Mark a location that triggers a campaign when the user hovers over it or touches it on a touch device

Mailocator Events

With events, you can intelligently manage the sequence of campaigns across the entire workflow scenario and display much more relevant and precisely targeted content in real time.

Notification

Set up the display of notifications on your site using Mailocator