Widget Docs
Coverage MatrixDocumentationChange LogLog InContact Us
Widget Docs

General Information

Have Sportradar manage your sports visualizations and avoid timely development and maintenance costs.

Widgets Introduction

Click here to view our Widgets Showcase.

The Widget Showcase provides an interactive display of all widgets available. Each widget can be viewed in Desktop, Tablet, and Mobile widths, and with or without a border.

Click the three-barred icon to view an individual widget in a new window. Click the carrot icon to view integration code samples, and copy to your clipboard.

Each widget is built, hosted, and maintained by Sportradar. We offer customizable widgets for:


🗝️

Access & Authentication

Widgets are currently unavailable in your Console account.

Reach out to Sportradar Support for widget product assistance.



Available Widgets

Our widget documentation is divided by Sport/League in the sidebar dropdown. Currently offered: nfl, nba, mlb, nhl, ncaab, ncaaf, soccer, and golf.

Within each Sport/League, we provide several Namespaces that define the type of widget. Current namespaces: betting, common, event, match, player, season, and team.

Widgets will be accessed using a combination of Sport/League, Namespace, and Widget Name. For example, our NFL Play by Play widget is represented as us.match.nfl.PlayByPlay. Reference the individual widget documentation pages or our Widget Showcase for proper syntax.

Every widget we offer contains its own dedicated page, which includes: a widget description, live sidebar and full size samples, a detailed list of valid customizable parameters, and example requests.


Hosted Solutions

Don't have the time or resources to integrate with our Widgets solution?

Consider becoming a customer of our Hosted Solutions! With Hosted, we'll host everything at one URL and control it's look and operation. Reach out to your account rep for more info on this service.



Embedding Widgets

We support two ways of including widgets in a web page: declarative and programmatic inclusion.

Programmatic inclusion is the most common approach, where we use JavaScript to place widgets in a web page, and it is suitable for modern dynamic web pages where JavaScript is used to manage content, especially in single page websites.

Declarative inclusion lends itself to "static" web pages, where the page composition is not modified after it is loaded from a server. Thus it is sufficient to simply declare the content using HTML tags.

If in doubt use programmatic inclusion, as this will work with any web page. Both approaches, programmatic and declarative, require JavaScript enabled in a browser, which is used to load and run widgets.


Declarative Inclusion

All Sportradar widgets will need to first include the widgetloader script (https protocol), seen in the example on the right sidebar. 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>

By default, all widgets use English as the standard language. You can specify the initial language with the language data attribute. Click here for a list of supported languages.

Note that we are using uscommon in the client parameter for this example. 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 changeable by selecting matches in the matchList widget.

<script type="application/javascript" src="https://widgets.media.sportradar.com/uscommon/widgetloader" data-sr-language="en_us" data-sr-match-id="20716135" async></script>
<div class="sr-widget" data-sr-widget="us.match.score" data-sr-match-id="20716135"></div>

An individual widget is declared as an empty HTML element, preferably a DIV element, with the data-sr-widget attribute to specify the name of the widget, and with any other data-sr- attributes to specify the widget props. Individual widget docs specify the list of available props for a widget. The prop names are listed using the camelCase naming convention, which is used in the programmatic inclusion. Using the declarative inclusion we specify props of a widget with attributes on the HTML element, whose names are derived from prop names according to the kebab-case (dash separated) naming convention and prefixed with data-sr-. For example, to specify the matchId prop we would use the data-sr-match-id attribute.

After the widgetloader loads, it searches for all elements with the data-sr-widget attribute. For each such HTML element the widgetloader loads the corresponding widget, specified with the data-sr-widget attribute, then it initializes the widget with any props that are declared with data-sr- attributes, and places it within the HTML element that declared it.

After it is loaded the widgetloader also exposes an API via a global function (which is a property of the window object). This function is named SIR by default, but this can be changed with the n attribute on the script element that included the widgetloader, in case you are already using this name for something else. Although the API is fully functional once the widgetloader is loaded, if you need to use it we recommend you switch from declarative to programmatic inclusion. With programmatic inclusion the global API function is immediately available even before the widgetloader is loaded and caches any invocations until the widgetloader loads, and then executes them.


Programmatic Inclusion

<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.sir.sportradar.com/sportradar/widgetloader","SIR",{
    language: 'en_us',
    matchId: 20716135, // default matchId to be used by all widgets
});
// start using global SIR function
SIR('addWidget', '#myWidgetDiv', 'us.match.score');
</script>

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:

<code class="language-javascript"><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.sir.sportradar.com/sportradar/widgetloader","SIR",{
    language: 'en_us',
    matchId: 20716135, // default matchId to be used by all widgets
});
// start using global SIR function
SIR('addWidget', '#myWidgetDiv', 'us.match.score');
</script></code>

