Player Of The Match

The Player of the Match widget allows users to vote for the best player in a football match, see real-time voting results, and view the final winner after voting ends.

<div
	data-component="fu-widget"
	data-content-type="player-of-the-match"
	data-content-id="your-match-id"
	data-potm-voting-window="2"
	data-potm-auth-requirement="REGISTERED"
	data-signin-cta-label="Sign in to vote!"
	data-signin-cta-onclick="showSignInModal()"
	data-potm-show-team="team_id"
	data-potm-show-players="player1_id,player2_id,player3_id"
	data-potm-branded-area-image="https://example.com/sponsor-logo.png"
	data-potm-branded-area-link="https://sponsor-website.com"
	data-potm-header-banner-styles='{"background":"#161A2E","borderColor":"#161A2E","textColor":"#FFFFFF"}'
></div>

Configuration Attributes

Legacy Attribute Aliases

Five of these attributes were originally unprefixed. Both spellings still work — the data-potm- form is preferred and takes precedence when both are present on the same element.

Global Configuration

Every attribute above can also be set once in FuWidget.init() under playerOfTheMatch, so you don't have to repeat it on each embed. The full resolution order for each option is:

data-potm-* attribute → legacy unprefixed attribute → playerOfTheMatch config → built-in default

FuWidget.init({
	// ... other config
	playerOfTheMatch: {
		authRequirement: "REGISTERED",
		votingWindow: 24,
		showTeam: "fb:t:817",
		showPlayers: ["fb:p:1", "fb:p:2"],
		brandedAreaImage: "https://example.com/sponsor-logo.png",
		brandedAreaLink: "https://sponsor-website.com",
		headerBannerStyles: { background: "#161A2E", borderColor: "#161A2E", textColor: "#FFFFFF" },
	},
});

Features

• Coverflow player carousel with drag/swipe and arrow navigation
• Search by name or shirt number, plus position filter chips (goalkeeper / defender / midfielder / forward)
• Roster rail — a horizontal thumbnail strip for jumping straight to any player in a full squad
• Live voting status bar — countdown to the voting deadline and a running total-votes tally
• Vote and remove vote, with a "your vote" indicator that follows you across the deck
• Results view once voting closes — outright winner or tied winners, with medal styling and vote percentages
• Optional sponsor banner above the header
• Standalone styling for the team-vs-team banner, independent of the rest of the theme
• Configurable authentication requirements
• Customizable sign-in CTA for unauthenticated users
• Responsive design for all devices

Header Banner Styling

By default the team-vs-team banner derives its background, border, and text colors from the theme's primary and secondary-text tokens. Those tokens are shared across the whole widget, so recoloring them to get a specific banner look also affects the vote button, active-card border, and badges.

data-potm-header-banner-styles overrides just the banner. Any field left unset falls back to the theme default.

Player Display and Sorting

Players are displayed in a coverflow carousel and sorted by vote count (highest first). Viewers can narrow the deck by searching a name or shirt number, filtering by position, or jumping straight to a player via the roster rail. When restricted with data-potm-show-team, vote-count sorting is maintained within that team's players.

States

The widget has three main states:

1. Upcoming Match
   • Displays countdown to match start
   • Voting not yet available
2. Active Voting
   • Shows the coverflow player deck with search, position filters, and roster rail
   • Allows selecting, changing, and removing votes
   • Displays the voting deadline countdown and running vote totals
3. Voting Ended
   • Shows the winner, or all tied winners when the vote is level
   • Medal styling and final vote percentages

Implementation Tips

• Place the widget on match pages for immediate context.
• Works best with matches that have confirmed lineups.
• The voting window parameter can be adjusted based on your audience engagement patterns.
• For high-traffic sites, a shorter voting window (1–2 hours) creates more urgency.
• For lower traffic, consider extending the window (24–48 hours) to gather more votes.