Guides
Start typing to search…

User-centric widgets

Quick Start

Installation

Add the widget script to your HTML page:

<script src="https://cdn.jsdelivr.net/npm/fansunited-widgets-cdn@<version>/fu-widgets.iife.js"></script>

Important: Replace <version> with the latest version number. You can check the latest version on the npm registry page for fansunited-widgets-cdn. The current example uses version 0.0.30, but newer versions may be available.

Basic Configuration

Initialize the widget with required configuration:

FuWidget.init({
	fansUnited: {
		apiKey: "1111-333-your-fu-api-key",
		clientId: "your-client-id",
		environment: "prod", // "dev", "prod", "staging", "watg", "yolo"
		idSchema: "native",
		lang: "en", // Language code
	},
	firebase: {
		apiKey: "your-firebase-api-key",
		authDomain: "your-app.firebaseapp.com",
		projectId: "your-project-id",
		appId: "your-app-id",
	},
	language: "en", // Widget UI language
	urls: {
		classicQuizUrl: "/quiz/{CONTENT_ID}",
		eitherOrUrl: "/either-or/{CONTENT_ID}",
		pollUrl: "/poll/{CONTENT_ID}",
		matchQuizUrl: "/match-quiz/{CONTENT_ID}",
	},
});

URL Configuration

The widget supports configuring URLs for different content types that will be used when a user clicks on an item in a list widget:

  • urls.classicQuizUrl: URL pattern for quiz content
  • urls.eitherOrUrl: URL pattern for either/or games
  • urls.pollUrl: URL pattern for polls
  • urls.matchQuizUrl: URL pattern for match quiz games

Each URL pattern should include the {CONTENT_ID} placeholder which will be replaced with the actual content ID when generating links.

Language Support

The widget supports multiple languages for both the UI and content:

  • language: Controls the widget UI language
  • fansUnited.lang: Controls the content language from Fans United API

Available languages for UI (language):

  • "bg" - Bulgarian
  • "en" - English
  • "ro" - Romanian
  • "pt" - Portuguese
  • "sr" - Serbian
  • "fr" - French
  • "de" - German
  • "it" - Italian
  • "fr-be" - Belgian French
  • "pl" - Polish
  • "pt-br" - Brazilian Portuguese

Available languages for content (fansUnited.lang):

  • "bg" - Bulgarian
  • "en" - English
  • "ro" - Romanian
  • "el" - Greek
  • "sk" - Slovak
  • "pt" - Portuguese
  • "sr" - Serbian
  • "hu" - Hungarian
  • "sv" - Swedish
  • "es" - Spanish
  • "fr" - French
  • "nl" - Dutch
  • "de" - German
  • "it" - Italian

Lead Collection Configuration

Lead collection in the widget follows a hierarchy of configurations, allowing for both global and content-specific settings.

Configuration Hierarchy

  1. Management Portal Configuration

    • Set in Management Portal under Configuration -> Auth Requirement
    • Enables/disables lead collection for specific content
    • Options: "FREE", "LEAD", "REGISTERED"

  2. Global Widget Configuration

    • Set during widget initialization
    • Applies to all content unless overridden

  3. HTML Attribute Configuration

    • Set per widget instance
    • Overrides global configuration

Example Configuration

  1. Enable leads in Management Portal:

    Configuration -> Auth Requirement -> LEAD

  2. Global configuration in widget initialization:

FuWidget.init({
	// ... other config
	leads: {
		defaultFields: ["fullName", "email"], // Default fields for all widgets
		position: "after", // Default position
		campaignId: "default-campaign", // Default campaign ID
		campaignName: "Default Campaign", // Default campaign name
	},
});
  1. Individual widget configuration:
<div
    data-component="fu-widget"
    data-content-type="classic-quiz"
    data-content-id="quiz-123"
    data-lead-fields="firstName,lastName,email"  // Overrides defaultFields
    data-lead-position="before"                  // Overrides position
    data-campaign-id="summer-campaign"           // Overrides campaignId
    data-campaign-name="Summer Campaign 2024"    // Overrides campaignName