After this script executes, the global function SIR will immediately be available for you to use. If you would like to name the global function something other than SIR, you can do so by substituting the SIR value (the 5th parameter in the immediately invoked function expression) inside the widgetloader snippet with something else.


Data API Account

You will need access to our RESTful data APIs in order to pull relevant player, match, or season IDs to embed your widgets. A free trial of these APIs can be created here. Work with your account representative to ensure you have the appropriate access.

Please reference the below table for a breakdown of each API needed, as well as its corresponding widget product.

WidgetAPI Product
MLBGlobal Baseball
NBAGlobal Basketball
WNBAGlobal Basketball
NCAA FootballGlobal American Football
NCAA Men's BasketballGlobal Basketball
NFLNFL
NHLGlobal Ice Hockey
SoccerSoccer
GolfGolf

For more information on these APIs, click here.



Public API / SIR

Sportradar's widgets have several global settings available after the widgetloader script is loaded. These can be leveraged to ensure the default setup for your widgets is to your liking. Below are the global options and methods, with samples included.

Global Options
NameTypeDescription
languagestringany of our supported language codes
clockTypestring'12' or '24'. Clock type to use when displaying time.
oddsTypestring'eu', 'uk' or 'us'. Odds type to use across all widgets: UK (fractional), EU (decimal) or US (american).
matchIdstring|numberdefault match for all widgets to initialize. Use this global matchId if you want widgets to automatically change match when it is selected by some other widget (ie. match list)
teamIdstring|numberdefault team id for all widgets
debuganyIf set to anything but false, logging will be enabled with the log level 'warn'; the latter can be changed with the logLevel option. By default nothing is logged. When using declarative inclusion (HTML5 script tag) it is sufficient to specify the attribute data-sr-debug without assigning it a value. The mere presence of the attribute will enable the debug option.
logLevel'error'|'warn'|'info'Sets the initial log level. Logging must first be enabled with the debug option.

Examples

Initializing SIR widgets via script tag where each option is given as 'data-sr-' attribute and is itself written in 'kebab-case' instead of 'camelCase'.

<script type="text/javascript" src="https://widgets.media.sportradar.com/uscommon/widgetloader" data-sr-language="en_us" data-sr-match-id="11483309" data-sr-debug></script>

Initializing SIR widgets via code snippet. This pattern allows you to start using the SIR variable as soon as this code completes. All commands executed before the framework is completely loaded are stored and executed once the framework is loaded.

<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","SIR", {
        language: 'en_us',
        debug: true
    });
</script>

Note that SIR can be replaced with a name of your choosing. This is where we define name of the global variable. For example, if opted to instead use 'SirWidgets' our code would look like this:

<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","SirWidgets", {
        language: 'en_us',
        debug: true
    });
</script>

Methods

The widgetloader provides an API that can be used by invoking the global SIR function, where the first parameter to the SIR function is the name of an API method to invoke, and any further parameters to the SIR function are parameters for the API method. For example, if we want to add the scoreboard widget named "us.match.score" inside a DIV element with the class ".my-div", then we would make the following SIR function invocation:

// syntax: SIR(<methodName>[, ...arguments]);
// example of adding scoreboard widget on an element
SIR('addWidget', 'div.my-div', 'us.match.score');

The API consists of the methods listed below.


<static> addWidget(domElOrSelector, name [, props] [, callback])
Parameters
NameTypeArgumentDescription
domElOrSelectorstring | DomElementDOM element or selector for placement of the widget
namestringWidget name
propsobjectoptionalWidget props
callbackfunctionoptionalCallback that is triggered when the widget is rendered. Triggers only once - this is not a callback that triggers whenever something has changed in the widget itself due to user action or async data loading.

<static> changeClockType(clockType)

Changes the clock type to 12-hour or 24-hour. Forces a reload of all widgets. The internal widget state is lost.

Parameters
NameTypeDescription
clockTypestring'12' or '24'

<static> changeLanguage(language)

Changes the language to the provided parameter. Forces a reload of all widgets. The internal widget state is lost.

Parameters
NameTypeDescription
languagestringLanguage code. List of valid codes can be found here.

<static> changeLogLevel(logLevel)

Changes the log level for troubleshooting any errors. Logging must first be enabled by setting the debug option to true.

Parameters
NameTypeDescription
logLevelstring'error' | 'warn' | 'info'

<static> changeOddsType(oddsType)

Changes the odds type to UK (fractional), EU (decimal) or US (american). Forces a reload of all widgets. The internal widget state is lost.

Parameters
NameTypeDescription
oddsTypestringValid values: 'eu', 'us' or 'uk'.

<static> changeTeamInvert(teamInvert)

Changes the team invert settings, used to set the home/away side of a widget. This can be set across all sports ("all"), or only for selected sports ("sid") or real categories ("rcid"). By default this setting is inverted for all sports ("all: true") which means away teams are displayed on the left and home teams are displayed on the right. To reverse this set it to false. This will force a reload of all widgets. The internal widget state is lost.

