Match Quiz Play

Football match prediction component. Users predict outcomes across multiple markets (1X2, correct score, player markets, over/under, corners, etc.), earn points, and see results once the match is settled.

Import

import { MatchQuizPlay } from "fansunited-frontend-components";
import { MatchQuizPlayProps, WidgetTemplate } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Match Quiz identifier.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`template`	`WidgetTemplate`	`STANDARD`, `SPLIT`, or `OVERLAY`.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`leads`	`LeadsOptions`	See Lead Collection.
`imagePosition`	`"left" \| "right"`	`STANDARD` template only.
`defaultImagePlaceholderUrl`	`string`	Fallback image URL.
`userIsLoggedIn`	`boolean`	Host auth state.
`signInCTA`	`SignInCTADetails`	See Sign-in CTA.
`additionalCTA`	`AdditionalCTADetails`	See Additional CTA.
`showCountdown`	`boolean`	Show countdown timer when the quiz is `OPEN`.
`showTeamLabels`	`boolean`	Show team name labels in fixture components.
`showPoints`	`boolean`	Show points display per fixture.
`showPredictionDetails`	`boolean`	Show detailed result breakdown after completion.
`rulesDisplay`	`RulesDisplay`	See Rules Display.

Supported markets

Category	Markets
Match result	`FT_1X2`, `HT_1X2`
Score	`CORRECT_SCORE`, `CORRECT_SCORE_HT`, `CORRECT_SCORE_ADVANCED`
Player	`PLAYER_SCORE_FIRST_GOAL`, `PLAYER_SCORE`, `PLAYER_YELLOW_CARD`, `PLAYER_RED_CARD`, `PLAYER_SCORE_HATTRICK`, `PLAYER_SCORE_TWICE`
Over/Under goals	`OVER_GOALS_0_5` … `OVER_GOALS_6_5`
Over/Under corners	`OVER_CORNERS_6_5` … `OVER_CORNERS_13_5`
Special	`CORNERS_MATCH`, `PENALTY_MATCH`, `RED_CARD_MATCH`

Which markets are presented depends on the Match Quiz configuration in the Fans United backend.

Status lifecycle

A Match Quiz progresses through five states:

Status	Behavior
`PENDING`	Not yet open for predictions.
`OPEN`	Default playable state. Predictions accepted.
`LIVE`	Match has started — no new predictions accepted.
`CLOSED`	Match finished; backend is resolving predictions.
`SETTLED`	Predictions resolved; leaderboard available.

Countdown timer

showCountdown={true} displays a live countdown when the status is OPEN. It uses predictionsCutoffTime from the entity and automatically hides once the cutoff is reached.

Points system

showPoints={true} reveals the potential and earned points per fixture, with mobile-friendly tooltips. Integrates with the Fans United loyalty system if configured.

Prediction details

showPredictionDetails={true} enables a results breakdown after settling — correct vs. incorrect, per-market scoring, and per-fixture point totals.

Examples

Basic

<MatchQuizPlay
  entityId="match-quiz-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
/>

Fully configured

<MatchQuizPlay
  entityId="match-quiz-123"
  sdk={sdk}
  template={WidgetTemplate.OVERLAY}
  language="en"
  showCountdown
  showTeamLabels
  showPoints
  showPredictionDetails
  userIsLoggedIn={false}
  signInCTA={{ defaultLabel: "Sign in to compete", onClick: openSignIn }}
  leads={{
    position: "after",
    fields: ["fullName", "email"],
    campaignId: "match-quiz-campaign",
    campaignName: "Predictions 2024",
    phoneCountryCode: "44",
    syncWithProfile: true,
  }}
  themeOptions={{ mode: "dark" }}
/>