></div>

Available Lead Fields

  • fullName - Full name input
  • firstName - First name input
  • lastName - Last name input
  • email - Email input
  • gender - Gender selection
  • country - Country selection
  • phoneCountryCode - Phone country code
  • phoneNumber - Phone number input

Lead Form Position

  • before - Lead form appears before content
  • after - Lead form appears after content

Important: Lead collection must be enabled in the Management Portal (Auth Requirement = "LEAD") for any lead collection configuration to take effect.

Widget Types

Classic Quiz Widget

A quiz widget that presents questions with multiple choice answers.

<div
	data-component="fu-widget"
	data-content-type="classic-quiz"
	data-content-id="your-quiz-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Multiple choice questions
  • Timer support
  • Score tracking
  • Results display
  • Prize support
  • Lead collection
  • Responsive design

Either/Or Widget

A game where users make quick decisions between two options.

<div
	data-component="fu-widget"
	data-content-type="either-or"
	data-content-id="your-game-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Quick decision gameplay
  • 3 lives system
  • Streak tracking
  • Leaderboard
  • Timer-based rounds
  • Personal best tracking
  • Prize support

Poll Widget

A widget for collecting user votes on various topics.

<div
	data-component="fu-widget"
	data-content-type="poll"
	data-content-id="your-poll-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Single or multiple choice voting
  • Real-time results
  • Percentage visualization
  • Total votes tracking
  • Lead collection integration
  • Prize support

List Widget

A widget that displays a collection of different content types.

<div
	data-component="fu-widget"
	data-content-type="list"
	data-content-id="your-list-id"
	data-classic-quiz-url="/quiz/{CONTENT_ID}/custom-path"
	data-either-or-url="/either-or/{CONTENT_ID}/custom-path"
	data-poll-url="/poll/{CONTENT_ID}/custom-path"
	data-match-quiz-url="/match-quiz/{CONTENT_ID}/custom-path"
></div>

URL Configuration Attributes

You can specify URL patterns for each content type in the list widget either through global configuration (in the initialization) or through HTML attributes:

  • data-classic-quiz-url: Custom URL pattern for quiz content
  • data-either-or-url: Custom URL pattern for either/or games
  • data-poll-url: Custom URL pattern for polls
  • data-match-quiz-url: Custom URL pattern for match quiz games

These URL patterns should include {CONTENT_ID} which will be replaced with the actual content ID when generating links. HTML attributes will override the global URL configuration.

Features

  • Mixed content display of different widget types
  • Responsive grid layout
  • Click-through navigation to individual content items
  • Dynamic loading
  • Support for all widget content types

Match Prediction Widget

The Match Prediction widget allows users to make predictions on specific markets for a match, showing real-time community prediction statistics.

<div data-component="fu-widget" data-content-type="match-prediction" data-content-id="your-match-id" data-market="FT_1X2"></div>

Features

  • Multiple prediction markets support
  • Real-time community prediction statistics
  • Visual display of prediction percentages
  • 1X2 (home, draw, away) predictions
  • Yes/No market predictions
  • Success notification feedback
  • Team logo and name display

Configuration

  • data-content-id: Match ID for which predictions will be made
  • data-market: The prediction market to display (optional, defaults to "FT_1X2")

Supported Markets

  • 1X2 Markets

    • FT_1X2 - Full-time match result (Home win, Draw, Away win)
    • HT_1X2 - Half-time match result

  • Yes/No Markets

    • BOTH_TEAMS_SCORE - Whether both teams will score
    • PENALTY_MATCH - Whether there will be a penalty in the match
    • RED_CARD_MATCH - Whether there will be a red card in the match

Team Next Match Prediction Widget

The Team Next Match Prediction widget automatically identifies the team's upcoming match and allows users to make predictions.

