Overview
The Connection Game template is a word-grouping puzzle inspired by the NYT Connections format. Users are presented with 16 words arranged in a grid and must identify the four hidden groups of four words that share a common connection. They select four words at a time and submit their guess. If correct, the group is revealed and cleared from the board. If incorrect, they lose one of their four available lives.
Finding all four groups before running out of mistakes triggers the You Won screen. Running out of mistakes before solving all groups triggers the You Loose screen.
Preview the Experience: Connection Game Experience
This template includes:
Intro Screen — introduces the challenge and invites users to start
Connection Game Screen — the 16-word interactive puzzle grid with a lives counter and submit button
You Won Screen — displayed when the user finds all four groups before running out of mistakes
You Loose Screen — displayed when the user exhausts all four mistakes before solving every group
Before configuring logic or content, we recommend first applying your brand styling and then updating the word groups and categories to match your campaign.
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Brand or product knowledge challenges — test how well users know your category
Seasonal activations where themed word puzzles tie into a campaign moment
Engagement campaigns where time-on-experience and repeat visits are priorities
Audience qualification — users who complete the puzzle demonstrate category familiarity
Reward or unlock mechanics — completing the puzzle earns a discount, code, or exclusive access
Common Business Goals
Engagement & Time-on-Site
Lead Generation
Brand Awareness
Product Education
Promotional Activation
Example Use Cases
Fashion / Retail: group wardrobe items, style aesthetics, or trend categories
Beauty / Haircare: sort ingredients, product types, or routine steps into hidden groups
Food & Beverage: group flavors, ingredients, or dish types by a shared connection
Entertainment / Media: sort titles, characters, or genres by a hidden theme
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience, explains the rules, and invites the user to start. |
Screen 2 — Connection Game | Displays the 16-word grid. Users select 4 words at a time and submit their guess. Correct guesses are cleared from the board and revealed as a solved group. Incorrect guesses cost one life. |
Screen 3a — You Loose | Shown when the user runs out of 4 lives before finding all groups. Displays a consolation message and a CTA to try again. |
Screen 3b — You Won | Shown when the user finds all four groups before running out of lives. Displays the prize, a coupon code, and an optional CTA. |
Lives Counter | Displays 4 circles representing remaining lives. Each incorrect guess removes one circle. Managed by the game engine — no configuration needed. |
Submit Button | Becomes active only when exactly 4 words are selected. Submitting a correct group clears those tiles and adds a color-coded solved notification. Managed by the game engine. |
Confetti Animation | Triggered on the You Won screen. Powered by the canvas-confetti library, 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:
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
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.
Category Color Classes
Each of the four word groups is assigned a CSS class (cat-01, cat-02, cat-03, cat-04) that controls the color of the solved group notification block when a group is correctly identified. These classes can be customized via Custom CSS to match your brand palette.
Recommended Action
Complete all branding updates before updating the word groups or testing the game. Applying your style guide first makes it easier to visually validate the solved group colors and tile styling before content is finalized.
Step 2: Customize the Introduction Screen
The introduction screen should communicate the rules of the game clearly and excite the user about the challenge ahead.
Review and Update
Headline — state the challenge theme (e.g., "Style the Look", "Know Your Ingredients")
Subtitle — reinforce the mechanic (e.g., "Think in Fours", "Find the Connection")
Description — explain the rules: 16 words, 4 groups, 4 lives, find them all to win
CTA button text
Best Practice
Keep the rules simple on the intro screen. The core mechanic needs only two sentences: what to do (find 4 groups of 4 words with a shared connection) and what's at stake (run out of mistakes and you lose). Let curiosity do the rest.
Step 3: Update the Word Groups
The word groups are the core content of this template. They define what users see in the grid and determine whether the game is engaging, fair, and on-brand.
The game grid is built from a structured list defined directly in the screen editor. Each group contains a category name and exactly 4 words. The template with pre-loaded default group that you can edits:
Update the Connection Groups
The Connection Game content is stored in a hidden HTML list within the screen. To update the categories and words:
Open the Connection Game screen in the Builder.
Highlight all of the default connection groups shown on the screen.
Once the text is selected, the inline formatting toolbar will appear.
Select the Code View icon (the furthest-right option in the toolbar). This opens the HTML that powers the game.
Locate the hidden list element with the ID
connections.Update the content:
Replace the category names inside the
<h3>tags.Replace the four words for each category inside the
<li>tags.
Repeat for each category until all of your groups have been updated.
Important requirements
Each category must contain exactly four words or phrases. The game engine requires four items per group to function correctly.
Do not remove or rename the class names (
cat-01,cat-02,cat-03, andcat-04). These classes control the color of the solved category notification that appears after a player completes a group.Only replace the category names and list items. Leave the surrounding HTML structure unchanged to ensure the game continues to work properly.
✅ YOU CAN EDIT:
|
Designing Good Word Groups
The quality of the word groups determines the difficulty and engagement of the game. Guidelines to follow:
Each word must belong to exactly one group — ambiguous words that could fit multiple categories will confuse users and feel unfair
All 16 words should feel plausibly related at first glance — the fun comes from sorting through misleading overlaps
Include at least one "trap" — a word that seems to belong to one group but actually belongs to another
Category names should be revealed only when a group is solved — avoid using the exact category name as one of the words
Keep all words short — 1 to 3 words maximum. Long phrases make the grid hard to read
Best Practice
Draft your 16 words and 4 categories before opening the editor. Test them with a colleague — if they can solve all 4 groups without hints in under 5 minutes, the difficulty is well-calibrated. If they struggle with more than one group due to unclear categorization, revise the word list.
Step 4: Configure Additional Experience Elements
Lives Counter
The game engine provides 4 lives by default. Each incorrect guess removes one life circle. When all 4 lives are lost, the You Loose screen is triggered automatically. The lives counter is managed entirely by the game engine and does not require configuration.
The maximum number of mistakes (lives) is set to 4 in the game engine. Changing this value requires modifying the Custom Javascript on the Connection Game screen and is subject to Javascript Hook permissions.
Confetti Animation
The You Won screen triggers a confetti burst animation when the user successfully finds all four groups. This animation is powered by the canvas-confetti library, 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 (requires JS Hook permissions)
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
|
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 Connection Game screen, or between the game screen and the result screens.
Placement Options
Before the game — collect email before the user plays. Lower conversion but higher data quality since users haven't yet invested time
After the game (before the result) — highest motivation point. Users who just completed a puzzle are engaged and willing to submit their email to claim the reward
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
Best Practice
Placing the lead capture screen immediately after the game but before the prize reveal is the highest-converting placement. Users who have just solved (or attempted) the puzzle are primed to exchange their email for the reward.
Step 6: Configure Results Screens
This template uses a completion-based outcome structure. The user is routed to You Won if they find all four groups before running out of lives, or to You Loose if they exhaust all four mistakes first.
You Won Screen (3b)
✅ YOU CAN EDIT:
|
You Loose Screen (3a)
✅ YOU CAN EDIT:
|
Review and Update
Outcome titles 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
Make the You Loose screen feel encouraging rather than punishing. A "Try Again" CTA that reloads the puzzle gives users a second chance to earn the reward — repeat engagement is a positive outcome even when users don't win on the first attempt.
Step 7: Configure Logic
Logic Type: Completion-Based Routing
How It Works
This template does not use scoring or weighted probability logic. Routing is determined entirely by the game engine:
If the user finds all 4 groups before running out of lives → You Won screen
If the user exhausts all 4 lives before solving all groups → You Loose screen
There are no outcome weights to configure. The Outcome panel is not used in this template — routing is handled entirely by the game engine's built-in win and loss detection.
Logic Considerations
Difficulty is controlled by word group design — harder connections and more misleading overlaps make the game more challenging
The number of lives (4 by default) can be changed in the Custom Javascript, but this requires Javascript Hook permissions
The game grid is shuffled randomly on every load, so the 16 words always appear in a different order
There is no partial win — the user must solve all 4 groups to win; solving 3 out of 4 and running out of lives routes to the You Loose screen
Best Practice
Calibrate word group difficulty to your audience's familiarity with your category. An audience with deep product knowledge can handle more subtle connections. A general audience needs clearer categories with only one or two misleading crossovers. Test with 3–5 people before publishing.
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
All 16 words display correctly in the game grid
Each group of 4 words resolves correctly when submitted
Incorrect guesses reduce the lives counter by one
Solving all 4 groups routes to the You Won screen and triggers confetti
Exhausting all 4 lives routes to the You Loose screen
Solved group notification blocks display the correct category name and color
Coupon code display (if applicable)
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Test Scenarios
Run the following test scenarios to verify correct behavior:
Submit a correct group — confirm the tiles are cleared, a color-coded notification appears, and the lives counter is unchanged
Submit an incorrect group — confirm one life is removed from the lives counter
Solve all 4 groups — confirm the You Won screen appears and confetti fires
Make 4 incorrect guesses without solving all groups — confirm the You Loose screen appears
Try Again from the You Loose screen — confirm the game reloads with a reshuffled grid
Best Practice
Play the game yourself multiple times with fresh eyes before publishing. What feels obvious to the person who built the groups is often not obvious to a first-time user. If you solve all 4 groups on your first attempt without hesitation, the game may be too easy. Introduce at least one word that creates genuine uncertainty.
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 win/loss rates in the Analytics panel — if too few users win, consider simplifying one or two group connections
Refreshing the word groups periodically to keep the experience novel for repeat visitors
Adding a lead capture screen to tie the reward delivery to email opt-in
Updating the coupon code or prize value on the You Won screen to align with active promotions
A/B testing different game themes (e.g., product names vs. product benefits) to see which drives higher completion rates
For additional assistance, refer to the platform documentation or contact your support team.
Frequently Asked Questions
Does every group need exactly 4 words?
Yes. The game engine is built around a 4×4 grid — 4 groups of 4 words each, for a total of 16 words. Groups with fewer or more than 4 words will cause the game to behave incorrectly.
Can I change the number of lives?
Yes, but this requires modifying the Custom Javascript on the Connection Game screen. The default is 4 lives. Changing this value requires Javascript Hook permissions on your account.
What happens if two words could belong to the same group?
The game engine compares the user's selection against the exact predefined group. If a word can plausibly belong to two groups but is only assigned to one, users may feel the categorization is unfair. Always ensure each word belongs unambiguously to exactly one group when you finalize your word list.
Can I add a lead capture screen?
Yes. A lead capture screen can be added before or after the game screen. Placing it after the game but before the prize reveal creates the highest motivation to complete the form.
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.
Can I use the same word in two different groups?
No. Each word must appear exactly once in the grid. Duplicate words will cause the game engine to behave unpredictably.
Can I change the category colors?
Yes. The four category classes (cat-01 through cat-04) control the color of the solved group notification blocks. You can update these colors via Custom CSS on the Connection Game screen without needing Javascript Hook permissions.