Overview
The Memory Match — Match All template is a timed card-matching challenge. Users are presented with a face-down grid of 12 cards (6 pairs). They must find all 6 matching pairs before a countdown timer runs out. Every successful match fires confetti. Completing all pairs in time routes the user to a You Won screen. If the timer expires before all pairs are matched, the user is routed to a You Loose screen.
Preview the experience: Memory Match (Match All) 🔗
Unlike the Match One variant, this version requires the user to complete the entire board — no partial result. The timer adds urgency and makes the game feel competitive. The outcome is not personalized — it is completion-based: win or lose.
Before configuring logic or content, we recommend first applying your brand styling and then updating the card images, timer, and result screens.
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Promotional campaigns where completing a challenge unlocks a reward
Seasonal activations where a timed mechanic adds urgency to a limited offer
Brand engagement campaigns where time-on-experience is a key metric
Re-engagement campaigns where repeat visits can improve performance
Lead generation activations where completing the game unlocks a coupon code
Common Business Goals
Engagement & Time-on-Site
Lead Generation
Promotional Activation
Brand Awareness
Example Use Cases
Beauty / Haircare: match all product pairs before time runs out to win a discount
Retail / Ecommerce: branded memory challenge tied to a seasonal sale
CPG / FMCG: product knowledge game where matching all pairs proves brand familiarity
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience, explains the timer-based challenge, and invites the user to start. |
Screen 2 — Memory Match | Displays 12 face-down cards (6 pairs) in a grid with a countdown timer. Cards briefly preview their front at load, then flip back. The user taps cards to flip them. Successful matches are locked in place with confetti. Non-matching cards flip back after a brief delay. The timer counts down — if it reaches zero before all pairs are found, the You Loose screen is triggered. |
Screen 3a — You Loose | Shown when the timer expires before all pairs are matched. Displays a consolation message and a CTA to try again. |
Screen 3b — You Won | Shown when all 6 pairs are matched before the timer runs out. Displays the prize value, coupon code, and an optional CTA. |
Countdown Timer | A native platform timer set to 80 seconds by default. Configured via Screen Controls on the Memory Match screen. Routes to the You Loose screen when it expires. |
Confetti Animation | Fires on every successful pair match. Powered by canvas-confetti, already injected via Javascript Hooks. |
Step 1: Apply Your Brand Styling
The first step is to replace the template branding with your own. Review the Style Guide Overview and Design Specifications for instructions.
Review and update:
Colors — card background colors, card back design, and page background
Fonts — headline and body text styles
Logo — replace the BlueConic logo at the top with your own brand logo
Background — each screen supports a custom background color, gradient, or image
Card images — the product visuals shown on the front face of each card
Card back design — the hidden side (solid color by default) is fully customizable
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.
The Experience Style Guide modal will open.
Update your colors, fonts, logos, buttons, and imagery by clicking into each element and updating use the left side panel tools.
Click Apply to update all screens.
Recommended Action
Complete all branding updates before updating card images or configuring outcomes. The card naming convention (name-01 / name-02) must be correct for the matching engine to work — confirm your naming before publishing.
Step 2: Customize the Introduction Screen
The introduction screen should clearly communicate the mechanic and create excitement for the game.
✅ YOU CAN EDIT:
|
Review and Update
Headline — communicate what the user will do
Description — communicate the timer and the win condition clearly
CTA button text
Best Practice
Communicate both the challenge and the time pressure upfront. Users should enter the game knowing they need to find all pairs before the timer runs out.
Step 3: Update the Card Grid
The Memory Match screen displays 12 cards in a grid made up of 6 matching pairs. Users flip cards to find all matching pairs before the countdown timer expires.
Important Before You Begin
The matching logic for this game is handled automatically by the template's JavaScript. You do not need to configure branching, outcomes, or game logic.
To customize the game, you only need to:
Replace the card images
Follow the required card naming convention
Enable Randomize Responses
Update the game title, description, and timer settings
Update the Card Images
Each matching pair consists of two cards that use the same image and base name.
Examples:
shampoo-01 and shampoo-02
conditioner-01 and conditioner-02
hair-mask-01 and hair-mask-02
The template automatically removes the numeric suffix (-01 and -02) and compares the remaining text to determine whether two cards are a match.
⚠️ The base name must match exactly. If the names differ in any way, the cards will not be recognized as a pair. Only the -01 / -02 suffix pattern is supported.
Enable Randomize Responses
From the screen settings, make sure Randomize Responses is enabled.
When enabled, card positions are shuffled each time the experience loads, creating a unique game experience for every user. This setting is required to ensure players cannot memorize card locations across multiple plays.
Additional Editable Elements
Title — Update the game headline.
Subtitle — Update the game instructions.
Timer Duration — Configure the countdown timer from Screen Controls.
Card Back Design — Customize the hidden side of each card.
Card Styling — Update colors, borders, shadows, and animations to match your brand.
Review and Update
Before launching, verify that you have:
✅ Replaced all card images
✅ Updated each card label using the -01 / -02 naming convention
✅ Enabled Randomize Responses
✅ Updated the title and subtitle
✅ Configured the timer duration
Best Practice
Use images that are visually distinct from one another. Clear differences between card images make the game easier to understand and more enjoyable for players.
Step 4: Configure Additional Experience Elements
Countdown Timer
The Memory Match screen includes a native countdown timer that ends the experience and routes the user to the You Loose screen when it expires. The timer is configured directly in the Screen Controls panel — no JavaScript required.
To update the timer duration:
Select the Memory Match screen in the editor
Open Edit Controls in the left panel
Locate the Timer section under Screen Duration
Update the Seconds value (default: 80 seconds)
Optionally adjust the animation style and colors to match your brand
Review and Update
Timer duration (Seconds) — set based on the number of pairs and your intended difficulty
Animation style — choose from the available countdown display options
Primary and Secondary colors — update to match your brand palette
Best Practice
Allow approximately 10–15 seconds per pair as a baseline. For 6 pairs, 80 seconds is a reasonable default that feels achievable but requires focus. Increase the time if your audience is less familiar with the mechanic, or decrease it to create more urgency.
Confetti Animation
A confetti burst fires each time the user finds a matching pair. On the You Won screen (Match All) or the Outcome screen (Match One), a final confetti animation celebrates the result. Both are powered by the canvas-confetti library, already injected via the Javascript Hooks panel.
To confirm the library is loaded:
Click the three-dot menu (⋮) on the experience
Select "Edit Javascript Hooks"
Confirm the following URL is listed under Inject JS Libraries:
Best Practice
Do not remove the confetti library injection. The confetti function is called from the game engine each time a match is found — if the library is missing, the experience will produce a JavaScript error on the first match.
⚠️ Javascript Hook Permissions Required
|
Step 5: Configure the You Won and You Loose Screens
In addition to the Outcome screen used for individual pair recommendations, this template includes two completion screens that are triggered by the timer mechanic.
You Won Screen
✅ YOU CAN EDIT:
|
You Loose Screen
✅ YOU CAN EDIT:
|
Best Practice
The Try Again CTA (restart button) on the You Loose screen is important — it reloads the experience and gives users another chance to earn the reward. Repeat engagement is a positive outcome even when users don't win on the first attempt.
Step 8: Test the Experience
Before publishing, complete a full testing pass to ensure everything works as expected. Use the Full Screen Preview option to test your experience.
Review
Branding and styling across all screens
All cards display correctly face-down at the start
Cards briefly show their front face at load, then flip back
Tapping two matching cards reveals both and fires confetti
Tapping two non-matching cards flips them back after a brief delay
Timer counts down correctly from the configured duration
Completing all pairs before time runs out routes to the You Won screen
Timer expiring before all pairs are found routes to the You Loose screen
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Test Scenarios
Run the following test scenarios:
Match all 6 pairs before the timer expires — confirm You Won screen appears
Let the timer expire without matching all pairs — confirm You Loose screen appears
Verify confetti fires on each successful match
Verify non-matching cards flip back after the delay
Test on mobile — confirm the extended flip delay (2 seconds) activates for touch devices
Best Practice
Test both win and loss conditions. For the loss condition, set the timer to a very short duration temporarily to trigger the expiry quickly, then restore it before publishing.
Next Steps
Once testing is complete, your experience is ready to publish and generate launch links.
Continue optimizing by:
Monitoring win/loss rates in the Analytics panel and adjusting the timer duration if win rates are too low or too high
Refreshing the card images periodically to keep the experience novel for repeat visitors
Adding a lead capture screen to collect emails before the game starts
Updating the coupon code or prize value on the You Won screen to align with active promotions
For additional assistance, refer to the platform documentation or contact your support team.
Frequently Asked Questions
How does the game identify matching pairs?
The engine reads the text label on each flipped card, removes any trailing number, and compares the base names. Cards labeled 'shampoo bottle 01' and 'shampoo bottle 02' match because their base name ('shampoo bottle') is identical after the number is stripped. Any deviation in the base name — even a space or capitalization difference — will prevent the cards from matching.
What happens if the timer runs out?
When the screen duration expires, the platform automatically routes the user to the You Loose screen. The game does not need any additional configuration to handle this — the timer is a native platform element tied to screen duration.
Can I change this to advance on the first match only?
Yes. The 'Match One' variant of this template advances as soon as the user finds any single matching pair, routing them to a personalized product outcome. Use the Match One template if you want users to receive a recommendation from their first match rather than completing the full board.
Can I add more or fewer card pairs?
Yes. The default is 6 pairs (12 cards). You can add or remove pairs from the screen editor. Each pair must follow the name-01 / name-02 naming convention, and each new pair must be added to the Outcome Logic panel with a corresponding point mapping.
Can I change the timer duration?
Yes. Navigate to the Memory Match screen, open Edit Controls, and update the Seconds field under Screen Duration. The default is 80 seconds. No code change is required.
Can I change the card back design?
Yes. The card back is a solid color by default and can be updated via the screen editor or Custom CSS without needing Javascript Hook permissions.
Can I remove the confetti animation?
Yes. The confetti fires from the game engine's match detection logic. Disabling it requires modifying the On Show or On Respond script in the Javascript Hooks panel, which requires Javascript Hook permissions on your account.
Can I add a lead capture screen?
Yes. A lead capture screen can be added before the game screen. Configure it with your required form fields and consent language.