Event Game

Interactive event-based prediction game that allows users to make predictions on various sport events. Features multiple question types, real-time countdown timers, points system, and comprehensive result tracking with leaderboards.

<div
	data-component="fu-widget"
	data-content-type="event-game"
	data-content-id="your-event-game-id"
	data-layout-template="STANDARD"
	data-image-position="left"
	data-show-countdown="true"
	data-show-points="true"
	data-show-prediction-details="true"
	data-options-layout="twoByTwo"
	data-additional-cta-label="View Rules"
	data-additional-cta-url="https://example.com/rules"
	data-additional-cta-target="_blank"
></div>

Configuration Attributes

Features

• Event-based prediction questions
• Real-time countdown timer for prediction cutoff
• Points system
• Leaderboard and ranking system
• Prediction summary and editing capabilities
• Three responsive templates (Standard, Split, Overlay)
• Custom theming
• Detailed prediction results
• Additional CTA support for custom actions
• Flexible options layout (two-by-two grid, row, or column)

Options Layout

The Event Game widget supports three layout styles for displaying answer options:

• twoByTwo — Displays answer options in a 2x2 grid layout (2 columns)
• row — Displays answer options in a single row (horizontal layout)
• column — Displays answer options in a single column (vertical layout, one per row)

This can be configured globally in the widget initialization:

FuWidget.init({
	// ... other config
	optionsLayout: "twoByTwo", // or "row" or "column"
});

Or per-widget using the data-options-layout attribute:

<div
	data-component="fu-widget"
	data-content-type="event-game"
	data-content-id="your-event-game-id"
	data-options-layout="column"
></div>

Game Status States

Event games have multiple status states:

• PENDING — Not yet open for predictions
• OPEN — Ready for predictions (default state)
• LIVE — Event has started, no new predictions accepted
• SETTLED — Predictions resolved, leaderboard available

Additional CTA

The Event Game widget supports an additional call-to-action button that can be used for custom actions such as:

• Linking to game rules or instructions
• Promoting related content or campaigns
• Directing users to external resources
• Triggering custom JavaScript functions

The additional CTA can be configured globally:

FuWidget.init({
	// ... other config
	additionalCTA: {
		defaultLabel: "View Rules",
		url: "https://example.com/rules",
		target: "_blank",
	},
});

Or per-widget using data attributes:

<div
	data-component="fu-widget"
	data-content-type="event-game"
	data-content-id="your-event-game-id"
	data-additional-cta-label="Learn More"
	data-additional-cta-onclick="console.log('CTA clicked')"
	data-additional-cta-url="https://example.com/info"
	data-additional-cta-target="_blank"
></div>

Implementation Tips

• Place the widget on event or competition pages for immediate context.
• Use countdown timers to create urgency and increase engagement.
• Enable prediction details to provide transparency and build trust.
• Configure points display to gamify the experience.

📘

Related (see the Features page): Rules Display · Options Layout · Sign-in & Additional CTA.