Overview
The Plinko Game template is a classic drop game where users release a ball from the top of a peg board and watch it bounce through a grid of obstacles before landing in one of several prize slots. The slot where the ball lands determines the outcome—win or lose. Because each drop follows a different path, every play feels unpredictable and exciting.
This template includes:
Intro Screen — introduces the game and invites users to play
Plinko Game Screen — the live physics board with a "Drop the Ball" button, peg grid, and prize slots
You Won Screen (3a) — displayed when the ball lands in a winning slot
You Loose Screen (3b) — displayed when the ball lands in a losing slot
Preview the experience: Plinko Game Experience
Before configuring logic or content, we recommend first applying your brand styling and then updating the prize slots and outcome screens to match your campaign.
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Promotional campaigns where chance and anticipation are part of the brand moment
Prize reveals where the journey to the result is as engaging as the outcome itself
Seasonal activations — the board image and theme can be adapted to any campaign aesthetic
Reward mechanics where win/lose probability needs to feel fair and uncontrollable
High-engagement activations where users spend more time than a standard quiz or form
Common Business Goals
Engagement & Time-on-Site
Lead Generation
Promotional Activation
Brand Awareness
Data Collection
Example Use Cases
Sports / Entertainment: drop a ball through a court-themed board to win an exclusive offer
Retail / Ecommerce: plinko drop to reveal a discount tier or free shipping offer
CPG / FMCG: branded prize board tied to a seasonal promotion or product launch
Media / Publishing: interactive moment tied to a live event, game day, or editorial campaign
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience, explains the mechanic, and invites the user to play. |
Screen 2 — Plinko Game Screen | Displays the physics board with a peg grid, a ball drop button, and prize slots at the bottom. The user taps "Drop the Ball" once — the ball falls through the pegs and lands in a slot, which triggers the outcome. |
Screen 3a — You Won | Shown when the ball lands in a winning slot. Displays the prize value, a coupon code, and an optional CTA. |
Screen 3b — You Loose | Shown when the ball lands in a losing slot. Displays a consolation message and a CTA to try again. |
Physics Engine (Matter.js) | Simulates real ball physics — gravity, peg collisions, bouncing, and slot detection. Already injected via Javascript Hooks. The board canvas, peg layout, and ball behavior are all controlled by the game engine configuration. |
Prize Slots | Buttons at the bottom of the board, each mapped to an outcome. The ball's landing position determines which slot button is triggered. Win/lose routing is set on the slot buttons via the screen editor. |
Confetti Animation | Triggered on the You Won screen. Powered by canvas-confetti, already injected via Javascript Hooks. |
Understanding how these pieces work together will make customization easier.
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:
Board background image — the image displayed behind the peg grid (default: basketball court). This is the primary visual element of the game and should reflect your campaign theme
Page background — the screen background behind the board card
Ball color — configurable via the game engine initialization script
Peg color — configurable via the game engine initialization script
Logo — replace the BlueConic logo at the top with your own brand logo
Board Background Image
The board background image is loaded from an image element on the Plinko Game screen (inside the .canvas-bg-wrapper element). To change it, replace the image in the screen editor. The physics engine reads the image source at runtime and renders it as the canvas background — no code change is required to swap the image itself.
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
Choose a board background image before anything else. The visual theme of the board sets the tone for the entire experience — a basketball court, a branded product flat lay, a seasonal scene, or a textured surface all work well. The image should be visually interesting but not so busy that it makes the pegs and ball hard to see.
Step 2: Customize the Introduction Screen
The introduction screen should communicate the mechanic clearly and create anticipation for the drop.
Review and Update
Headline — communicate what the user will do and what they can win
Description — explain the mechanic in one to two sentences ("Drop the ball. See where it lands. Win a prize.")
CTA button text and color
Background and logo
Best Practice
Keep the intro screen short. The Plinko mechanic is self-explanatory once users see the board — use the intro to build anticipation and communicate the prize, then get them to the game as quickly as possible.
Step 3: Customize the Plinko Game Screen
The Plinko Game screen is the core interaction of this experience. The user has one chance to drop the ball — it falls through the peg grid, bounces unpredictably, and lands in one of the prize slots at the bottom.
✅ YOU CAN EDIT:
|
Prize Slots and Outcome Routing
The prize slots at the bottom of the board are buttons. Each button is mapped to a win or lose pathway. When the ball lands in a slot, the corresponding button is triggered automatically by the game engine, which routes the user to the appropriate result screen.
The default template has 4 slots. To control win/lose probability:
Assign more slots as losing slots and fewer as winning slots to lower the win rate
Assign more slots as winning slots to increase the win rate
To add more slots select the container, click the blue plus button and add image button
Slot assignment is configured via the image button labels in the screen editor — no code change required for standard win/lose routing. The routing is simply based on labeling the image buttons win or loose. Please note that the button image label text is currently set to transparent.
Update the Peg and Ball Colors
The Plinko game allows you to customize the colors of both the pegs and the ball using the screen's JavaScript.
From the builder map, hover over the Plinko Game screen.
Select the three-dot menu on the screen and choose Edit JavaScript.
In the JavaScript editor:
Locate the Peg Color setting (around line 12).
Locate the Ball Color setting (around line 14).
Replace the existing color values with your desired colors. Color values should be entered as hex codes (for example,
#015FFF).Save your changes and preview the experience to confirm the new colors appear as expected.
Best Practice
Choose a prize slot visual that fits your campaign theme. In the default template, basketball hoops are used. For a retail brand you might use product icons; for a holiday campaign, wrapped gift boxes. The slot visuals reinforce the theme and make the game feel more polished and branded.
Step 4: Configure Additional Experience Elements
Physics Libraries
This template requires two libraries to be injected via the Javascript Hooks panel for the game to function correctly. Both are already pre-configured in the template.
To confirm both libraries are loaded:
Click the three-dot menu (⋮) on the experience
Select "Edit Javascript Hooks"
Confirm the following two URLs are listed under Inject JS Libraries:
The first library (matter.min.js) powers the physics engine — ball movement, gravity, peg collisions, and slot detection. The second library (confetti.browser.min.js) powers the confetti animation on the You Won screen. Both must be present for the experience to work correctly.
Review and Update
Confirm both libraries are listed in the Inject JS Libraries tab
Do not remove or reorder either library — the physics engine must load before the game script runs
Best Practice
Never remove either library. If the Matter.js library is missing, the game board will not render and no ball can be dropped. If the confetti library is missing, the You Won screen will produce a JavaScript error.
⚠️ 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 Plinko Game screen, or between the game screen and the result screens.
Placement Options
Before the game — collect email before the user plays. Lower friction for the user but lower conversion since they haven't yet invested in the experience
After the game (before the result) — highest motivation point. Users who just dropped the ball are eager to see their result and willing to exchange their email for it
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 after the ball drops but before the result is revealed creates the highest motivation for form completion. The suspense of "where did it land?" is a powerful incentive to share an email address.
Step 6: Configure Results Screens
This template uses a slot-based outcome structure. The ball's landing position determines which slot button is triggered, which in turn routes the user (via branching from the builder map) to either the You Won or You Loose screen.
You Won Screen (3a)
✅ YOU CAN EDIT:
|
You Loose Screen (3b)
✅ YOU CAN EDIT:
|
Review and Update
Outcome headlines and descriptions on both screens
Prize value or reward text on the You Won screen
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. The "Try Again" CTA reloads the experience and gives users another drop — this drives repeat engagement and increases the overall number of prize distributions.
Step 7: Configure Logic
Logic Type: Slot-Based Random Outcome
How It Works
This template does not use a scoring system or weighted probability table. The outcome is determined entirely by physics — where the ball lands is a product of gravity, peg collisions, and random variation in the ball's starting position.
Each prize slot at the bottom of the board is a button linked to a results screen:
Slots linked to the You Won screen → winning outcome
Slots linked to the You Loose screen → losing outcome
Win probability is controlled by the ratio of winning slots to losing slots. With 4 slots, assigning 1 as winning and 3 as losing gives approximately a 25% win rate. Assigning 2 as winning gives approximately a 50% win rate.
Adjusting Win Probability
To increase the win rate — assign more slot buttons to the You Won screen outcome
To decrease the win rate — assign fewer slot buttons to the You Won screen outcome
Slot button actions are configured directly in the screen editor — no code change required
Changing the total number of slots (adding or removing slots) requires updating the game engine configuration in the Custom Javascript and is subject to Javascript Hook permissions
Logic Considerations
The ball's starting X position has a small random offset on every drop — no two drops follow the exact same path
The physics simulation is real-time — the outcome cannot be predetermined or guaranteed
Users cannot influence where the ball lands by timing their button tap — the drop button is disabled after a single click
Best Practice
Set your win/lose slot ratio before publishing and test it by running the experience multiple times in Preview mode. Because the outcome is physics-driven, win rates are probabilistic — test at least 10–20 drops to get a reliable sense of the actual win distribution.
Step 8: Test the Experience
Before publishing, complete a full testing pass to ensure everything works as expected.
Review
Branding and styling across all screens
Board background image renders correctly inside the canvas
Pegs are visible and the ball drops and bounces through them realistically
Drop button is disabled after the first click (one shot per session)
Ball landing in a winning slot routes to the You Won screen and triggers confetti
Ball landing in a losing slot routes to the You Loose screen
Coupon code display (if applicable)
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness — the canvas scales appropriately on smaller screens
Test Scenarios
Run multiple Preview sessions to verify:
The ball drops and physically interacts with the pegs on each drop
The ball lands in a slot and the correct outcome screen appears
The Drop button cannot be clicked a second time after the ball is dropped
The confetti animation fires on the You Won screen
Clicking Try Again reloads the game for another drop
Best Practice
Run at least 10 test drops across multiple Preview sessions to validate that the win/lose slot distribution matches your intended probability. Physics-based games have natural variance — a single test drop is not sufficient to confirm correct routing behavior.
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 slot ratio if needed
Updating the board background image to match new campaign themes or seasonal moments
Adding a lead capture screen to collect emails before revealing the result
Updating the coupon code or prize value on the You Won screen to align with active promotions
A/B testing different intro screen copy to see which framing drives higher play rates
For additional assistance, refer to the platform documentation or contact your support team.
Frequently Asked Questions
Can users cheat or influence where the ball lands?
No. The ball's landing position is determined entirely by physics simulation. The drop button is disabled after the first click, so the user has exactly one drop per session. The ball's starting horizontal position has a small random offset on each drop, ensuring no two paths are identical.
How do I control the win probability?
Win probability is set by the ratio of winning slots to total slots. With 4 slots, 1 winning slot gives approximately 25% win rate; 2 winning slots give approximately 50%. Assign slot buttons to their respective outcome screens (You Won or You Loose) directly in the screen editor.
Can I change the number of slots?
Yes, but this requires modifying the slots value in the game engine configuration in the Custom Javascript on the Plinko Game screen. This requires Javascript Hook permissions on your account.
Can I change the ball or peg color?
Yes. Ball color and peg color are set in the game engine initialization script on the Plinko Game screen. Updating these values requires Javascript Hook permissions on your account.
Can I change the board background image?
Yes. The board background image is an image element in the .canvas-bg-wrapper on the Plinko Game screen. Replace it directly in the screen editor. No code change is required to swap the image.
What happens if I remove the Matter.js library?
The game board will not render and no ball can be dropped. Matter.js is the physics engine that powers all ball movement, peg collisions, and slot detection. It must remain injected for the game to function.
Can I add a lead capture screen?
Yes. A lead capture screen can be added before the game or after the ball drops but before the result is revealed. Placing it after the drop creates the highest motivation for form completion.
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. This requires Javascript Hook permissions on your account.