Widgets
Welcome to widgets docs!
Available widgets
List of available widgets can be found here: Widgets
Widgets correlations
Examples of correlations between widgets can be found here: Correlations
Public API
Including widget on page
First you need to include the widgetloader script (USW widgets only support https protocol). Widgetloader will request additional assets on demand, when widgets start to get included on the page.
<script type="application/javascript" src="https://widgets.media.sportradar.com/sportradar/widgetloader" data-sr-language="en" async></script>
Note that we're using 'sportradar' client here. For custom widgets you must replace this client alias with yours.
Additionaly you can provide initial matchId and teamId to be used by all widgets. If you set the matchId directly on the widget, it will be fixed to it. If you set it through widgetloader, it will be able to change by selecting matches in matchList or seasonFixtures widgets.
<script type="application/javascript" src="https://widgets.media.sportradar.com/sportradar/widgetloader" data-sr-language="en" data-sr-match-id="11483309" async></script>
Widgetloader script will expose an API via global function (USW). Once loaded it will also search for all elements with data-sr-widget attribute and use the value of that attribute to automatically add widgets to the page. Additional properties can be included as data attributes, where camel case javascript properties need to be converted to dash separated sttribute names.
<div class="sr-widget" data-sr-widget="team.comparison" data-sr-match-id="11483309"></div>
Programatic inclusion
If you want to add widgets via javascript (as opposed to only having divs placed around the page), you can add the following code snippet to the
head section of your page:
<script type="text/javascript">
(function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
)})(window,document,"script","https://widgets.media.sportradar.com/sportradar/widgetloader","USW", {
language: 'en',
matchId: '11483309', // default matchId to be used by all widgets
});
// start using global USW object
USW('addWidget', '#myWidgetDiv', 'match.scoreboard');
</script>
After this script executes (immediately), global function USW will immediately be available for you to use. You can immediately add widgets,
but they will load once framework and all dependencies are loaded. Click here for complete API documentation.
With this snippet you can also change what global variable will framework consume by changing "USW" parameter of the function to something else.
Styling
The preferred way to style widgets is using style generator on the Sportradar store - simpy include the generated file on your page. If you need more fine grained controll over styling, you can write your own styles, but we highly recommend to only style classes with '.srt-' prefix, which are meant for branding. We offer no guarantee that any other classes or internal widget structure won't change in the future - proceed at your own risk. You also need to use at least 2 class selectors for every rule ('.sr-bb' is always available on overy widget), so they are not overridden with our css normalization rules.
.sr-bb .srt-base-1 {
background-color: #eee;
}
All widgets' class names are prefixed with 'sr-' or 'srt-' in order to avoid conflict with the rest of your page and we have a css normalization rules of form of '.sr-bb div {}'. Css isolation will only work as intended if the rest of your page isn't using 'sr-' or 'srt-' prefixes and you don't have rules for element selectors (e.g. 'div', 'span').
Simple Example
Here 'team.comparison' widget will automatically be included on the page once the widgetloader finishes loading. It will use the provided matchId prop from the data attribute.
<!DOCTYPE html>
<html>
<head>
<title>Widgets test</title>
</head>
<body>
<!-- widget container -->
<div class="sr-widget" data-sr-widget="team.comparison" data-sr-match-id="11483309"></div>
<!-- include widgetloader script -->
<script type="application/javascript" src="https://widgets.media.sportradar.com/sportradar/widgetloader" data-sr-language="en" async></script>
</body>
</html>
Advanced example
In this example, we add a 'team.comparison' widget and change match id every three seconds. When "End this thing" button is clicked, widget is removed from the page
<!DOCTYPE html>
<html>
<head>
<title>Widgets test</title>
</head>
<body>
<div class="sr-widget"></div>
<button onclick="endThisThing()" >END THIS THING</button>
<script>
(function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
)})(window,document,"script","https://widgets.media.sportradar.com/sportradar/widgetloader","USW", {
language: 'en',
});
var matchIds = [9600485, 9600489, 9600497];
var ix = 0;
var interval;
function addOrUpdateWidget(callback) {
USW('addWidget', '.sr-widget', 'team.comparison', { matchId: matchIds[ix]}, callback);
if (++ix >= matchIds.length) { ix = 0; }
}
addOrUpdateWidget(function() {
console.log('first widget rendered');
interval = setInterval(addOrUpdateWidget, 3000);
})
function endThisThing() {
clearInterval(interval);
// USW('removeWidget', '.sr-widget');
// it also accepts dom element:
USW('removeWidget', document.querySelector('.sr-widget'));
}
</script>
</body>
</html>
Licensing errors
When a client doesn't have a license for a specific widget/tournament, etc, licensing errors will pop up. There are 6 possible licensing errors.
T - Tournament error
When trying to show data in a widget for an unlicensed tournament.
W - Widget error
When trying to show an unlicensed widget.
D - Domain error
When a widget is being shown on a domain that hasn't been whitelisted.
