US Widgets
Welcome to US widgets docs!
Available widgets
List of available widgets can be found here: US Widgets
Public API
Including widget on page
First, you need to include the widgetloader script (USW widgets only support https protocol). The 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/uscommon/widgetloader" data-sr-language="en_us" async></script>
Note that we're using 'uscommon' client here. For custom widgets, you must replace this client alias with your own, which will be provided to you at the time of setup.
Additionally, you can provide the initial matchId and teamId to be used by all widgets. If you set the matchId directly on the widget, the Id will be fixed to it. If you set it through the widgetloader, it will be able to change by selecting matches in the matchList or seasonFixtures widgets.
<script type="application/javascript" src="https://widgets.media.sportradar.com/uscommon/widgetloader" data-sr-language="en_us" data-sr-match-id="20716135" async></script>
The widgetloader script will expose an API via a global function (USW). Once loaded, it will also search for all elements with the 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 attribute names.
<div class="sr-widget" data-sr-widget="us.match.score" data-sr-match-id="20716135"></div>
Programmatic 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/uscommon/widgetloader","USW", {
language: 'en_us',
matchId: '20716135', // default matchId to be used by all widgets
});
// start using global USW object
USW('addWidget', '#myWidgetDiv', 'us.match.score');
</script>
After this script executes (immediately), the global function USW will immediately be available for you to use. You can immediately add widgets,
but they will only load once the framework and all dependencies are loaded. Click here for complete API documentation.
With this snippet you can also change what global variable the famework will consume by changing "USW" parameter of the function to something else.
Styling
The preferred way to style widgets is to send styling specifications / designs to the widgets development team, and we will style widgets for you. In this case, a css file is hosted by us. You can of course write your own styles--just override the proper css classes.
.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, the 'us.match.score' 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="us.match.score" data-sr-match-id="20716135"></div>
<!-- include widgetloader script -->
<script type="application/javascript" src="https://widgets.media.sportradar.com/uscommon/widgetloader" data-sr-language="en_us" async></script>
</body>
</html>
Advanced example
In this example, we will add a 'us.match.score' widget and change the match id every three seconds. When the "End this thing" button is clicked, the 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/uscommon/widgetloader","USW", {
language: 'en_us',
});
var matchIds = [20716135, 20716129, 20716131];
var ix = 0;
var interval;
function addOrUpdateWidget(callback) {
USW('addWidget', '.sr-widget', 'us.match.score', { 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., a licensing error will pop up. There are six 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.