Accepts a parameter of the below shape. Each attribute is optional.

Parameters
NameTypeDescription
teamInvertobjectExample: { sid: { 3: true }} inverts teams for all baseball games
NameTypeDescription
allbooleanInvert all games
sidObject.<string, boolean>Dictionary of sport ids to invert
rcidObject.<string, boolean>Dictionary of real category ids to invert
utidObject.<string, boolean>Dictionary of unique tournament ids to invert

<static> check(callback)

Checks all DOM elements with a data-sr-widget attribute set and instantiates them if they are not already instantiated. If a DOM node with a widget is removed, this function will also destroy the widget instance.

Parameters
NameTypeDescription
callbackfunctionCallback triggered with array of all widgets instantiated. Each array item is an object with following properties: widgetDomElement, widgetInstance, widgetClass

<static> removeWidget(domElementOrSelector)

Removes a widget on a given DOM element or selector.

Parameters
NameTypeDescription
domElementOrSelectorstring | DomElementDOM Element or selector for the widget to be removed

<static> updateWidget(domElOrSelector [, props] [, callback])
Parameters
NameTypeArgumentDescription
domElOrSelectorstring | DomElementDOM element or selector for placement of the widget
propsobjectoptionalWidget props
callbackfunctionoptionalCallback that is triggered when the widget is rendered. Triggers only once - this is not a callback that triggers whenever something has changed in the widget itself due to user action or async data loading.


Styling

The preferred way to style widgets is to send styling specifications and designs to Sportradar, and we will style the widgets for you. In this case, a css file is hosted by Sportradar. If you would prefer to author your own styles, you must override the proper css classes.

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 is not using sr- or srt- prefixes and you do not have rules for element selectors (e.g. div, span).

.sr-bb .srt-base-1 {
    background-color: #eee;
}

Simple Example

