Match Prediction

The Match Prediction widget lets signed-in users predict one market on a specific match. It renders the Event Card component with its prediction markets shown inline, so the card also carries the competition, both competitors and the kickoff time or live score.

<div data-component="fu-widget" data-content-type="match-prediction" data-content-id="your-match-id" data-market="FT_1X2"></div>

Configuration

Every Event Card presentation prop is exposed here, because this widget is an Event Card preconfigured for a single market. It offers exactly one market, always rendered inline — there is no drawer and no multi-market option; use the Event Card widget when you want several markets or a collapsible one.

Global eventCard configuration from FuWidget.init() is deliberately not applied to this widget. It reads its own matchPrediction object instead, so Event Card defaults cannot silently alter existing prediction embeds.

Global Configuration

matchPrediction sets defaults for both this widget and Team Next Match Prediction:

FuWidget.init({
	// ... other config
	matchPrediction: {
		marketId: "FT_1X2", // Optional: the market to offer (default: "FT_1X2")
		cutoffMinutes: 15, // Optional: minutes before kickoff when predictions close (default and minimum: 15)
		allowDelete: true, // Optional: let users remove a prediction (default: true)
		showSummary: true, // Optional: show how everyone predicted each market (default: true)
		template: "standard", // Optional: "compact", "standard" (default), or "hero"
		type: "header", // Optional: "header" (default) or "detailed" (reserved)
		showCompetition: true, // Optional: show the competition header (default: true)
		showOdds: true, // Optional: render betting odds (default: true)
		liveRefresh: true, // Optional: poll while the event is LIVE (default: true)
		refreshInterval: 30000, // Optional: live-refresh interval in ms (default: 30000)
	},
});

Each data-match-prediction-* attribute overrides the matching field for that one element; fields you do not set as attributes keep their global value. Unlike the Event Card widget's predictions object, these merge field by field rather than replacing wholesale.

Requirements

Predictions are shown only when the visitor is signed in and the match is a football fixture the Prediction API recognizes; otherwise the event card renders without any prediction UI. Predictions close 15 minutes before kickoff by default, which is also the earliest the Prediction API accepts.

Community Statistics

How the whole Fans United audience predicted the market, rendered by the Event Card component inside its own prediction UI. On by default here; set data-match-prediction-show-summary="false" to turn it off.

It has no surface of its own — a prediction count beside the heading, and the market's split revealed under its row once the user has answered it. That gate is deliberate: a crowd split sitting beside a live selector anchors the choice to the majority.

• 1X2, double-chance and every Yes/No market are drawn as one stacked bar over a legend naming each outcome and its share.
• Scorelines, HT_FT, CORNERS_MATCH and player markets are drawn as ranked rows — the three most popular, with the rest behind an expandable "N more outcomes" toggle.
• Bars sit on an absolute 0–100 axis, so a percentage means the same length everywhere, and shade by rank.
• The user's own outcome is called out in the accent colour. Once the match is graded, the outcome that actually happened is ticked in green — and the user's own row is never faded, even when wrong.
• On the compact template a market's split folds onto one line: a bar plus the crowd's favourite.

The aggregate is read once with the API cache bypassed, so each load shows current counts. The user's own submissions, edits and deletions are folded into the split immediately and locally rather than re-fetched.

Supported Markets

Any of the 32 markets the Prediction API supports can be used — see Widgets → Event Card → Predictions for the full list grouped by how each is answered. Markets the fixture itself does not accept are dropped with a console warning. The most common:

1X2 Markets

• FT_1X2 — Full-time match result (Home win, Draw, Away win)
• HT_1X2 — Half-time match result

Yes/No Markets

• BOTH_TEAMS_SCORE — Whether both teams will score
• PENALTY_MATCH — Whether there will be a penalty in the match
• RED_CARD_MATCH — Whether there will be a red card in the match

Exact Score Markets

• CORRECT_SCORE, CORRECT_SCORE_HT, CORRECT_SCORE_ADVANCED

Examples

Compact Card in an Article

<div
	data-component="fu-widget"
	data-content-type="match-prediction"
	data-content-id="fb:m:12345"
	data-market="BOTH_TEAMS_SCORE"
	data-match-prediction-template="compact"
	data-match-prediction-show-competition="false"
></div>

Hero Card, Closing Four Hours Before Kickoff

<div
	data-component="fu-widget"
	data-content-type="match-prediction"
	data-content-id="fb:m:12345"
	data-market="CORRECT_SCORE_ADVANCED"
	data-match-prediction-template="hero"
	data-match-prediction-cutoff-minutes="240"
	data-match-prediction-allow-delete="false"
></div>

Features

• Any of the 32 Prediction API markets, one per widget
• Full control of the underlying event card — template, card type, competition header, odds, live refresh
• Community prediction statistics, on by default, revealed once the user has answered
• One prediction record per market, each editable and removable on its own
• Read-only summary with outcome and points once the match is graded
• Competition, competitors, kickoff time and live score from the Event Card component
• Team logo and name display