Predictor

Football score predictor widget with two templates: the default multi-tab interface (match predictions, global leaderboard, private leagues, game rules, and prizes) for a season-long engagement tool, and embed — a compact single-match card designed to sit inside an article. 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

Templates

Predictor supports two presentations, chosen via data-predictor-template. Unlike the shared WidgetTemplate enum used by most other widgets, Predictor's template is a plain string union.

<div
	data-component="fu-widget"
	data-content-type="predictor"
	data-content-id="your-predictor-template-id"
	data-predictor-template="embed"
	data-predictor-embed-image-position="left"
	data-predictor-embed-match-id="fb:m:451634"
	data-predictor-embed-success-title="Prediction submitted!"
	data-predictor-embed-success-description="Keep playing for a chance to win amazing prizes."
	data-predictor-embed-success-cta-label="Play Now"
	data-predictor-embed-success-cta-url="https://your-site.com/predictor"
	data-predictor-embed-success-cta-target="_blank"
></div>

Embed Attributes (only read when data-predictor-template="embed"):

Omit all data-predictor-embed-success-* attributes to show nothing extra after a prediction is submitted.

Global configuration:

FuWidget.init({
	// ... other config
	predictor: {
		template: "embed",
		embed: {
			imagePosition: "left",
			matchId: "fb:m:451634",
			successMessage: {
				title: "Prediction submitted!",
				description: "Keep playing for a chance to win amazing prizes.",
				cta: {
					defaultLabel: "Play Now",
					url: "https://your-site.com/predictor",
					target: "_blank",
				},
			},
		},
	},
});

Tabs

Applies to data-predictor-template="standard" only (or when the attribute is omitted, since "standard" is the default).

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.

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:

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:

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:

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

• Two templates: "standard" (multi-tab) and "embed" (single-match article card)
• Multi-tab interface: Play, Leaderboard, Private Leagues, Rules, and Prizes ("standard" only)
• 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