Match list by Stage / Round widget
Description
The Match list by Stage / Round widget helps you integrate detailed information about a specific match into your posts.
This widget groups matches by tournaments, seasons, rounds, and stages and filters them by dates. Also, you can add odds from different bookmakers, as well as change the widget view–horizontal/vertical–and position it in different places on your page.
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"
<div data-widgetId="match-list"></div>
- Bind the widget with initial options. The all available options can be seen below
<div data-widgetId="match-list" data-options='{...}'></div>
- The optional "data-options" attribute:
Important information:
- This widget can display information only for one odd provider
- Prioritization of parameters if team, season, tounrnament are provided in the same time
1. match
2. season
3. tournaments
NB!: in this case widget will ignore tournaments
{
season: { id: "", round: ""} - With this option you specify for which season will the matches be displayed,
this option is required (season: {id}) the round is optional, it serves
as a filter for which round of the given season will the matches be displayed
seasonIds: ["3231", "2231"] - With this optioon you specify for which seasons the matches will be displayed
seasonIds + teamIds - With the mix of both options you can specify for which season for the given team the matches will be displayed
matchIds: ['275422', '275423'] - Using matchIds you can pass an array of specific match ids that you want displayed
teamIds: ["97", "96", "102"] - Using teamIds you can display all of the matches that the specified teams have played against each other
(DEPRECATED) teamId: "97" - Using teamId you can display all of the matches that are available for the given team. Take into consideration
that all of the available matches that are stored will be displayed, this may cause some UI issues
like slow page load and etc.
tournamentIds: ["3", "2"] - Using tournamentIds you can display matches from the specified tournaments
teamId + season - Using a combination of both teamId and season id will result in making a request for the team matches
filtered by the specified season
teamIds + season - Using a combination of both teamIds and season id will result in making a request for the matches in which the
specified teams are playing against each other in the given season
teamId + tournamentId - Using a combination of both teamId and tournamentIds will result in making a request for the matches
in which the team has played for the given tournament
teamIds + tournamentIds - Using a combination of both teamIds and tournamentIds will result in making a request for the matches
in which the team has played for the given tournament
view: "" - Options: "normal" and "horizontal"
Depending on which option is passed a different UI representation of the widget will be displayed.
normal - This will display the matches as a normal list. This is the default option that will be set
if no view is passed.
horizontal - This will display the matches as a carousel.
title: "" - Controls the text for the title in the widget header.
NB! - When "showToggleButton" is disabled or not passed and
"title" is empty or not passed the widget header will be hidden.
viewMore: { label: "" } - Controls the text for the link that will be displayed in case there is no odd provider
available for the given match. This link will be automatically constructed using the
LINK_OPTIONS or LINK_OPTIONS_V2 match information from the widget loader.
filters: { date: { from: "", to: "" }, order: { criteria: "", direction: "" }, grouping:{ criteria: "" } }
- If you do not specify a tournamentIds, teamId, teamIds, season, matchIds and a date filter is passed a request will be made
for the matches for the specified date filter.
- This option is complex and it is broken down into several parts: date, order, grouping
- date - This filter limits the match results to the specified range given to "from" and "to" fields. The fields
"from" and "to" can be used separately to indicate indicate a start date (from) or just an end date (to).
DATE FORMAT - YYYY-MM-DD
- order - This filter is responsible for the order in which the matches are arranged.
"criteria" - Available values: 'date'
"direction" - Available values: 'asc', 'desc'
- grouping - This filter is responsible for the way the matches are grouped
NB! - This option works only when the set view is "normal" (view: "normal")
"criteria" - Available values: 'tournament' and 'round'
oddsConfiguration: { showToggleButton: false/true } - Controls whether the odds toggle button in the header is displayed or not.
If there is no matches with odds providers Toggle button won\'t be displayed even though is set with 'true'
NB! - When "showToggleButton" is disabled or not passed and "title" is empty or not passed the widget header will be hidden.
oddProviderid: "" - Controls which odd provider will be displayed for the matches. If an odd provider with the
specified "id" does not exist no odd provider will be displayed.
If the "oddProviderId" field is not passed, the first odd provider from the list received from
the back-end will be displayed.
limit: 20 - Limits the match list result by the given amount passed
offset: 0 - Controls the offset of the result, usually it is used with the "limit" option
lang: "" - Controls the language in which the widget will be displayed.
Supported languages: "en", "bg", "ro"
showTournamentLabel: true/false - Controls the visibility of the tournament labels for each match.
Default value if this options is not passed is: true
"displayNumberOfMatches": {
"previous": "10",
"next": "10",
"startTime": "2020-11-02"
} - This option controls the number of previous and next matches starting from a specified date (startTime), if
no start date is passed, the widget will take the current user date.
apiKey: "" - The key used for authorization against the back-end
apiURL: "" - Base url for the back-end that will be used
oddClient: "" - List of odd providers that will be returend from the back-end,
tournamentDropdown:true - Toggles a dropdown for filtering all of the matches by tournament
activeRound: "9" - Adds data attribute data-active-round="true" to the specified round, this is only applicable when the user
has set filters: {grouping: {criteria: "round"}} and is using season: {id: ""} for displaying the list of matches
matchStatusDropdown - Toggles a dropdown for filtering all of the matches by match status type: Live, Upcoming, Finished
withStandingsLink: true/false - Displays "/ Standings" after the tournament name. This text link is configurable using the LINK_OPTIONS_V2 from the widget loader
Widget loader configuration: stadings_tournament: { url: "/some-link-{standingsId}"} or standings_stage: { url: "/some-link-{standingsId}"}.
If both parameters are passed (standings_tournament and standings_stage) standings_tournament is with priority
withTournamentCountryName: true/false - Display the country name of the tournament next to the tournament name and it is a link text configurable using the tournament link option in the widget loader.
ignoreTournamentOrder: true/false - If this option is passed the tournaments are arranged in an alphabetic order.
"banners": {
"general":
{"image": "<image link or base64 encoding>",
"imageAlt": "<image alt>",
"link": "<link for the image>,
"newTab": <open in new tab or the same>},
"matches": [
{"id": <match id>,
"image": "<image link or base64 encoding>",
"imageAlt": "<image alt>",
"link": "<link for the image>,
"newTab": <open in new tab or the same>}
]} - With this option banners can be set for all of the matches in the list using the "general" option or set a banner for specific matches using the "matches" option.
If both "general" and "matches" options are passed, if specific matches do not have banners, those matches will be set with the banner specified in the "general" option.
displayActiveRound: true/false - This option is used in combination with season or tournamentIds (tournamentIds using a single tournament). When this option is set to true it will display the matches for the current active round.
enableInputFilters: true/false - This options enables the input filters for filtering by team, country or tournament
oddsView: upcoming/finished/mixed - Depending on the configuration the odds will be displayed in the following way:
- upcoming: The odds will be displayed on the right side of match
- finished: The odds wont be displayed
- mixed (default): The odds will be displayed under the match
matchStatusFilter: upcoming/finished/live - Controls the matches that will be displayed depending on the match status.
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
"theme": "dark"/"light" -> Controls the theme of the widget, the available options are "dark" and "light"
}
Match list by Stage / Round 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.
Match list by Stage / Round widget in blocky
Match list by Stage / Round widget
-
Tournament, Season, Stage, and Round
To offer detailed match information, you first need to select the tournament, season, stage, and round you want to display matches. -
View
By selecting the View box, you can display your widget horizontally or vertically on your web page. -
Header
In the Title box, you can configure the title that will display on top of your match list. -
Labels
When you enter a label in the Label box, you create a text (e.g., View more) with a link (URL) leading to a different page. This is useful when sending readers to a page with additional information about a specific match.
Note that the label will be displayed only when there aren’t odds for the given match.
- Filters
In this section of the widget configuration, you can use several filters to get detailed information about a match. You can set dates, arrange matches in ascending/descending order, and select bookmakers.
Video example
Updated almost 2 years ago