General Information

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

For each method of embedding widgets you will need to register for a free trial to our RESTful data APIs in order to pull relevant player, match, or season IDs. For more information on these APIs, click here.

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

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

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.

Parameters

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

Parameters

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

Parameters

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

Parameters

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

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

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

Removes a widget on a given DOM element or selector.

Parameters

Parameters

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

Languages

Supported Language Codes

NCAA Conferences and Divisions

NCAA Football

NCAA Basketball

Return to top