Pick The Pair

Interactive pair matching game that challenges users to match related items from two columns. Features two game modes (casual and challenge), optional countdown timer, real-time accuracy tracking, and customizable templates. Perfect for educational quizzes, trivia games, and engaging brand experiences.

<div
	data-component="fu-widget"
	data-content-type="pick-the-pair"
	data-content-id="your-pick-the-pair-id"
	data-layout-template="LANDING_PAGE"
	data-lead-fields="fullName,email"
	data-campaign-id="pick-pair-campaign"
></div>

Configuration Attributes

Attribute	Description	Options/Format	Default
`data-layout-template`	Visual layout of the game	`"STANDARD"`, `"LANDING_PAGE"`, `"OVERLAY"`	`"LANDING_PAGE"`
`data-image-position`	Position of images (STANDARD template only)	`"left"`, `"right"`	Config default
`data-lead-fields`	Lead collection fields	Comma-separated: `"fullName,email,phoneNumber"`	Config default
`data-lead-position`	When to show lead form	`"before"`, `"after"`	`"after"`
`data-campaign-id`	Campaign identifier for lead tracking	Any string	Config default
`data-campaign-name`	Campaign name for lead tracking	Any string	Config default

Features

Two Game Modes: Casual (relaxed matching) and Challenge (accuracy-based with success threshold)
Countdown Timer: Optional time-limited challenges with visual countdown
Accuracy Tracking: Real-time statistics in Challenge mode showing attempts, accuracy percentage, and success threshold
Visual Feedback: Immediate feedback for correct/incorrect matches with color-coded indicators
Dynamic Image Reveal: Images are revealed as users make selections
Three Responsive Templates: Standard, Landing Page, and Overlay layouts
Lead Collection: Integrated lead capture with customizable fields and positioning
Custom Theming: Full branding and theme customization support
Mobile Optimized: Responsive design for all screen sizes

Templates

The Pick The Pair widget supports three distinct templates.

Standard Template

Traditional card-based layout with clear separation between game area and branding
Supports data-image-position attribute to control image placement ("left" or "right")
Best for embedding within existing page layouts

<div
	data-component="fu-widget"
	data-content-type="pick-the-pair"
	data-content-id="your-pick-the-pair-id"
	data-layout-template="STANDARD"
	data-image-position="left"
></div>

Landing Page Template (Default)

Full-width design optimized for standalone pages with prominent branding
Immersive experience with larger visual elements
Ideal for dedicated campaign pages

<div
	data-component="fu-widget"
	data-content-type="pick-the-pair"
	data-content-id="your-pick-the-pair-id"
	data-layout-template="LANDING_PAGE"
></div>

Overlay Template

Full-screen immersive experience with background image and overlay effects
Maximum visual impact for high-engagement campaigns
Perfect for modal or popup implementations

<div
	data-component="fu-widget"
	data-content-type="pick-the-pair"
	data-content-id="your-pick-the-pair-id"
	data-layout-template="OVERLAY"
></div>

📘
Note: The data-image-position attribute only applies to the STANDARD template. Landing Page and Overlay templates use fixed layouts optimized for their respective use cases.

Game Modes

Pick The Pair supports two distinct game modes configured in the Management Portal.

Casual Mode

Relaxed matching experience without scoring pressure
No accuracy requirements or success thresholds
Players can take their time to match all pairs
Perfect for educational content and brand awareness campaigns

Challenge Mode

Competitive experience with accuracy tracking and success requirements
Success threshold requirement (configurable percentage in Management Portal)
Real-time statistics display showing:
- Total attempts made
- Current accuracy percentage
- Success threshold indicator (color-coded: green when met, red when not met)
- Matched pairs count
Players must meet the accuracy threshold to successfully complete the game
Ideal for competitive campaigns, skill-based challenges, and gamified experiences

Countdown Timer

Enable time-limited challenges with the countdown timer feature.

Configuration:

Timer is configured in the Management Portal under Pick The Pair settings
Set time limit in seconds (e.g., 60 for one minute, 300 for five minutes)
Set to 0 for no time limit (unlimited time)

Behavior:

Timer starts automatically when the game loads
Visual countdown displays remaining time in MM:SS format
Updates in real-time with branding colors
When time expires:
- All selections are disabled
- "Time's Up" overlay is displayed
- Players cannot continue matching
- Submit button becomes disabled
- Game ends automatically

Use Cases:

Create urgency and increase engagement
Add competitive element to challenges
Limit game duration for timed campaigns
Encourage quick decision-making

Accuracy Tracking (Challenge Mode)

In Challenge Mode, the component tracks and displays detailed statistics.

Tracked Metrics:

Total Attempts: Number of match attempts made
Correct Matches: Successfully matched pairs
Incorrect Attempts: Failed match attempts
Accuracy Percentage: (Correct Matches / Total Attempts) × 100
Success Threshold: Required accuracy percentage to proceed (configured in Management Portal)

Visual Indicators:

Real-time accuracy display updates with each attempt
Color-coded threshold indicator:
- Green: Accuracy meets or exceeds threshold
- Red: Accuracy below threshold
Progress bar showing matched pairs vs. total pairs
Clear messaging when threshold is met or not met

Lead Collection

The Pick The Pair widget supports comprehensive lead collection:

<div
	data-component="fu-widget"
	data-content-type="pick-the-pair"
	data-content-id="your-pick-the-pair-id"
	data-lead-fields="fullName,email,phoneNumber"
	data-campaign-id="summer-campaign-2024"
	data-campaign-name="Summer Pick The Pair Challenge"
></div>

📘
See Features → Lead Collection for the full reference.

Implementation Tips

Choose the Right Template: Use STANDARD for embedded experiences, LANDING_PAGE for dedicated pages, and OVERLAY for maximum impact.
Set Appropriate Time Limits: Balance challenge with user experience — too short frustrates users, too long reduces urgency.
Configure Success Thresholds Carefully: In Challenge mode, set realistic thresholds (e.g., 70–80%) that challenge users without being impossible.
Test on Mobile: Ensure matching interactions work smoothly on touch devices.
Provide Clear Instructions: Use the game description to explain matching rules and objectives.
Consider Game Difficulty: Balance the number of pairs and similarity of items based on your audience.