Event Card

A single-event card — a competition header over the two competitors and their kickoff time, live score, or final result. Team sports show one score column; tennis shows a per-set breakdown with an expandable scoreboard. Live events auto-refresh. Sport-agnostic: it adapts its status labels and score layout to whichever sport the Sports API returns (football, basketball, tennis, ice hockey, American football, …). Football events can additionally let signed-in users place predictions across several markets.

<div data-component="fu-widget" data-content-type="event-card" data-content-id="fb:m:12345"></div>

Configuration Attributes

Prediction attributes:

Templates

data-event-card-template picks the visual prominence of the same card — it does not change what data is shown.

<div data-component="fu-widget" data-content-type="event-card" data-content-id="fb:m:12345" data-event-card-template="hero"></div>

Card Type

Live Refresh

When data-event-card-live-refresh is true (default) and the event is LIVE, the card re-fetches on data-event-card-refresh-interval so the score/status stay current. Only live events poll — upcoming and finished events are fetched once. Set data-event-card-live-refresh="false" to disable polling.

Predictions

Signed-in users can place Fans United single predictions across several markets, in a collapsible drawer at the bottom of the card.

<div
	data-component="fu-widget"
	data-content-type="event-card"
	data-content-id="fb:m:12345"
	data-event-card-predictions-markets="FT_1X2,CORRECT_SCORE_ADVANCED,OVER_GOALS_2_5"
></div>

There is no enable flag. The drawer appears only when all of the following hold, and otherwise the card renders exactly as it does without predictions:

• the event is a football event,
• the visitor is signed in (detected automatically),
• at least one supported market is configured,
• the event id resolves to the same fixture in the Football API.

Predictions are made against the Football API, while the card renders Sports API events. The two ids are usually identical but that is not guaranteed, so the widget looks the id up and verifies both team ids and the kickoff time match before offering predictions. If the lookup misses or returns a different fixture, the drawer is not rendered. This costs one extra request, made only for football events with predictions configured for a signed-in user.

Supported Markets

Every market the Prediction API supports (32 in total) can be listed in data-event-card-predictions-markets. Unrecognized values are skipped with a console warning rather than breaking the card.

Player markets pick from both squads (grouped by team, with shirt numbers and headshots) and cost two extra requests, made only when a player market is configured. PLAYER_SCORE_FIRST_GOAL also offers Own goal and No goal will be scored.

Behaviour Over Time

Before the cutoff each market is its own selector row; submitting sends one prediction per market, and only markets the user actually touched are sent. A saved market becomes read-only with edit / remove affordances — each market is its own prediction record, so removing one leaves the others.

After the cutoff, while the match is in play, the drawer is a read-only summary: no editing, but a prediction can still be removed (unless data-event-card-predictions-allow-delete="false"), and removing the last one hides the drawer. Once the match is finished or cancelled the summary is fully read-only and each market shows its outcome and points.

Presentation

All three templates support predictions; the behaviour is identical and only the presentation differs.

data-event-card-predictions-display="inline" drops the collapse control and renders the markets directly, in every template. Use data-event-card-predictions-default-expanded="true" instead to keep the control but start the drawer open.

Config Object

The global eventCard.predictions object takes the same settings as the attributes above:

Global Configuration

Set defaults for all Event Card widgets in FuWidget.init():

FuWidget.init({
	// ... other config
	eventCard: {
		template: "standard", // Optional: "compact", "standard" (default), or "hero"
		showCompetition: true, // Optional: show the competition header (default: true)
		liveRefresh: true, // Optional: poll while the event is LIVE (default: true)
		refreshInterval: 30000, // Optional: live-refresh interval in ms (default: 30000)
		predictions: {
			// Optional: let signed-in users predict football events
			markets: ["FT_1X2", "BOTH_TEAMS_SCORE"], // Markets to offer, in this order
			display: "drawer", // Optional: "drawer" (default) or "inline"
			cutoffMinutes: 15, // Optional: minutes before kickoff when predictions close (default and minimum: 15)
			allowDelete: true, // Optional: let users remove a prediction (default: true)
			defaultExpanded: false, // Optional: start the drawer expanded (default: false)
		},
	},
});

A single data-event-card-predictions-* attribute on an element replaces this whole global predictions object for that widget — the two are not merged field by field. Repeat the fields you want to keep as attributes.

Examples

Compact Livescore Row

<div data-component="fu-widget" data-content-type="event-card" data-content-id="fb:m:12345" data-event-card-template="compact"></div>

Finished Event, No Live Polling

<div data-component="fu-widget" data-content-type="event-card" data-content-id="fb:m:12345" data-event-card-live-refresh="false"></div>

Compact Card With Inline Predictions

<div
	data-component="fu-widget"
	data-content-type="event-card"
	data-content-id="fb:m:12345"
	data-event-card-template="compact"
	data-event-card-predictions-markets="FT_1X2,OVER_GOALS_2_5"
	data-event-card-predictions-display="inline"
></div>

Predictions Closing an Hour Before Kickoff

<div
	data-component="fu-widget"
	data-content-type="event-card"
	data-content-id="fb:m:12345"
	data-event-card-predictions-markets="CORRECT_SCORE_ADVANCED,PLAYER_SCORE_FIRST_GOAL"
	data-event-card-predictions-cutoff-minutes="60"
	data-event-card-predictions-default-expanded="true"
></div>

Features

• Three visual templates — compact (livescore row), standard (crest beside name flanking the score/time), hero (large stacked crest-over-name in an inset panel with a live accent bar)
• Sport-aware status labels — upcoming / live / finished / cancelled, with a clock-vs-tennis finished label (FT vs Finished)
• Tennis per-set scoreboard with tiebreak superscripts, collapsed by default and expandable
• Live auto-refresh while the event is LIVE, on a configurable interval
• Optional single predictions for signed-in users — up to 32 markets in a collapsible drawer designed per template (football only)
• Contained load-failed / not-available states that never break the host layout