Overview
This template includes:
Intro Screen — introduces the experience and invites users to start
Scratch Screen — presents 1 or more scratch cards for the user to interact with
You Won Screen — displayed when the user wins
You Lose Screen — displayed when the user does not win
Before configuring logic or content, we recommend first applying your brand styling and updating the experience copy.
Preview the experience: Scratch Off Template 🔗
⚠️ Note on JavaScript Permissions This template includes custom JavaScript that powers the scratch interaction and the confetti animation. These scripts are already pre-configured and do not need to be modified for standard use.
If you need to modify or remove any JavaScript — for example, to change the confetti colors or disable the animation — you will need Javascript Hook permissions enabled on your account. Contact your BlueConic administrator or Customer Success Manager if you do not have access to the Javascript Hooks panel. |
When to Use This Template
This template is ideal for:
Promotions and giveaways with a win/lose mechanic
Discount or coupon reveals tied to a campaign
Seasonal or event-based activations (holiday, Black Friday, product launches)
Lead generation with an incentivized reward at the end
Re-engagement campaigns that reward returning users
Common Business Goals
Lead Generation
Audience Segmentation
Engagement & Time-on-Site
Promotional Activation
Data Collection
Example Use Cases
Retail / Ecommerce: scratch to reveal a discount code or free shipping offer
CPG / FMCG: promotional campaign tied to a product purchase or loyalty program
Media / Publishing: engagement activation with a prize draw or content unlock
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience, sets expectations, and invites the user to start scratching. |
Screen 2 — Scratch Screen | Displays 1 or more scratch cards. The user selects one card and scratches to reveal what is hidden underneath. |
Screen 3a — You Won | Shown when the user scratches a winning card. Displays the prize, discount value, or coupon code. |
Screen 3b — You Lose | Shown when the user scratches a losing card. Offers a consolation message and optional CTA to try again. |
Confetti Animation | Triggered on the You Won screen to celebrate the user's result. Powered by the canvas-confetti library. |
Understanding how these pieces work together will make customization easier.
Creating an Experience from This Template
To launch this template:
Navigate to Builder → Template Gallery.
Locate the template in the Gamification section in 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 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.
Click Apply to update all screens.
Recommended Action
Complete all branding updates before modifying copy, logic, or outcomes. Applying your style guide first makes it easier to visualize the final experience before updating content. Review Style Guide Overview for more details and instructions.
Step 2: Customize the Introduction Screen
The introduction screen sets the tone for the entire experience. It should communicate the value clearly and motivate users to participate.
Review and Update
Headline — state what the user will do (e.g., 'Scratch to Win', 'Try Your Luck')
Supporting copy — describe the prize or the experience
CTA button text — use action-oriented language
Background image or gradient
Best Practice
Keep the intro screen short and action-oriented. Users should immediately understand what to do and what they might win. Avoid lengthy copy — let the scratch mechanic speak for itself.
Step 3: Customize the Scratch Screen
The Scratch Screen is the core interaction of this experience. Users select one card and scratch the surface to reveal what is hidden underneath.
✅ YOU CAN EDIT:
|
How Winning and Losing Cards Work
Unlike other templates that use an outcome or logic configuration screen, the Scratch Off template uses branching to determine whether a user wins or loses.
Each scratch card is connected to either the You Won screen or the You Lose screen. When a user scratches a card, they are automatically routed down the branch associated with that card.
Understanding the Scratch Card Components
The scratch card consists of two image elements:
Scratch Surface (Visible Face)
The large BlueConic logo image shown in the template is the scratch surface that users see before scratching. This image can be replaced with any branded graphic, promotional artwork, product image, or campaign creative.
Winning and Losing Reveal Images
The other images within the scratch cards represent the hidden images revealed after scratching. These determine whether the card is a winning or losing card and can be replaced with any image you would like users to reveal.
Configuring Winning and Losing Cards
Navigate to the Scratch Screen.
Select a scratch card (image button).
Click the scratch surface image to update the visible image users will scratch.
Click the reveal image to update the hidden winning or losing image.
Verify the card is connected to the correct outcome path.
Repeat for any additional cards.
Best Practice
Use visually rich scratch surfaces — textured, branded, or thematic images increase the perceived excitement of the reveal. Avoid plain or flat colors on the card face.
Step 4: Configure Additional Experience Elements
Confetti Animation
The You Won screen triggers a confetti burst animation to celebrate the user's win. This animation is powered by the canvas-confetti library, which is already injected into the template 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:
Review and Update
Confirm the confetti library is injected (Inject JS Libraries tab)
Confetti colors are pre-configured to a purple/white palette — they can be updated in the On Show script if needed
Best Practice
Do not remove the confetti library injection. The confetti function is called from the You Won screen's On Show script — if the library is missing, the screen will produce a JavaScript error.
⚠️ Javascript Hook Permissions Required Accessing the Javascript Hooks panel — including viewing injected libraries and On Show / On Respond scripts — requires Javascript Hook permissions to be enabled on your account. This is not a standard permission and must be granted by a BlueConic administrator.
If you need to update or remove any JavaScript in this template, contact your BlueConic administrator or Customer Success Manager to request access. |
Step 5: Configure the Lead Capture Screen
This template does not include a dedicated lead capture screen by default. You can add one between the Scratch Screen and the results screens if you want to collect user information before revealing the outcome.
Form Fields
If you add a lead capture screen, 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. Placing the lead capture screen before the result reveal creates a higher incentive to complete the form.
💡 Tip: Review what fields you can add to a lead capture screen with this article.
Step 6: Configure Results Screens
This template uses a Win/Lose outcome structure. When a user scratches a card, they are routed to either the You Won screen or the You Lose screen.
You Won Screen (Outcome 3a)
✅ YOU CAN EDIT:
|
You Lose Screen (Outcome 3b)
✅ YOU CAN EDIT:
|
Review and Update
Outcome titles and descriptions
Prize value or reward text
Coupon code (static or dynamic)
CTA buttons and labels
Background images or colors
Best Practice
Even on the losing screen, ensure there is a meaningful next step for the user — a CTA to shop, sign up, or try again keeps engagement alive and reduces drop-off.
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
Content updates (headlines, descriptions, CTA labels)
Scratch interaction on both desktop and mobile
Win/Lose outcome routing
Confetti animation on the You Won screen
Coupon code display (if applicable)
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Test Scenarios
Run multiple test scenarios to verify:
Scratching a card routes correctly to the You Won screen
Scratching a card routes correctly to the You Lose screen
The confetti animation fires on the You Won screen
Only one card can be scratched (additional cards are blocked after the first scratch)
The experience renders correctly on mobile devices
Best Practice
Test edge cases including: previewing the experience with different browsers, testing the scratch interaction on a touch device, and verifying the logic by running the experience at least 5–10 times.
Next Steps
Once testing is complete, your experience is ready to publish and generate launch links.
Continue optimizing by:
Monitoring win/lose ratios in the Analytics panel and adjusting probability if needed
A/B testing different scratch card surface images to see which drives higher engagement
Adding a lead capture screen to tie prize delivery to email opt-in
Configuring outcome URLs to redirect winners to a checkout or redemption page
For additional assistance, refer to the platform documentation or contact your support team.
Frequently Asked Questions
How does this template determine the win or lose result?
The result is determined by weighted probability logic configured in the Outcome panel. When a user scratches a card, the system randomly assigns a Win or Lose outcome based on the weights you set. The card selection itself does not influence the result — all cards are equivalent.
Can I add more scratch cards?
Yes. The Scratch Screen layout supports 1, 3, or more cards. You can add additional card elements from the screen editor. Keep in mind that only one card can be scratched per session regardless of how many cards are displayed.
Can I modify the lead capture form?
A lead capture screen is not included by default but can be added between the Scratch Screen and the outcome screens. Once added, you can customize it with any combination of standard and custom form fields.
Can I change the win probability?
Yes. Navigate to Outcome Logic and adjust the probability weights for the You Won and You Lose outcomes. The total weight across all outcomes must sum to 100%.
Can I change the design of the scratch cards?
Yes. The scratch card surface (the visible front face) is fully customizable. You can replace it with any image — a branded texture, seasonal graphic, product image, or holographic pattern. The hidden layer underneath is revealed when the user scratches.
Can I remove the confetti animation?
Yes. The confetti animation is triggered from the You Won screen's On Show script. You can disable it by removing the triggerConfetti() call from that script, or by removing the canvas-confetti library from the Javascript Hooks panel.