Top X

A multi-game football score-prediction tournament with a multi-tab interface. Matches are grouped into discrete games (e.g. "Day 8"), each with its own prediction cutoff, golden-goal tiebreaker, and settlement. Users submit score predictions, track their standing on a leaderboard, create or join private leagues, read game rules, and view prizes — all within a single embedded widget.

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-tabs="play,leaderboard,private-leagues,rules,prizes"
	data-signin-cta-label="Sign in to Predict"
	data-signin-cta-onclick="showSignInModal()"
	data-top-x-match-card-bg-image-url="https://example.com/stadium-bg.jpg"
	data-top-x-show-countdown="true"
	data-top-x-consents='[{"consentId":"tos","body":"I agree to the <a href=\"#\" target=\"_blank\" rel=\"noopener\">Terms of Service</a>","required":true,"defaultChecked":false}]'
></div>

Configuration Attributes

Tabs

All tabs are shown by default. Use data-top-x-tabs to restrict which tabs are visible. The order in the attribute determines the display order.

Countdown Timer

The countdown timer shows the time remaining until the prediction cutoff for each open game. It is enabled by default. Set data-top-x-show-countdown="false" or showCountdown: false in the global config to hide it.

Global configuration:

FuWidget.init({
	// ... other config
	topX: {
		showCountdown: false,
	},
});

Per-widget override:

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-show-countdown="false"
></div>

Game Navigation Label

Each gameweek in the Play tab has a navigation header (the title shown between the previous/next arrows). The data-top-x-game-nav-label attribute controls what it displays.

Global configuration:

FuWidget.init({
	// ... other config
	topX: {
		gameNavLabel: "titleAndDescription",
	},
});

Per-widget override:

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-game-nav-label="title"
></div>

Consent Configuration

Require users to accept consent agreements before submitting their first prediction. Configure consents globally or per-widget using data-top-x-consents. Required consents block progression until accepted; optional consents are shown in the same modal but do not block it.

Global configuration:

FuWidget.init({
	// ... other config
	topX: {
		consents: [
			{
				consentId: "tos",
				body: `I agree to the <a href="#" target="_blank" rel="noopener">Terms of Service</a>`,
				required: true,
				defaultChecked: false,
			},
		],
	},
});

Per-widget override:

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-consents='[{"consentId":"tos","body":"I agree to the <a href=\"#\" target=\"_blank\" rel=\"noopener\">Terms of Service</a>","required":true,"defaultChecked":false}]'
></div>

Consent Object Fields:

Odds

Odds are off by default. With data-top-x-show-odds="true", each upcoming match card shows the full-time 1X2 price its predicted score implies, from one bookmaker — in the Play tab and in a league member's predictions. Prices refresh every data-top-x-odds-polling-interval (30 seconds by default). Odds fail silently: when the odds API has no prices for a match, the card simply shows none.

• data-top-x-show-odds — while it is false (the default) the odds request is skipped altogether. A betslip with trigger: "odds-only" is fed by clicking those odds, so that trigger needs it set.
• data-top-x-odds-operators is a preference order: each match shows the first bookmaker in the list that prices it completely, so a second one can cover the first where a fixture has no prices from them. Without it, each match shows whichever bookmaker the response lists first, which is not guaranteed to stay the same.
• data-top-x-odds-mode, -flash-interval, -polling-interval, -affiliate-id and -affiliate-ids work as on the Event Card and Competitor Card. The market is not configurable — it comes from what was predicted.
• data-top-x-operator-id is deprecated. It still works, standing in for data-top-x-odds-operators with a single bookmaker.

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-show-odds="true"
	data-top-x-odds-operators="betano-bg,efbet-bg"
></div>

Global configuration:

FuWidget.init({
	// ... other config
	topX: {
		showOdds: true, // Optional: render odds on the match cards (default: false)
		odds: {
			operators: ["betano-bg", "efbet-bg"], // Optional: bookmaker preference order; the first also pins the betslip
			pollingInterval: 30000, // Optional: ms between price refreshes (default: 30000)
			affiliateId: "aff-123", // Optional: substituted into operator URLs carrying {affiliate_id}
		},
	},
});

The match cards and the betslip show the same bookmaker unless you set them to different values:

The deprecated operatorId still works and stands in for odds.operators: [operatorId].

Betslip Integration

The TopX widget has built-in betslip support. When enabled, users can add selections directly from the prediction interface and place bets alongside their predictions.

The trigger field controls which predictions open the betslip:

Global configuration:

FuWidget.init({
	// ... other config
	topX: {
		betslip: {
			trigger: "predictions-only",
			position: "bottom-right",
			currency: "USD",
			ctaUrlTemplate: "https://bookmaker.com/betslip?s={selectionIds}",
			operatorId: "betano-bg",
			affiliateId: "your-affiliate-id",
		},
	},
});

Per-widget override:

<div
	data-component="fu-widget"
	data-content-type="top-x"
	data-content-id="your-top-x-template-id"
	data-top-x-betslip='{"trigger":"predictions-only","position":"bottom-right","currency":"USD"}'
></div>

TopXBetslipConfig fields:

Authentication and Sign-in

The widget automatically detects user authentication status. When a user is not authenticated, a sign-in prompt is shown in the Play tab. Configure the sign-in CTA globally or per-widget using the same signInCTA configuration as other widgets.

FuWidget.init({
	// ... other config
	signInCTA: {
		defaultLabel: "Sign in to Predict",
		onClick: () => {
			window.location.href = "/signin";
		},
	},
});

Features

• Multi-game tournament format — matches grouped into daily or round-based games
• Golden-goal tiebreaker for tied predictions
• Multi-tab interface: Play, Leaderboard, Private Leagues, Rules, and Prizes
• Kickoff countdown timer per match card (enabled by default)
• Consent management with required/optional consent gates
• Authentication-aware UI with configurable sign-in CTA
• Custom match card background image
• Opt-in betting odds on the match cards, pinned to one bookmaker — see Odds
• Built-in betslip integration for placing bets alongside predictions
• Custom theming and multi-language support