Top X

A multi-game football score-prediction tournament with a multi-tab interface. Matches are grouped into discrete games, 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>

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:

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={SELECTIONS}",
		},
	},
});

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
• Built-in betslip integration for placing bets alongside predictions
• Custom theming and multi-language support

📘

Related: Betslip widget (standalone betslip + the FuWidget.betslip API) · Features → Sign-in & Additional CTA.