Home > Management Portal Features > Pick The Pair Game > How to Create Pick the Pair Games from Scratch

How to Create Pick the Pair Games from Scratch


Pick the Pair is a new matching game that challenges users to correctly pair items from two columns—perfect for testing knowledge about team achievements, player stats, historical facts, or any matching challenge you can imagine. Whether you're creating a casual game or a competitive challenge with scoring and time limits, Pick the Pair offers flexible options to engage your audience.

This guide will walk you through everything you need to know to create your first Pick the Pair game from scratch.

🎨 But First: See What You're Creating!

Before we dive into the details, let's show you what makes Pick the Pair special. This isn't just a new game type—it comes with a brand new widget template designed specifically for the matching experience. With the landing page template, you get a complete, ready-to-publish page that looks professional right out of the box.

In the screenshot below, you can see a fully functional Pick the Pair game using the landing page template—showcasing all the key elements including the header (which is your Main Image), dual-column matching interface (the game itself) and the already integrated lead form.


📖 Accessing Pick the Pair Games

Pick the Pair games are created through the Info Pages section:

  1. Select Info Pages from the left sidebar of the Portal
  2. Click on the Create button to start building your game

⚠️ CRITICAL: Setting Up Your Pick the Pair Type

Before you can create Pick the Pair games, you must first configure the correct Info Page type. This is a one-time setup that's essential for the game to work properly.

To configure the Pick the Pair type:

  1. While in the Info Page interface, click on the Configuration tab (next to Info Pages)
  2. You'll see the Types configuration area where you can create different Info Page types
  3. Create a new type with these exact settings:
    • ID: pick-the-pair (must be exactly this—no variations!)
    • Label: Pick the Pair (recommended for clarity, though this can be customized)

Why is the ID so important? The Pick the Pair widget looks specifically for the pick-the-pair ID to function correctly. Using any other ID will prevent your game from working. While other Info Page types allow flexibility with IDs, Pick the Pair requires this exact identifier.

Once you've created this type, it will appear in your Type dropdown when creating new games, and you'll only need to do this setup once.


📖 Creating Your Pick the Pair Game

Now that your type is configured, you're ready to create your first game:

  1. From the Info Pages overview, click Create
  2. Enter a Title (mandatory) - this appears as the main heading on your game
  3. Add a Subtitle (optional but recommended) - this description appears directly under the title to provide context or instructions
  4. Select your Type from the dropdown - choose the "Pick the Pair" type you configured earlier
  5. Choose your preferred view:
    • Form View (default) - user-friendly and preferable interface for most users
    • JSON View - for technical users who prefer working with code

📖 Understanding Game Modes

Pick the Pair offers two distinct game modes to match your objectives:

