Team comparison widget

Description

The Team comparison is a widget that compares the performance of two teams for a particular tournament and season. Also, you can compare the performance of the same team but during different seasons, as well as display odds data.

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="team-comparison"></div>

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

Bash

    <div data-widgetId="team-comparison" data-options='{...}'></div>

• The optional "data-options" attribute:

Bash

    {
        obj team1: { id: '123123', seasonIds: ['123123', '123123']},
        obj team2: { id: '123123', seasonIds: ['123123', '123123']},
        string array statFields: ["played","win","draw","defeats","goalsScored","goalsConceded"]
        boolean displayOdds -> This option toggles the odds
        string eventId: '321608' -> // Id of the given event,
        int mainOddProvider: 33 -> // ID of the selected main odd provider for the selected event
        string array oddProviderIds: ['34', '40', ...] -> // A list of ids, these ids are odd provider ids. This option is responsible
                                                          // for displaying only odd providers with the ids that are added in the given array.
                                                          // If oddProviders and oddProviderIds options are both provided, the oddProviderIds option will be used only, as it is with a higher priority.
        obj market -> The default market and value (value is used only for over/under market) to display. If market is not set the default market
                      will be '1x2'.

                      Available market names: "1x2", "overUnder", "both_score", "double_chance"
                      Available market values: This depends on the response that is received for the overUnder market.

                      Example: "market": {"name": "1x2"},
                      Example: "market": {"name": "both_score"},
                      Example: "market": {"name": "double_chance"},
                      Example: "market": {"name": "overUnder", "value": "0.5"}
        boolean enableBetslip -> When this option is enabled the market links will be disabled and the market click will lead
                                 to populating the betslip widget.
        boolean canSelectMarkets (true/false) -> // Displays a dropdown with a filter for the different kinds of markets
                                                 // Currently supported markets: '1x2', 'over/under', 'both teams score', 'double chance'
                                                 // If this option is not provided to, or not set to true the widget options,
                                                 // the market dropdown wont be displayed
        boolean displayBetterStats -> When the option is enabled, the result of the game statistics with a better indicator is in contrast color.
        string lang: 'en',    // the language in format like: en, bg, ru and etc.
        string apiKey: '',
        string apiURL: '',
        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
    }

Team comparison 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.

Adding Team comparison widget in blocky

You can add the Team comparison widget by selecting the +button in Blocky and then Football widgets.

To use the Team comparison widget, follow the steps:

1. In the Team 1 box, fill in the name of the first team you want to compare.
2. Then, fill in the Tournament / Season boxes.
3. Repeat and fill in the required information for Team 2.

Selecting statistics to display

The widget allows users to choose what statistics to display when comparing two teams, such as Matches played, Draws, Defeats, Goals scored, Goals conceded, and more.

Adding odds data

Similarly to the Player H2H widget, the Team comparison widget lets you add odds after your team comparison section. To do that, you must select a team, a match, bookmakers and markets to display.

Video example