Leaderboard

A widget that displays a ranked list of users based on their performance across one or more game entities (Match Quiz, Classic Quiz, Top X, or a custom Template). It supports paginated results and can aggregate scores across multiple entities simultaneously.

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"your-match-quiz-id","type":"MATCH_QUIZ"},{"id":"your-top-x-id","type":"TOP_X"}]'
	data-leaderboard-page-size="10"
></div>

Configuration Attributes

Rank Styles

Use rankStyles to visually distinguish specific positions (e.g. gold/silver/bronze for the top 3). Pass an object keyed by row position in the rendered list (1 = first row on the current page), each value having an optional backgroundColor and color.

• Styles apply by row position, not by the rank number in the # column — so ties don't shift the decoration.
• The current user's own row always keeps the standard highlight and ignores any matching rankStyles entry.
• Any row number is valid — you are not limited to the top 3.

Global configuration:

FuWidget.init({
	// ... other config
	leaderboard: {
		rankStyles: {
			1: { backgroundColor: "#FFD700", color: "#000000" },
			2: { backgroundColor: "#C0C0C0", color: "#000000" },
			3: { backgroundColor: "#CD7F32", color: "#FFFFFF" },
		},
	},
});

Per-widget override:

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"your-match-quiz-id","type":"MATCH_QUIZ"}]'
	data-leaderboard-rank-styles='{"1":{"backgroundColor":"#FFD700","color":"#000000"},"2":{"backgroundColor":"#C0C0C0","color":"#000000"}}'
></div>

Entity Types

Each entry in data-entities must include an id and a type. Supported entity types (case-insensitive):

Examples

Single Entity

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"your-match-quiz-id","type":"MATCH_QUIZ"}]'
	data-leaderboard-page-size="20"
></div>

Multiple Entities

Leaderboards are displayed as options from a dropdown menu. The options (leaderboards) will be in the same order as data-entities.

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"top-x-1","type":"TOP_X"},{"id":"match-quiz-2","type":"MATCH_QUIZ"}]'
	data-leaderboard-page-size="10"
></div>

Multiple Quizzes

Combine scores from several classic quizzes into one leaderboard (Overall):

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"classic-quiz-1","type":"CLASSIC_QUIZ"},{"id":"classic-quiz-2","type":"CLASSIC_QUIZ"}]'
	data-leaderboard-page-size="10"
></div>

Template Entity

Use a TEMPLATE entity type to display an aggregated leaderboard defined by a custom server-side grouping:

<div
	data-component="fu-widget"
	data-content-type="leaderboard"
	data-entities='[{"id":"your-template-id","type":"TEMPLATE"}]'
	data-leaderboard-page-size="10"
></div>

📘

The Leaderboard is one of two widgets (with Betslip) loaded via entities/no-id rather than a single content id. See Getting Started → Widget Loading Approaches for the loadWidget() form.

Features

• Ranked user list with positions, names, and scores
• Supports aggregation across multiple game entities
• Paginated results with configurable page size
• Works with Match Quiz, Classic Quiz, Top X, and Template entity types
• Responsive design