In this simple example, 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="33294103"></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 WIDGET" 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","SIR", {
            language: 'en_us',
        });

        var matchIds = [20716135, 20716129, 20716131];
        var ix = 0;
        var interval;

        function addOrUpdateWidget(callback) {
            SIR('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);
            // SIR('removeWidget', '.sr-widget');
            // it also accepts dom element:
            SIR('removeWidget', document.querySelector('.sr-widget'));
        }

    </script>
</body>
</html>


Authorization and Licensing Errors

To display a specified widget on your site you will need authorized access to that widget and your domain(s) whitelisted for access.

Should you not have a proper license for a given widget, a licensing error will be returned. There are six possible licensing errors, listed below.

Licensing Errors
ErrorDescription
TTournament error (Returned if the provided tournament is unlicensed)
WWidget error (Returned if the provided widget is unlicensed)
DDomain Error (Returned if your domain has not been whitelisted)
PNo valid package error
LLicensing info did not reach the client
FThe data feeds returned a license error


Languages

Supported Language Codes
CodeDescription
enEnglish
en_usEnglish
deDeutsch
frFrançais
itItaliano
trTürkçe
hrHrvatski
skSlovenčina
slSlovenščina
noNorsk
seSvenska
daDansk
esEspañol
nlNederlands
plPolski
ptPortuguês
csČesky
lvLatviešu
fiSuomeksi
ruРусский
thไทย
zh简体中文
bsBosanski
huMagyar
bgБългарски
srCрпски
elEλληνικά
roRomână
etEesti
mkМакедонски
ltLietuvių
viTiếng Việt
zht中文繁體
idBahasa
ja日本語
ko한국어
aaالعربية
azeAzərbaycan dili
kaქართული
hebעברית
sqiShqip
ukrУкраїнська
srlSrpski
meCrnogorski
brPortuguês do Brasil
hyeՀայերեն
swKiswahili
kmខ្មែរ, ខេមរភាសា, ភាសាខ្មែរ
tukTurkmenistan
es_laLatin American Spanish


NCAA Conferences and Divisions

NCAA Football
Division Code
fbsFootball Bowl Subdivision
Conference CodeDescription
aacAmerican Athletic
accAtlantic Coast
big12Big 12
b1gBig Ten
cusaConference USA
indepIndependent
macMid-American
mwMountain West
pac12Pacific-12
secSoutheastern
sunbeltSun Belt
Division Code
fcsFootball Championship Subdivision
Conference CodeDescription
bskyBig Sky
bscBig South
caacColonial Athletic
indepIndependent
ivyIvy League
meacMid-Eastern Athletic
mvcMissouri Valley
necNortheast
ovcOhio Valley
patriotPatriot League
pioneerPioneer League
southernSouthern
southlandSouthland
swacSouthwestern Athletic
Division Code
dIIDivision II
Conference CodeDescription
ciaaCentral Intercollegiate Athletic
gliacGreat Lakes Intercollegiate Athletic
gacGreat American
glvcGreat Lakes Valley
gmacGreat Midwest Athletic
gnacGreat Northwest Athletic
gscGulf South
indepIndependent
lscLone Star
miaaMid-America Intercollegiate Athletics
mecMountain East
n10Northeast-10
nsicNorthern Sun
psacPennsylvania State Athletic
rmacRocky Mountain Athletic
siacSouthern Intercollegiate Athletic
sacSouth Atlantic
dIIIDivision III
Conference CodeDescription
arcAmerican Rivers
ascAmerican Southwest
cciwCollege Conference of Illinois and Wisconsin
centennialCentennial
cccCommonwealth Coast
ecfcEastern Collegiate
e8Empire 8 Athletic
hcacHeartland Collegiate Athletic
indepIndependent
llcLiberty League
mascasMassachusetts State Collegiate Athletic
miaaMichigan Intercollegiate Athletic
macMiddle Atlantic
mwestMidwest
miacMinnesota Intercollegiate Athletic
nescacNew England Small College Athletic
newmacNew England W&M Athletic
njacNew Jersey Athletic
ncacNorth Coast Athletic
naccNorthern Athletics Collegiate
nwcNorthwest
oacOhio Athletic
odacOld Dominion Athletic
pacPresidents Athletic
sciacSouthern California Intercollegiate Athletic
saaSouthern Athletic
usasouthUSA South Athletic
umacUpper Midwest Athletic
wiacWisconsin Intercollegiate Athletic
NCAA Basketball
Division Code
dIDivision I
Conference CodeDescription
aecAmerica East
aacAmerican Athletic
a10Atlantic 10
accAtlantic Coast
asunAtlantic Sun
big12Big 12
becBig East
bskyBig Sky
bscBig South
b1gBig Ten
bwcBig West
caaColonial Athletic Association
cusaConference USA
gwcGreat West
horizonHorizon League
indepIndependent
ivyIvy League
maacMetro Atlantic Athletic
macMid-American Overall
meacMid-Eastern Athletic
mvcMissouri Valley
mwMountain West
necNortheast
ovcOhio Valley
pac12Pacific 12
patriotPatriot League
secSoutheastern
southernSouthern
southlandSouthland
swacSouthwest Athletic
summitSummit
sunbeltSun Belt
wccWest Coast
wacWestern Athletic
Division Code
dIIDivision II
Conference CodeDescription
ccaaCalifornia Collegiate Athletic
caccCentral Atlantic Collegiate
ciaaCentral Intercollegiate Athletic
concarConference Carolinas
accEast Coast
gacGreat American
gliacGreat Lakes Intercollegiate Athletic
glvcGreat Lakes Valley
gmacGreat Midwest Athletic
gnacGreat Northwest Athletic
gscGulf South
hcacHeartland Collegiate Athletic
indepIndependent
lstarLone Star
maiaaMid-America Intercollegiate Athletics
mecMountain East
n10Northeast-10
nsicNorthern Sun Intercollegiate
pacwPacific West
pbcaPeach Belt Athletic
psacPennsylvania State Athletic
rmacRocky Mountain Athletic
sacSouth Atlantic
siacSouthern Intercollegiate Athletic
sscSunshine State
Division Code
dIIIDivision III
Conference CodeDescription
amccAllegheny Mountain Collegiate
acacAmerican Collegiate Athletic
arcAmerican Rivers
ascAmerican Southwest
aecAtlantic East
cacCapital Athletic
centCentennial
cunyacCity University of New York Athletic
cciwCollege Conference of Illinois and Wisconsin
csacColonial States Athletic
cccCommonwealth Coast
emp8Empire 8
gnac3Great Northeast Athletic
hcac3Heartland Collegiate Athletic
indep3Independent
landLandmark
liblLiberty League
littleLittle East
maccMAC Commonwealth
macfMAC Freedom
mscacMassachusetts State Collegiate Athletic
miaaMichigan Intercollegiate Athletic
midwMidwest
miacMinnesota Intercollegiate Athletic
neccNew England Collegiate
nescacNew England Small College Athletic
newmacNew England Womens and Men Athletic
njacNew Jersey Athletic
nacNorth Atlantic
ncacNorth Coast Athletic
neacNorth Eastern Athletic
naccNorthern Athletics Collegiate
northwNorthwest
oacOhio Athletic
odacOld Dominion Athletic
pacPresidents Athletic
skylSkyline
saaSouthern Athletic
sciacSouthern California Intercollegiate Athletic
scacSouthern Collegiate Athletic
stliacSt. Louis Intercollegiate Athletic
sunyacState University of New York Athletic
usasacUSA South Athletic
uaaUniversity Athletic
umacUpper Midwest Athletic
wiacWisconsin Intercollegiate Athletic

Return to top