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-voting-window="2"
	data-potm-auth-requirement="REGISTERED"
	data-signin-cta-label="Sign in to vote!"
	data-signin-cta-onclick="showSignInModal()"
	data-show-team="team_id"
	data-show-players="player1_id,player2_id,player3_id"
	data-branded-area-image="https://example.com/sponsor-logo.png"
	data-branded-area-link="https://sponsor-website.com"
></div>

Configuration Attributes

📘

You can also set playerOfTheMatch.authRequirement globally in FuWidget.init().

Features

• Interactive carousel display of all players from both teams
• Team filtering to quickly find players
• Real-time voting and results
• Countdown timer for upcoming matches
• Visual display of the match context and teams
• Winner announcement after voting period ends
• Ability to change or remove votes
• Configurable authentication requirements
• Customizable sign-in CTA for unauthenticated users
• Responsive design for all devices
• Support for all positions and player types

Player Display and Sorting

Players are displayed in a carousel format and sorted by:

• Vote count (highest votes first)
• When filtered by team, maintains the vote count sorting 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 interactive player carousel
   • Allows selecting and voting for players
   • Displays real-time vote counts
3. Voting Ended
   • Shows the top three players with vote percentages
   • Highlights the winner with a trophy icon
   • Displays final vote distribution

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.

📘

Related (see the Features page): Authentication Requirements · Sign-in & Additional CTA.