Match widget
Description
The Match widget adds statistical and odds information about a specific match to the body of your article (video or gallery).
The widget is designed to provide match information before, during, and after a game. As the game begins and progresses, and your data provider adds more information we instantly make this information available in the widget.
Bind the widget to HTML DOM
Make sure that you have the loader already set up on your website.
If not, follow our guide:
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"
<div data-widgetId="widget-match"></div>
- Bind the widget with initial options. The all available options can be seen below
<div data-widgetId="widget-match" data-options='{...}'></div>
- The optional "data-options" attribute:
{
int eventId, -> // Unique identifier of the resource.
string lang -> // The language which the widget with work with. Currently the widget works with the following
// languages: "bg", "ro", "en".
// The language property is also passed to the API with "Accept-Language" header
string oddClient -> // Identifies the client for which to return filtered bookmakers with affiliate URLs.
// Without the parameter, can not sort odd_providers or provide affiliate links.
// Instead, it will sometimes give a 'coupon' key with the odds of building URLs. header
// NB! This option is mandatory; otherwise, the odds wont be displayed
string apiURL -> // The URL of the API for football information
string apiKey -> // The key for the authorization header, which will be base64 encoded
int mainOddProvider -> // The id of the odd provider that will be displayed in the header section of
// the match widget. If left empty, no odd providers will be displayed in the
// header section
string[] hideTabs -> // The following option controls which tabs will be hidden. This option accepts a string array.
// The accepted values are the following:
// overview -> Overview tab
// details -> Details tab
// squads -> Lineups tab
// stats -> Stats tab
// standings -> Standings tab
// odds -> Odds tab
// h2h -> H2H tab
// If an empty array is passed or the option is omitted, all of the tabs will be displayed.
string activeTab -> this option opens given tab as default if exists.
Else displays default tab.
Value can be enum(overview, details, squads, stats, standings, odds)
boolean canSelectMarkets -> // Show/Hide markets dropdown
boolean displayOdds -> This option toggles the odds
string[] teamIds: This parameter accepts one or two teamIds. When this parameter is passed the next match for the given team match is displayed.
If two teamIds are passed the next match between the two teams is displayed.
!Important - The parameter `eventId` is always prioritzed before `teamIds`.
boolean previousMatch: This parameter is used in combination with teamIds, if this parameter is passed the previous match for the given team(s) is displayed.
boolean displayTimeline -> This option toggles timeline in Details tab.
!Important displayTimeline works only if event status type is 'notstarted'
boolean hideEvents -> This option toggles events with a minute 0 in Timeline section in Details tab.
boolean addGoalsToTheTop => This option adds goals to the top,
string homeTeamColor => This option defines the Home team color (Hex or RGB format),
string awayTeamColor => This option defines the Away team color (Hex or RGB format),
boolean useServerColors => If there are no set colours in the config and the value of this option is set to true, the team colours from the /v2/matches/${match_id} endpoint response are set as the home and away team colours // If the value of this option is false and there are no colours set in the config the default blue and red colours are set for the given teams // If a team does not have a colour in the response and there is no color set in the config, the default color for home or away team is set.
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
boolean standbyMode => When this option is set to true and if no default open tab is set, when the match has not
started yet the H2H tab is opened by default, and when the match starts, the overview tab is opened
}
Match 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 a Match widget in Blocky
To add a Match widget in Blocky, first, select a team you want to display and you will be provided with a list of upcoming/past/interrupted matches to choose from. For upcoming matches, you can also select the bookmakers to be integrated into the widget.
After you select the match you want to include in your content body, select the Default tab to choose which tab of the widget you want to appear in the front position–Overview, Details, Squads, Stats.
Adding a H2H section
The Match widget lets you compare the performances of two teams by putting them Head-to-Head (H2H).
In simple words, by adding an H2H tab to the ones already there–Overview, Details, Squads, Stats–, you can display the history of the matches between two teams. It is something like the Player H2H widget but for teams
Information after a match
After a match has finished, the widgets will preserve all information it has collected but will not show odds anymore.
Video example
Updated almost 2 years ago