Player Head-to-Head widget

Description

The Player Head-to-Head widget has three purposes:

• Compare the stats sheets of two players in a selected league/tournament or a different league/tournament during selected seasons.

• Compare the stats sheets of one player during different leagues/tournaments and seasons.

• Display betting odds for a specific match.

The widget creates more context by comparing player statistics for the number of games and minutes played, goals scored, assists made, and so on.

The Player H2H widget lets you add odds at the bottom of your team comparison. To do that, you must select a match, bookmakers, and markets to display.

Bind the widget to HTML DOM

🚧

Make sure that you have the loader already set up on your website.
If not, follow our guide:

🚀

Load Widgets 1.0 on your website

Open Recipe

You can bind the widget to the HTML DOM by two ways:

• Bind the widget without initial options. The required attribute here is "data-widgetId"

Bash

    <div data-widgetId="player-h2h"></div>

• Bind the widget with initial options. The all available options can be seen below

Bash

    <div data-widgetId="player-h2h" data-options='{...}'></div>

• The optional "data-options" attribute:

Bash

    {
        playerOne: {playerId, seasonIds}  // object with props playerId and seasonIds
        playerTwo: {playerId, seasonIds} // object with props playerId and seasonIds
        string playerId: "1",      // Unique identifier of the resource.
        string lang: 'en',    // the language in format like: en, bg, ru and etc.
        seasonIds: [ "123", "456", ...] // string array
        statFields : [ "played", "minutes_per_game",...] // string array. If empty, all stats will be displayed. Available statistics:
        0:"played"
        1: "goals"
        2: "assists"
        3: "conceded"
        4: "cleansheets"
        5: "started"
        6: "substitute_in"
        7: "substitute_out"
        8: "minutes"
        9: "yellow_cards"
        10: "red_cards"
        11: "goals_substitute"
        12: "minutes_substitute"
        13: "minutes_per_game"
        14: "minutes_per_goal"
        displayOdds: true/false // boolean - controls the odds visibility in the widget
        boolean canSelectMarkets -> // Show/Hide markets dropdown
        eventId: 32323 // integer - used for the odds event request
        displayTeamShortNamesOnDesktop: (true/false)  -> // This option replaces the team name with its short name on all resolutions, if "displayTeamCustomNamesOnDesktop" is not added
        displayTeamShortNamesOnMobile: (true/false)  -> // This option replaces the team name with its short name on mobile resolutions, if "displayTeamCustomNamesOnMobile" is not added
        displayTeamCustomNamesOnDesktop: (true/false)  -> // This option replaces the team name with its custom name on all resolutions
        displayTeamCustomNamesOnMobile: (true/false)  -> // This option replaces the team name with its custom name on mobile resolutions
    }

Player Head-to-Head widget in the CMS

Currently, the Sportal365 CMS offers a variety of football widgets to enable creators to add sports-specific statistics and context to their articles, videos, or galleries.

Video example