Overview
The Memory Match — Match One template is a product discovery experience built on a card-flipping mechanic. Users are presented with a face-down grid of 12 cards (6 pairs) that briefly preview their front face at load, then flip back. The user taps cards to reveal them — when they find any one matching pair, the game ends immediately and they are routed to a personalized product recommendation outcome.
Preview Experience: Memory Match (Match One)
This is a discovery-first mechanic: the pair a user happens to find first determines their product recommendation. Every pair is linked to a different outcome, so the result feels both personal and serendipitous. No timer is used — the experience advances as soon as the first match is found, regardless of how long it takes.
ℹ️ Match One vs. Match All
|
This template includes:
Intro Screen — introduces the experience and invites users to start
Memory Match Screen — the 12-card flip grid
Outcome Screen (Screen 3) — displays the personalized product recommendation based on the first pair matched
Before configuring logic or content, we recommend first applying your brand styling and then updating the card images and outcomes.
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Product recommendation experiences where the goal is to match users to a specific product
Discovery campaigns where serendipity and surprise are part of the brand moment
Lead generation activations where a personalized reward increases form completion
Mobile-first campaigns — the card flip mechanic is highly engaging on touch devices
Short-session experiences where users should reach an outcome quickly
Common Business Goals
Product Discovery
Lead Generation
Engagement
Personalization
Example Use Cases
Beauty / Haircare: match to a product recommendation based on the pair found
Skincare: flip cards to reveal your perfect serum, moisturizer, or treatment
Retail / Ecommerce: discover a recommended product through a branded card game
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience and invites the user to start matching. |
Screen 2 — Memory Match | Displays 12 face-down cards (6 pairs) in a grid. Cards briefly preview their front at load, then flip back. The user taps cards to flip them. When two flipped cards match, confetti fires and the game advances to the Outcome screen. Non-matching cards flip back after a brief delay. |
Screen 3 — Outcome | Displays the personalized product recommendation based on which pair the user matched first. All content is dynamically populated from the Outcome panel. |
Step 1: Apply Your Brand Styling
The first step is to replace the template branding with your own. If your Style Guide is already created, this will happen automatically during template creation.
Review and update:
Colors
Fonts
Logos
Background Images
Buttons
Imagery
Applying your branding 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.
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.
Step 2: Customize the Introduction Screen
The introduction screen should clearly communicate the mechanic and create excitement for the game.
Review and Update
Headline — communicate what the user will do
Description — hint at the product recommendation mechanic without spoiling it
CTA button text and color
Background and logo
Best Practice
Keep the intro mysterious. The appeal of this experience is that the user doesn't know which product they'll be matched to. Describe the mechanic (flip two cards, find a match) without listing the possible outcomes.
Step 3: Update the Card Grid
The Memory Match screen displays 12 cards in a grid — 6 unique pairs, each pair consisting of two cards with the same product image. The cards are shown face-down to the user. A brief preview on load gives users a glimpse of the front faces before they flip back.
✅ YOU CAN EDIT:
|
Card Naming Convention — Critical
The game engine identifies matching pairs by comparing the text labels on each card, stripping out any numeric suffix. This means each pair must follow a strict naming convention:
name-01 and name-02 → matched as a pair
Examples from the default template:
shampoo bottle 01 / shampoo bottle 02 → paired
hair mask jar 01 / hair mask jar 02 → paired
oil dropper 01 / oil dropper 02 → paired
hair dryer 01 / hair dryer 02 → paired
curling iron 01 / curling iron 02 → paired
hair scrunchie 01 / hair scrunchie 02 → paired
⚠️ Important:
|
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.
Review and Update
Replace all 6 card pair images with your own product visuals
Update the text label on each card following the name-01 / name-02 convention
Update the card back design to match your brand
Update the game screen title and description
Best Practice
Use product images that are recognizable at a glance. Since cards briefly preview at load, the visual impression of the product in that moment should be strong enough to create desire. Clear product shots on a clean or branded background work better than lifestyle or environmental images.
Step 4: 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 Memory Match screen.
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:
Marketing consent language
Privacy policy references
Terms and conditions
Best Practice
Placing the lead capture screen before the game creates a gate before the experience. For high-engagement campaigns, place it after the game so users are invested before being asked for their details.
💡 Tip: Review what fields you can add to a lead capture screen with this article.
Step 5: Configure Results and Outcomes
The Outcome Screen displays the matched product recommendation dynamically. 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 pair the user matched.
✅ YOU CAN EDIT (from the Outcome panel):
|
Managing Outcomes
This template includes 6 pre-built outcomes, one per card pair. Each outcome corresponds to the product that will be recommended when a user finds that specific matching pair.
Each outcome entry includes:
Outcome Name — internal identifier; must match the card base name used in the Outcome Logic panel
Heading Name — the title displayed to the user on the outcome screen
Outcome Image — the product 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 6 default outcomes in this template are:
Outcome Name | Heading Name | Product / Description |
HYDRATING SHAMPOO | THE FRESH START | Hydrating shampoo — gentle on your scalp, powerful on buildup. |
REPAIR MASK | DEEP NOURISHMENT | Intensive repair mask — restores softness, smooths frizz in five minutes. |
NOURISHING HAIR OIL | THE GOLDEN TOUCH | Nourishing hair oil — locks in moisture, smooths flyaways, adds finishing glow. |
PROFESSIONAL HAIR DRYER | THE FINAL STYLE | Professional hair dryer — fast drying, frizz control, effortless smoothness. |
HEAT STYLING TOOL | THE STYLE SHAPER | Heat styling tool — precision heat for salon-worthy waves and curls. |
STYLING ACCESSORIES | THE FINISHING TOUCH | Scrunchies, clips, hairbands — protect your strands and elevate every look. |
Review and Update
Confirm the logic type is set to Matching
Outcome names and headings
Outcome images — replace with your own product photography
Outcome descriptions — write copy that speaks to the benefit of the matched product
Redirect URLs — link directly to the product page or relevant offer
CTA button text and color
Best Practice
The outcome is the most meaningful moment of the entire experience. The user has just found their match — their recommendation should feel personalized, specific, and action-oriented. Write outcome descriptions in second person ("Your hair thrives on...") and link directly to the product page, not a category or homepage.
Step 6: Configure Logic
Logic Type: Match-Based Outcome Mapping
How It Works
Each card pair is mapped to a specific outcome in the Outcome Logic panel. When a user finds a matching pair, the corresponding checkboxes are marked internally, which triggers the matching logic. The outcome associated with that pair is then displayed on the Outcome screen.
In the Outcome Logic panel, each card name is mapped 1-to-1 with an outcome:
shampoo bottle 01 and shampoo bottle 02 → HYDRATING SHAMPOO outcome
hair mask jar 01 and hair mask jar 02 → REPAIR MASK outcome
oil dropper 01 and oil dropper 02 → NOURISHING HAIR OIL outcome
hair dryer 01 and hair dryer 02 → PROFESSIONAL HAIR DRYER outcome
curling iron 01 and curling iron 02 → HEAT STYLING TOOL outcome
hair scrunchie 01 and hair scrunchie 02 → STYLING ACCESSORIES outcome
Configuration Steps
Navigate to Outcome Logic in the left panel
For each card name, assign 1 point to its corresponding outcome and 0 to all others
Both cards in a pair must be mapped to the same outcome
Save and validate using the Outcome Validator toggle
Logic Considerations
The Outcome Logic panel uses the full card name as it appears on the card (including the -01 / -02 suffix) as the response identifier
Both cards in a pair must be assigned the same outcome — if they map to different outcomes, the routing will be unpredictable
If you add new card pairs, add corresponding new outcomes and update the logic mapping
Step 7: Configure Additional Experience Elements
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 7: 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 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
Finding the first matching pair routes to the correct Outcome screen
Outcome content (heading, image, description) is correct for each pair
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Test Scenarios
Run the following test scenarios for each card pair:
Match the shampoo pair — confirm THE FRESH START outcome appears
Match the hair mask pair — confirm DEEP NOURISHMENT outcome appears
Match the oil dropper pair — confirm THE GOLDEN TOUCH outcome appears
Match the hair dryer pair — confirm THE FINAL STYLE outcome appears
Match the curling iron pair — confirm THE STYLE SHAPER outcome appears
Match the hair scrunchie pair — confirm THE FINISHING TOUCH outcome appears
Verify confetti fires on each successful match
Test on mobile — confirm the extended flip delay activates for touch devices
Best Practice
Test every card pair individually in separate Preview sessions. Each pair routes to a different outcome — all six paths must be verified before publishing.
Next Steps
Once testing is complete, your experience is ready to publish and generate launch links.
Continue optimizing by:
Reviewing which outcomes users are reaching most frequently in the Analytics dashboard
Updating outcome copy and product images to reflect current inventory or promotions
Adding a lead capture screen to collect emails before the game starts
A/B testing different card images to see which products drive higher engagement
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 after the first match is found?
As soon as the user finds one matching pair, the game engine submits the form internally, which triggers the Outcome Logic. The outcome associated with the matched pair is displayed on the Outcome screen. The user does not need to find all remaining pairs.
Can I change this to require all pairs to be matched?
Yes. The 'Match All' variant of this template requires the user to find all pairs before proceeding. Use the Match All template if you want users to complete the full board before seeing an outcome.
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?
The Match One variant does not use a timer. If you need a timed challenge, use the Match All variant instead.
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.