Hello and welcome to this how-to guide on how to get access to Sportmonks widgets and how to use them in your web application.
In this how-to guide we will look at the required steps for making use of our widgets. The steps are as followed:
Request widgets
Set your domain
Configure your widget
Copy and paste embed code into your application
If you are interested in one or more of our widgets, you can request them at my.sportmonks.com. You will have to create an account if you don't have one already. In mySportmonks go to the My Widgets page under Football Widgets. This is the Widgets overview page where you can manage your widgets. From here you can request the widgets you are interested in!
When selecting widgets you can also choose if you want the Basic or the Advanced version of the widgets. In short, the advanced widgets have more data features and more options for customization. For example, the standings widget advanced offers Live standings and the Livescore Widget basic will not have access to the match center. Advanced widget users also have the option to configure colors used in the widget and use their own brand logo at the footer of the widgets.
Some widgets are based on the leagues you will have in your widget product. For example the Livescore Widget shows only fixtures of the leagues you have included in your widget product. If you select such a widget you will automatically go to the league selection page before you can finish your request.
Here you can search leagues based on country and/or name and (de)select the leagues you want access to in your widgets. When you are done, click on the Next button which leads to the overview page. On this page you have an overview of the selected widgets and leagues, so you can check once more your request before submitting it.
After submitting your request the sales team will contact you within 24 hours with a price proposal. After coming to an agreement about the price proposal you can subscribe at the My Widgets page to your new widget product.
You don't need an API subscription to request widgets. An only widgets subscription however doesn't give you access to the Football API.
After adding the widgets add-on to your subscription you will have to set your domain in the Widgets Settings page or in the My Widgets page. The domain you enter here is the only domain from where you will be able to host our widgets. For example if you enter sportmonks-widgets.com as domain, the widget will only be authorized on that domain.
Make sure you have entered your domain correctly. Otherwise the widget cannot fetch and show the correct data.
After setting your domain, you can visit the Widgets Configurator page. On this page you can view a live preview of widgets and configure them to your needs. The configurations you are able to do, depend on the type of widget and if you have the basic or the advanced variant of the widgets. The following customization options are available for every widget.
Theme - Select a default theme (light/dark)
Theme switch - Option for showing or hiding theme switch (between dark and light mode) in widget
Font - Select the font used in the widgets
Colors (only advanced) - Select the colors used in the widgets
While you are configuring your widget, its live preview will be updated. You can also view the live preview in different screen sizes, such as mobile, tablet, desktop and responsive.
On the Widget Settings page the following configurations can be saved so they will be used across all your widgets:
Domain
Timezone
Colors (only advanced, also configurable per widget)
Brand (only advanced)
Once you configured your widget to your needs, you can get your generated embed code by clicking on the 'Get embed code' button on the Configurator page. The following overlay will be shown.
There are three code fragments you have to copy. The first fragment is the link to the widget's CSS. You will have to copy and paste this in the head of your web application page. The second fragment is the container in which the widget will be loaded. Place this in the body of a page where you want the widget to be shown. The third one is the JavaScript of the widget. Place this in at the end of of your body. So before the closing </body> tag.
Make sure you paste your widget into an application that runs on the domain you have set in the settings.
If you want to know which widgets we provide, check our widget overview by following the link below.
And that is it! You have successfully added a widget into your web application.
At the moment we offer 1 Livescore widget and 5 international cup widgets:
International Cup Livescore
International Cup Standings
International Cup Standings Slider
International Cup Squads
International Cup Topscorers
At the moment we only have International Cup widgets for the World Cup 2022. We are however working on releasing them for other international cups.
You can check out each widget with its functionalities by clicking its link above.
More widgets are coming soon!
It is possible to customize our widgets with several configurations. Some configurations are only available for Advanced Widget users. There are general configurations which can be used for every widget. Furthermore each widget has some extra configuration options. Below the general configurations are listed. After that the extra configurations per widget are shown.
Theme - Select a default theme (light/dark)
Theme switch - Option for showing or hiding theme switch (between dark and light mode) in widget
Colors (only advanced)
Font
Show team/league logos - Option for showing or hiding team and league logos
Show player images - Option for showing or hiding player images
Adjusting league filters (only advanced)
Changing match center (only advanced)
Show team/league logos - Option for showing or hiding team and league logos
Show player images - Option for showing or hiding player images
Changing match center (only advanced)
Show team/league logos - Option for showing or hiding team and league logos
Show standing rules
Show live standings (only advanced) - Keep your widget up-to-date during fixtures with the Live Standings variant
Show team/league logos - Option for showing or hiding team and league logos
Show standing rules
Show live standings (only advanced) - Keep your widget up-to-date during fixtures with the Live Standings variant
Preferred Group - Slide automatically to the group of your choice when the widget is loaded
Show team/league logos - Option for showing or hiding team and league logos
Show player images - Option for showing or hiding player images
Show Team Select - Option for letting users switch between teams in the widget
Show team/league logos - Option for showing or hiding team and league logos
Show player images - Option for showing or hiding player images
Show row amount - Change the default amount of rows shown
At the moment we only have International Cup widgets for the World Cup 2022. We are however working on releasing them for other international cups.
In this section we will guide you to all the screens and functionalities you and your customers can expect to see, when using the livescore widget.
When people visit your widget, the first thing they will see is an overview of all fixtures that are played that day. The fixtures shown depend on your subscription and configuration of your widget. Per fixture a match tile is displayed with both team names and live scores of the match. Also the status of the game is shown (eg. FT) or if a fixture is LIVE, the current minute of the game. The most important events of a match (cards and goals) can be viewed by clicking on a match tile. If you have the advanced variant of the widget you can show a details link which leads to the match center.
Besides viewing the list of today's matches the livescore overview page also has a couple of handy functionalities. You can filter on a certain league with the league select, you can search on teams with the search bar. You can also view only fixtures that are inplay by clicking the LIVE-button. And lastly you can view schedules/results of other days, by using the calendar or the date buttons.
By clicking on a fixture's details link, you will go to the match center of that fixture. The match center page displays extensive information about a match. The data shown depends on the coverage of the league of the match. There is always a live scoreboard displayed, with both teams, livescore and goal scorers. Other relevant information, such as league info, referee, date and temperature is also displayed on the scoreboard.
As you can see above there are several tabs beneath the score board. Each tab shows different data about a match.
The several tabs and data shown in each of them are listed below
Here you can view data that is relevant before a match. The following data is displayed
Sidelined players
H2H Results
Venue information
Weather information
On this tab you can view team statistics en trends about the match. Each statistic is compared between teams.
Trend data is graphically shown on a timeline. Possession, goals, shots, attacks, corners and cards trends are visible.
The lineups and bench of both teams are visible on the Lineup tab. The lineups are visible in a list as well as in a graphical formation field. The coaches and formations of both teams are also displayed
All events are displayed in the events tab. Per event it is clear what event it is about, when it happened and which player(s) are related to it.
Besides all match events, commentaries are also shown in Events. Commentaries are pieces of text about an event. Comments are shown on a vertical timeline and important ones (goals and cards) are highlighted.
On the last tab historical data from matches between the two teams are shown. The following information is displayed:
Last 5 (5 or less) direct confrontations and their scores
Total results between the two teams
Recent form (5 matches) of both teams
Statistics of past confrontations
Keep in mind, the data displayed in the widget depends on the leagues you have in your disposal. Also not all leagues have full coverage on all resources. Check our coverage page for more information about resources and coverage.
In this section we will guide you to all the screens and functionalities you and your customers can expect to see per widget, when using our international cup widgets.
This widget shows the full schedule of the tournament that is live updated during matches. The fixtures are shown per stage of the tournament. Per fixture a match tile is displayed with both team names and logos. Between the teams the score is shown for played or inplay matches. If a fixture has not started yet, the start time of the fixture is displayed. Above the score the status of the game is shown (eg. FT) or if a fixture is LIVE, the current minute of the game. The most important events of a match (cards and goals) can be viewed by clicking on a match tile. If you have the advanced variant of the widget you can show a details link which leads to the Match Center. The additional content of the match tile and schedule depends on the type of tournament. For example the widget for the World Cup shows fixtures per day and displays the venues of the match on its match tiles.
This widget shows the tournament's group standings. Each group standing shows the ranking of the teams with their games played, won, drawn, lost, goals for, goals against, goal difference and points statistics. Default the standing rules of the group is also displayed. For example for World Cup groups it is displayed that the first two teams in the standing will go through to the Round of 16 stage. Standing rules can be hidden in the configurator of the widget. Advanced users of the widget have the option of showing live standings in their widget. With live standings the standings are updated live during games, so the virtual ranking of the teams is always displayed.
The standings slider also displays group standings of a tournament, but shows it horizontally and can be swiped across the screen. Always one group standing is displayed with the same standing details as the standard standings widget. You have the option to set your preferred group in the configurator. When setting your preferred group, the widget automatically slides to that group when it's loaded. Just as the standings widget live standings are also an extra optional feature for Advanced widget users.
The squad widget displays a chosen team's squad for a certain tournament. All players of the squad are displayed ordered by their position in the field. All player records include some details and statistics of the player which are all sortable. The following player details and statistics are shown:
Jersey Number
Name
Position
Nationality (depends on widget)
Age
Games Played
Played in Starting 11
Substitutions in
Substitutions out
Goals
Assists
Yellow Cards
Red Cards
Yellow-red Cards
Minutes played
Rating
The availability of the various player details and statistics depends on the coverage of the league. Not all leagues have full coverage on all resources. Check our coverage page for more information about resources and coverage.
Advanced users of the widget can also configure the widget to let users switch between the tournament's participating teams inside the widget.
The topscorers endpoint shows the topscorers for goals, assists, yellow cards and red cards in a tournament. At default 5 topscorers per category are shown. This number can be configured in the configurator. Each topscorer is displayed with their rankings, name, photo, team, total, and amount of games. Additionally some extra relevant statistics are shown per category. For example goal scorers have total shots and goal conversion statistics, assist scorers have amount of passes and card scorers have their amount of fouls.
