Predictor

A full-featured, season-long football score predictor with a multi-tab interface. Users submit match score predictions across grouped matchweeks, track their standing on a global 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="predictor"
	data-content-id="your-predictor-template-id"
	data-predictor-tabs="play,leaderboard,private-leagues,rules,prizes"
	data-signin-cta-label="Sign in to Predict"
	data-signin-cta-onclick="showSignInModal()"
	data-predictor-match-card-bg-image-url="https://example.com/stadium-bg.jpg"
	data-predictor-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

Attribute	Description	Options/Format	Default
`data-predictor-tabs`	Comma-separated list of tabs to enable	`"play,leaderboard,private-leagues,rules,prizes"`	All tabs
`data-signin-cta-label`	Override the sign-in button label	Any string	Translated default
`data-signin-cta-onclick`	JavaScript code to execute on sign-in click	JavaScript code	None
`data-signin-cta-url`	Direct URL for the sign-in CTA	Valid URL	None
`data-signin-cta-target`	Link target for the sign-in CTA URL	`"_self"`, `"_blank"`	`"_self"`
`data-predictor-match-card-bg-image-url`	Background image URL for match prediction cards	Valid image URL	Global config
`data-predictor-consents`	JSON array of consent definitions required before predicting	Array of consent objects (see below)	Global config
`data-predictor-betslip`	JSON object to enable betslip integration inside Predictor	`PredictorBetslipConfig` object (see below)	Global config

Tabs

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

Tab value	Description
`play`	Main prediction interface — submit match score forecasts
`leaderboard`	Global rankings and user standings with pagination
`private-leagues`	Create and join private leagues to compete with friends
`rules`	Searchable game rules and scoring system
`prizes`	Prize distribution and rewards information

Consent Configuration

Require users to accept consent agreements before submitting their first prediction. Configure consents globally or per-widget using data-predictor-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
	predictor: {
		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="predictor"
	data-content-id="your-predictor-template-id"
	data-predictor-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:

Field	Type	Description
`consentId`	`string`	Unique identifier for the consent (e.g. `"tos"`, `"marketing"`)
`body`	`string`	Text or HTML content of the consent label
`required`	`boolean`	When `true`, the user must accept before they can predict
`defaultChecked`	`boolean`	Pre-check the consent checkbox on load

Betslip Integration

The Predictor 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:

Value	Description
`"predictions-only"`	Betslip appears only for predictions that carry live odds
`"odds-only"`	Betslip appears for any odds, regardless of prediction state

Global configuration:

FuWidget.init({
	// ... other config
	predictor: {
		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="predictor"
	data-content-id="your-predictor-template-id"
	data-predictor-betslip='{"trigger":"predictions-only","position":"bottom-right","currency":"USD"}'
></div>

PredictorBetslipConfig fields:

Field	Type	Description
`trigger`	`string`	When to activate the betslip: `"predictions-only"` or `"odds-only"`
`position`	`BetslipPosition`	Widget position on the page (same options as standalone Betslip)
`maxSelections`	`number`	Maximum allowed selections
`stakePresets`	`number[]`	Quick-stake preset amounts
`oddsPollingInterval`	`number`	Odds refresh interval in milliseconds
`currency`	`string`	Currency label
`ctaUrlTemplate`	`string`	URL for the place-bet CTA
`brandingLogoUrl`	`string`	Bookmaker or sponsor logo URL
`labels`	`BetslipLabels`	Override displayed text (see the Betslip widget page)

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-tab interface: Play, Leaderboard, Private Leagues, Rules, and Prizes
Season-long score prediction for grouped matchweeks
Global leaderboard with paginated standings and user rank highlighting
Private leagues — create and join custom competitive groups
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.