<div data-component="fu-widget" data-content-type="team-next-match-prediction" data-content-id="your-team-id" data-market="FT_1X2"></div>

Features

  • Automatically fetches team's next scheduled match
  • All prediction markets supported by the Match Prediction widget
  • Community prediction statistics
  • Success notification feedback
  • Team logo and name display

Configuration

  • data-content-id: Team ID to find the next match for
  • data-market: The prediction market to display (optional, defaults to "FT_1X2")

Implementation Tips

  • This widget is ideal for team pages where you want to show the next upcoming match
  • Saves the effort of manually updating match IDs as fixtures change
  • The available markets depend on the league/competition of the team's upcoming match

Player of the Match Widget

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"></div>

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
  • Responsive design for all devices
  • Support for all positions and player types

Configuration

  • data-content-id: Match ID for which users can vote for player of the match
  • data-voting-window: Number of hours after match end during which voting is allowed (optional, default: 1)
    • Accepts values between 0-168 (0 to 7 days)

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

Common Market Types

Both prediction widgets support various market types that can be specified using the data-market attribute.

1X2 Markets

For 1X2 markets, the widget displays three prediction options: Home win, Draw, and Away win.

Supported 1X2 markets:

  • FT_1X2 - Full-time match result (default)
  • HT_1X2 - Half-time match result

Yes/No Markets

For Yes/No markets, the widget displays two prediction options: Yes and No.

Supported Yes/No markets:

  • BOTH_TEAMS_SCORE - Whether both teams will score
  • PENALTY_MATCH - Whether there will be a penalty in the match
  • RED_CARD_MATCH - Whether there will be a red card in the match

Other Available Markets

Additional markets are available depending on your implementation needs. These include:

  • Player-specific markets (PLAYER_SCORE, PLAYER_YELLOW_CARD, etc.)
  • Over/under markets
  • Correct score markets

Note: Some markets may be unavailable for certain competitions or matches, depending on data provider coverage.

Configuration Options

Theme Configuration

theme: {
    mode: "light", // "light" or "dark"
    primaryColor: {
        50: "#ebfff3",
        100: "#d1ffe4",
        200: "#a3ffc8",
        300: "#66f59d",
        400: "#2ce97a",
        500: "#0cd664",
        600: "#09b954",
        700: "#078f42",
        800: "#056b31",
        900: "#034d23",
    }
}

Content Labels

Custom labels can be set for each content piece from the management portal under the Labels configuration:

Prize Labels

  • prizeCardTitle - Title of the prize card
  • prizeCardDescription - Description in the prize card
  • prizeCta - Call to action for prize details

Lead Form Labels

  • leadTitle - Title of the lead form
  • leadDescription - Description text for lead collection
  • leadCta - Submit button text
  • leadSuccessTitle - Success message title
  • leadSuccessDescription - Success message description

Score Message Labels

  • scoreMessagePerfect - Override the default message when a user gets a perfect score.
  • scoreMessageAmazing - Override the default message when a user gets 80+%.
  • scoreMessageWellDone - Override the default message when a user gets 60+%.
  • scoreMessageGoodEffort - Override the default message when a user gets 40+%.
  • scoreMessageKeepGoing - Override the default message when a user gets less than 40%.

Language Support

The FU Widget system supports multiple languages for all widget types. Each widget displays content in the language specified in the configuration.

Available Languages

All widgets support the following languages:

  • English (en)
  • Bulgarian (bg)
  • Romanian (ro)
  • Portuguese (pt)
  • Serbian (sr)
  • French (fr)
  • German (de)
  • Italian (it)
  • Belgian French (fr-be)
  • Polish (pl)
  • Brazilian Portuguese (pt-br)

Browser Support

  • Chrome (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Edge (latest 2 versions)
  • iOS Safari (latest 2 versions)
  • Android Chrome (latest 2 versions)

Updated 24 days ago