Overview
The Advent Calendar template is a date-gated engagement experience where users visit a calendar grid and open doors that become available on specific scheduled dates.
Each door displays a live countdown timer until its unlock date and time. When the countdown reaches zero, the door unlocks — the user can open it to reveal a product, exclusive content, discount, or reward. Each door is mapped to its own personalized outcome.
This is not a single-session experience. Users return to the calendar daily or periodically as doors unlock over time, making it ideal for multi-day campaigns, seasonal activations, and loyalty programs. The experience is always live — locked doors show countdowns in real time, and unlocked doors are accessible immediately.
This template includes:
Intro Screen — introduces the campaign and invites users to open today's door
Advent Calendar Screen — the grid of doors, each with its own unlock date/time and countdown timer
Outcome Screen — displays the personalized product or content reveal for the door the user opened, dynamically populated from the Outcome panel
Before configuring logic or content, we recommend first applying your brand styling and then setting the unlock dates for each door.
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Seasonal campaigns — advent calendars, holiday countdowns, or multi-day sale events
Product launch campaigns — reveal a new product or feature on each day leading up to a launch
Loyalty and retention programs — reward returning users with daily content unlocks
Editorial or content campaigns — drip exclusive articles, recipes, tips, or video reveals over multiple days
Promotional activations — reveal a new discount, coupon code, or exclusive offer each day
Common Business Goals
Engagement & Repeat Visits
Lead Generation
Product Discovery
Loyalty & Retention
Promotional Activation
Example Use Cases
Beauty / Haircare: 4-day ritual reveal — one product unlocks each day in a holiday campaign
Retail / Ecommerce: 12 Days of Deals — a new discount unlocks each day leading up to a sale
CPG / FMCG: recipe or usage tip revealed daily over a seasonal campaign period
Media / Publishing: exclusive content drops gated by date, accessible only on the day they unlock
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the campaign, sets the expectation of a multi-day experience, and invites users to open today's available door. |
Screen 2 — Advent Calendar | Displays the door grid. Each door tile shows either a countdown timer (if locked) or the door image (if unlocked). Locked doors display a padlock icon and a live countdown in D:H:M:S format. When the countdown reaches zero, the door unlocks automatically. Users can only open unlocked doors. |
Screen 3 — Outcome | Displays the personalized reveal for the door the user opened. All content — heading, image, description, and CTA — is dynamically populated from the Outcome panel based on which door was selected. |
Countdown Timer Engine | Custom JavaScript that reads the unlock date/time from each door tile and runs a live D:H:M:S countdown. When the target date is reached, the door transitions from locked to unlocked automatically. Already pre-configured — no code change required for standard use. |
Outcome Panel | Manages the reveal content for each door: heading, image, description, and redirect URL. One outcome per door. |
Outcome Logic Panel | Maps each door's unlock date/time (used as the response identifier) to its corresponding outcome. |
Creating an Experience from This Template
To launch this template:
Navigate to Builder → Template Gallery.
Locate this template in the Gamification section of the template gallery.
Hover over the template and select Use Template.
Enter a name for your experience.
(Recommended) Apply your Style Guide to automatically brand the experience.
Click Create.
The platform will generate a new experience using the template structure and selected branding.
Once created, you can customize the content, design and recommendation logic to fit your specific use case.
💡 Tip: We recommend creating and applying a Style Guide before launching templates to streamline setup and maintain consistent branding across experiences.
Step 1: Apply Your Brand Styling
The first step is to replace the template branding with your own. If you're style guide is already created, then this will happen at the template experience creation step.
Review and update:
Colors
Fonts
Logos
Background images
Buttons
Imagery
Applying your style guide first makes it easier to visualize the final experience as you customize content and recommendations.
Haven't created a Style Guide yet? No problem! You can still apply your branding directly within the experience.
From the Builder Map, select the Design icon in the toolbar to open the Experience Design panel.
From there, update your brand assets—including colors, fonts, logos, buttons, and imagery—by selecting each element and customizing it to match your brand. Changes made here will automatically be applied across all screens in the experience by clicking "apply".
Recommended Action
Complete all branding updates before modifying copy, logic, or product feed configurations.
Step 2: Customize the Introduction Screen
The introduction screen should communicate the multi-day nature of the experience and invite users to return daily.
✅ YOU CAN EDIT:
|
Review and Update
Headline — communicate the theme of the campaign (e.g., "Unwrap Your Hair Ritual", "12 Days of Beauty")
Subtitle — state the number of days/doors (e.g., "4 Days · 4 Surprises", "12 Doors · 12 Rewards")
Description — explain that new doors unlock each day and invite users to return
CTA button — use action language tied to the day (e.g., "Open Today's Door")
Background and logo
Best Practice
Frame the intro screen as an invitation to a journey, not a single-use game. Use language that communicates return value — "a new surprise every day" sets the expectation that coming back is worth it. Keep it short; users are here to see what's available today, not to read.
Step 3: Configure the Advent Calendar Doors
The Advent Calendar screen is the core of this experience. Each door tile has two states: locked (showing a countdown timer) and unlocked (showing the door image). The transition between states is driven by the unlock date/time set on each door.
How Door Locking Works
Each door tile contains a hidden date/time value (in the format YYYY-MM-DD HH:MM:SS) that the countdown engine reads on load. The engine compares this value to the current time:
If the target date is in the future — the door displays a live countdown in D:H:M:S format and shows the locked padlock icon. The door cannot be opened.
If the target date has passed — the door transitions to the unlocked state, shows the door image, and becomes clickable. The user can open it to reveal the outcome.
This transition happens automatically in real time — no page refresh is needed. A door that unlocks while the user is viewing the calendar will transition from locked to unlocked without any user action.
✅ YOU CAN EDIT:
|
Instructions: Add More Doors:
Select the calendar door container
Click the blue + button at the bottom of the container.
Choose Image Button from the menu.
Follow the instructions below to update the image button's date and time naming convention
Default Door Configuration
The template comes pre-configured with the following 4 doors as an example. All dates and outcomes must be updated before publishing:
Door | Unlock Date/Time | Outcome | Product / Content |
Door 1 | 2025-12-24 14:00:00 | DAY 1 · THE FRESH START | Hydrating Shampoo |
Door 2 | 2026-12-25 09:00:00 | DEEP NOURISHMENT | Repair Mask |
Door 3 | 2026-12-26 18:00:00 | THE GOLDEN TOUCH | Nourishing Hair Oil |
Door 4 | 2026-12-27 20:00:00 | THE FINAL STYLE | Professional Hair Dryer |
Planning Your Door Schedule
Before updating the calendar, plan your full door schedule:
Decide how many doors your campaign needs (the default is 4, but there is no fixed limit)
Assign an unlock date and time to each door — stagger them to drive daily return visits
Assign an outcome (product, content, or reward) to each door
Decide on a campaign start date — the first door typically unlocks on Day 1 of the campaign
⚠️ Date/Time Format is Critical
|
Best Practice
Stagger unlock times throughout the day rather than setting all doors to midnight. A door that unlocks at 9:00 AM, 2:00 PM, or 6:00 PM gives users a reason to check back at different times and creates multiple engagement moments per day.
Step 4: Configure Additional Experience Elements
Countdown Timer Engine
The countdown timers are powered by custom JavaScript that is pre-configured on the Advent Calendar screen. The script reads the date/time value from each door tile, calculates the remaining time, and updates the display every second. When the countdown reaches zero, the door automatically transitions to the unlocked state.
No configuration is required for the countdown engine to work. The only action needed is to set the correct date/time value on each door tile in the screen editor.
Review and Update
Confirm the unlock date/time values are correctly formatted on each door tile
Preview the experience to verify locked doors show countdowns and unlocked doors show images
Test by temporarily setting a door's date to a past time to verify the unlocked state displays correctly
⚠️ Javascript Hook Permissions Required
|
Step 5: Configure the Lead Capture Screen
This template does not include a lead capture screen by default. You can add one between the Intro Screen and the Advent Calendar screen to collect user information before they access the calendar.
Form Fields
Determine which information you want to collect:
Email Address
First Name
Last Name
Phone Number
Custom Fields
Opt-In Language
Update all consent language to align with your organization's legal and compliance requirements.
Examples include:
Marketing consent language
Privacy policy references
Terms and conditions
Hyperlinks
Ensure all links point to the correct destinations:
Privacy Policy
Terms of Service
Additional compliance resources
Best Practice: Keep forms as short as possible while collecting the information required for your business objectives.
💡 Tip: Review what fields you can add to a lead capture screen with this article.
Best Practice
For multi-day campaigns, placing the lead capture screen before the calendar — on first visit — is the most effective approach. Users only need to complete the form once, and the lead is captured before they access any door content. This creates a clean gate at the entry point of the campaign.
Add a New Screen
To add a new screen, click the blue connector between the Intro screen and the Advent Calendar screen. This will open a menu where you can select Add Screen. The Screen Library will appear, allowing you to choose the Form screen type. Once the screen has been added, you can customize the content and configure the form fields as needed.
Step 6: Configure Results and Outcomes
The Outcome screen displays the personalized reveal for the door the user opened. All content — heading, image, description, and CTA — is managed from the Outcome panel, not the screen editor. The screen uses dynamic placeholders that are automatically populated at runtime based on which door was opened.
✅ YOU CAN EDIT (from the Outcome panel):
|
💡 Tip: You'll know that you have the correct dynamic outcome elements by the distinguishing brackets arounds the element name.
On the Builder Map, the results screen can be identified by the arrow icon.
Accessing the Outcomes Section
Before you can customize the outcome content, you'll need to navigate to the Outcomes section of the experience. There are two ways to access this page:
Option 1: From the Builder Map
From the Builder Map, select the Outcomes icon in the toolbar. This will open the Outcomes page where you can view, add, and edit all outcome details for your experience.
Option 2: From the Screen Editor
If you are actively editing a screen, you can also navigate directly to Outcomes from the left-side panel. In the editor, locate and select Add Outcomes. This will take you to the same Outcomes page without needing to return to the Builder Map.
Managing Outcomes
This template includes 4 pre-built outcomes — one per door. To view and edit them, navigate to Add Outcomes in the left panel.
Each outcome entry includes:
Outcome Name — internal identifier; must match the door's response identifier in the Outcome Logic panel
Heading Name — the title displayed to the user on the outcome screen (e.g., "DAY 1 · THE FRESH START")
Outcome Image — the product or content image displayed on the outcome screen
Outcome Description — the supporting text shown below the image
URL — the destination users are sent to when they click the CTA
The 4 default outcomes in this template are:
DAY 1 · THE FRESH START — Hydrating Shampoo reveal
DEEP NOURISHMENT — Repair Mask reveal
THE GOLDEN TOUCH — Nourishing Hair Oil reveal
THE FINAL STYLE — Professional Hair Dryer reveal
Review and Update
Outcome names and headings — frame each as a daily reveal (e.g., "Day 1:", "Today's Secret:")
Outcome images — replace with your own product photography
Outcome descriptions — write copy specific to each product or content reveal
Redirect URLs — link directly to the product page or offer
CTA button text and color
Best Practice
Each outcome reveal is a mini-campaign moment. Write outcome descriptions that feel like an exclusive reveal — not a standard product description. Use language like "Today's surprise is..." or "Day 2 unlocks..." to reinforce the calendar mechanic and make the reveal feel special.
Step 7: Configure Logic
Logic Type: Date-Based Matching
How It Works
Each door's unlock date/time value (in YYYY-MM-DD HH:MM:SS format) is used as the response identifier in the Outcome Logic panel. When a user opens a door, the platform matches the door's date/time value to the corresponding outcome and displays it on the Outcome screen.
The Outcome Logic panel maps each door's date/time to its outcome using a 1-point matching system:
2025-12-24 14:00:00 → DAY 1 · THE FRESH START (1 point)
2026-12-25 09:00:00 → DEEP NOURISHMENT (1 point)
2026-12-26 18:00:00 → THE GOLDEN TOUCH (1 point)
2026-12-27 20:00:00 → THE FINAL STYLE (1 point)
⚠️ Logic Must Match Door Dates Exactly
|
Configuration Steps
Navigate to Outcome Logic in the left panel
Confirm the logic type is set to Matching
For each door, verify the date/time row matches the value set on that door tile
Assign 1 point to the corresponding outcome for each door date/time
If you add new doors, add new rows to the Outcome Logic panel with the correct date/time values
Save and validate using the Outcome Validator toggle
Best Practice
Maintain a simple reference document — a table with door number, unlock date/time, outcome name, and product — before configuring the logic. This prevents errors from mismatched values and makes it easy to update the calendar for future campaign cycles.
Step 8: Test the Experience
Before publishing, complete a full testing pass to ensure everything works as expected. From the Builder Map, you will click on the Preview button to test your experience.
Review
Branding and styling across all screens
All door unlock date/times are correctly formatted and set
Locked doors display countdown timers in D:H:M:S format
Unlocked doors display the door image and are clickable
Opening an unlocked door routes to the correct Outcome screen
Outcome content (heading, image, description, URL) is correct for each door
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Testing Locked and Unlocked States
To test the unlocked state without waiting for the real date to arrive:
Temporarily set a door's date/time value to a past date (e.g., 2020-01-01 00:00:00)
Preview the experience — the door should show as unlocked
Click the door and verify it routes to the correct outcome
After testing, restore the correct unlock date/time before publishing
Best Practice
Test every door individually by temporarily setting each one to a past date. With multiple doors mapping to different outcomes, each routing path must be verified separately. Restore all dates before publishing.
Next Steps
Once testing is complete, your experience is ready to publish. and generate launch links by toggling to the launch section from the Builder Map.
Continue optimizing by:
Monitoring engagement in the Analytics panel — track which doors are opened most and which outcomes drive the most CTA clicks
Refreshing the door images and outcome content for new campaign cycles without changing the date/time logic
Adding a lead capture screen to build your list before users access the calendar content
Extending the campaign by adding new doors for longer activation periods
Using the countdown timer as a teaser — share the experience link before Day 1 so users can see what's coming
Frequently Asked Questions
How does the door know when to unlock?
Each door tile contains a hidden date/time value (in YYYY-MM-DD HH:MM:SS format). The countdown engine reads this value on load, compares it to the current time, and either displays a countdown (if the date is in the future) or transitions the door to the unlocked state (if the date has passed). The transition happens automatically without a page refresh.
Can a user open a door before its unlock date?
No. Locked doors display a countdown timer and cannot be clicked. Only doors whose unlock date/time has passed are interactive.
Can I add more than 4 doors?
Yes. You can add more door tiles to the calendar screen by duplicating an existing door tile and setting a new unlock date/time. Each new door must also be added to the Outcome panel and the Outcome Logic panel with a corresponding date/time mapping.
Can users open a door more than once?
By default, the experience does not prevent a user from opening the same door multiple times within the same session. If you want to limit this behavior, configure completion limits or use platform attributes to track which doors a user has already opened.
What happens if the date/time format is wrong?
If the date/time value is not in the correct YYYY-MM-DD HH:MM:SS format, the countdown will not work correctly. The door may remain permanently locked, display an incorrect countdown, or fail to transition to the unlocked state. Always verify the format before publishing.
Can I use this template for non-seasonal campaigns?
Yes. The template is called Advent Calendar but the mechanic works for any date-gated content series — product launch countdowns, multi-day sale reveals, drip content campaigns, or weekly unlocks. The visual theme and copy can be adapted to any campaign type.
Can I add a lead capture screen?
Yes. A lead capture screen can be added between the Intro Screen and the Advent Calendar screen. For multi-day campaigns, capturing the lead on first visit before users access the calendar is the recommended approach.