🎮 Casual Mode

  • No scoring system
  • Optional time limit (users can't submit the lead form after the time expires)
  • Perfect for educational content or relaxed engagement

🏆 Challenge Mode

  • Success threshold applied based on matching accuracy
  • Users cannot submit the lead form unless they achieve the predefined percentage of correct matched pairs
  • Optional time limit (can be enabled or not—your choice)
  • Competitive scoring encourages multiple attempts

Select the mode that best fits your campaign goals in the Mode dropdown. You can also configure the additional settings:

  • Time Limit: Set how long users have to complete the matching challenge (optional for both modes)
  • Success Threshold: Define the minimum percentage of correct matches required for form submission (Challenge Mode only)

📖 Configuring Your Pairs

This is where you define the matching challenges for your game. By default, 5 pairs are pre-filled, but you have complete flexibility:

  • Minimum: 2 pairs (required)
  • Maximum: Add as many pairs as you need for your game

For each pair, you'll configure:

Option A (Left Column)

  • Title: The primary text for this option (e.g., "Liverpool", "Manchester United")
  • Subtitle: Additional context that appears under the title (e.g., "How well do you know the Reds?")

Option B (Right Column)

  • Title: The matching statement or fact (e.g., "Has won the Champions League 6 times!")
  • Subtitle: Additional context that appears under the title (e.g., "They won the Champions League in 1977, 1978, 1981, 1984, 2005 and 2019")

💡 Example: If you're creating a Premier League knowledge game:

  • Option A Title: Liverpool
  • Option A Subtitle: How well do you know the Reds?
  • Option B Title: Has won the Champions League 6 times!
  • Option B Subtitle: "They won the Champions League in 1977, 1978, 1981, 1984, 2005 and 2019"

Users will then match "Liverpool" from the left column to "Has won the Champions League 6 times!" in the right column.


🖼️ Adding Images to Your Pairs

The options support optional image uploads. Images appear as circular icons within the matching interface, adding visual appeal and helping users identify items more quickly. In the example below, you can see how team logos/photos (like Liverpool and Chelsea) are displayed alongside the team names, making the game more engaging and easier to navigate.

To add images, simply use the Upload Image button within each pair's configuration.


📖 Display Order: Customize How Pairs Appear (Optional)

One of Pick the Pair's powerful features is the ability to control exactly how options appear in each column. This prevents users from simply matching items in order and makes the game more challenging.

In the Display Order section, you can:

  • Drag and reorder how Option A items appear in the left column
  • Separately drag and reorder how Option B items appear in the right column
  • Create different positions for matching pairs to increase difficulty

For example, you might display "Liverpool" first in the left column but place its matching fact ("Has won the Champions League 6 times!") last in the right column, requiring users to carefully read and think rather than easily match by position.


📖 Right Sidebar Configuration Options

As with all games in the Management Portal, Pick the Pair offers additional configuration options in the right sidebar:

🎨 Branding Customize the visual appearance and brand elements of your game. For a comprehensive guide on how branding works and all available customization options, see our Branding article.

⚙️ Configuration:

  • ID: Automatically generated unique identifier for your game
  • Language: Required field—select the language for your game. If languages aren't configured yet for your platform, navigate to Configuration → Language to set them up. Learn more in our Configuring Global Language Settings article.

🖼️ Images: Understanding where these images appear on the Widget UI is crucial:

  • Main Image: Displayed on the landing page AND standard templates
  • Cover Image: Appears in overlay template as the background IF you don't have branding -> background image configured
  • Branding Background Image: Takes priority over cover image in overlay templates if branding is configured

📖 Embedding Your Pick the Pair Widget

Once your game is configured and saved, you're ready to embed it on your platform:

  1. Scroll down in the game editing interface to the Widget embed code section on the right
  2. Select your preferred Configuration ID (if you've set up User-Centric Widget Configurations)
  3. Copy the generated embed code
  4. Paste the code into your CMS wherever you want the game to appear

For complete details on widget configurations and embedding options, check out our comprehensive guide: Widget Configurations: How to Set Up and Apply User-Centric Widget Configs.

🔍 Explore Live Examples: Want to see Pick the Pair in action before embedding? Check out your widgets with live data or with hardcoded examples and explore all configuration options in our Interactive Storybook - search for PickThePair to see the widget in different states and configurations.


📝 Important Notes

  • Unlike other widgets in our platform, Pick the Pair does not include a split template option. Due to the game's core functionality and dual-column matching interface, split templates wouldn't provide an optimal user experience. However, Pick the Pair introduces a brand new landing page template designed specifically for this game type—providing a complete, ready-to-publish page experience. You'll also have access to standard and overlay templates, all of which are specifically designed to showcase the matching challenge effectively.

  •  Lead Generation & Authentication: Pick the Pair games use lead-only authentication. Unlike some other games that offer free-to-play or registered-only options, Pick the Pair is designed specifically for lead generation—users must provide their information through a lead form to participate. This makes it an excellent tool for organizing campaigns—whether you're collecting leads for future engagement or running prize-based contests to drive participation.

 

Further Reading


 

👀 Prefer to Learn by Seeing? Your Visual Step-by-Step Guide


Step 1: Navigate to Info Pages

Start by locating Info Pages in the left sidebar of the Management Portal. 

 

Step 2: Configure Your Pick the Pair Type

Before creating any games, set up the Pick the Pair type in the Configuration tab. Remember: the ID must be exactly pick-the-pair.

 

Step 3: Click Create

Now that your type is configured, return to the Info Pages tab and click the Create button to start building your first Pick the Pair game.

Step 4: Enter Basic Game Details

Fill in your game's Title and Subtitle, then select your Pick the Pair Type from the dropdown.

 

Step 5: Configure Your Pairs

Set up each matching pair with Option A (left column) and Option B (right column). Add titles, subtitles (optional), and images that appear on both columns (optional).

 

Step 6: Customize Display Order (Optional)

Drag and reorder how pairs appear in each column independently to increase the challenge. If you skip this step, options will appear in random order by default.

 

Step 7: Save Your Game!

Scroll down and click the Save button to preserve all your hard work. Don't skip this step or everything will be lost! 💾

 

Configuration Complete! Now See Your Game in Action


Landing Page Template

Your completed Pick the Pair game with the landing page template—a complete, ready-to-publish page with branding, game interface, and lead form.

Standard Template

The standard template showing the Pick-the-Pair interface. Notice how we've intentionally added  images to only some teams (Liverpool, Chelsea) - this demonstrates how much more visually appealing and engaging the game becomes when images are included.

Overlay Template

The overlay template with a dark theme—perfect for visually immersive experiences.