Betting Entertainment Tools

Widgets Demo

Global SIR API

SIR is a public API, exposed as a global SIR function.

SIR has some global options that can be set in widgetloader script. These options are:

  • language {string}: any of our supported language codes. See Languages.
  • clockType {string}: '12' or '24'. Clock type to use when displaying time.
  • unitType {string}: 'metric' or 'imperial'. Specify which units to use when displaying length, height, weight, temperature and speed.
  • oddsType {string}: 'eu', 'uk' or 'us'. Odds type to use across all widgets: UK (fractional), EU (decimal) or US (american).
  • theme {string|false}: If no theme is specified, it will download the theme created in our client setup process. If set to false no theme will be applied and you will need to use a custom theme. You can create a custom theme on our Widgets demo page and include it on your page. We also have a few public themes that you can use for testing. These are: 'betradar', 'sportradar', 'betradardark' and 'sportradardark'.
  • s5ClientAlias {string}: statistics client alias for widgets, ex. tournament preview, match preview.
  • logLevel {string}: 'warn'|'info'|'error'. Sets initial log level in combination with debug option.
  • debug {any}: if set to true, logLevel will change to warn. false will disable logLevel.

Examples

Example 1
Initialising Widgets via code snippet allows you to start using `SIR` function immediately. All commands executed before framework is completely loaded are stored and executed once 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.sir.sportradar.com/sportradar/widgetloader","SIR", {
        language: 'en',
        debug: true
    });
</script>

Invoking methods listed under "Methods" section on this page can be done by executing global `SIR` function in a following way:

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

Example 2
Note that `SIR` can be replaced by custom name. This is where we define name of the global variable. For example, if we'd want to use 'SirWidgets' instead, we'd initialize our code 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.sir.sportradar.com/sportradar/widgetloader","SirWidgets", {
        language: 'en',
        debug: true
    });
    SirWidgets('addWidget', '#my-div', 'match.scoreboard');
</script>
<div id="my-div"></div>

Methods

# addWidget static SIR(method, domElOrSelector, name, propsopt, callbackopt, onlyServerRenderopt)

Adds a widget on given DOM element or selector.
Note: This replaces content of give dom or element with widget, which will then begin to initialize.

Parameters
Name Type Attributes Description
method 'addWidget' <required>

Method name.
domElOrSelector string | DomElement <required>

Widget DOM element or selector.
name string <required>

Widget name.
props object

Widget props.
silent boolean

This property is available to all widgets. By setting it to true widget error won't display.
onTrack function

On every widget you can use this function to track some events. You can find more information here.
widgetProps * <repeatable>

Other props defined by widget you are including.
callback function

Triggeres only once, when widget is rendered (does not trigger on widget changes due to user action or async data loading.)
onlyServerRender boolean

If true, server will render the widget and populate the given element. User interaction will not work.

# updateWidget static SIR(method, domElOrSelector, propsopt, callbackopt, onlyServerRenderopt)

Updates a widget on given DOM element or selector.

Parameters
Name Type Attributes Description
method 'updateWidget' <required>

Method name.
domElOrSelector string | DomElement <required>

Widget DOM element or selector.
props object

Widget props.
callback function

Triggeres only once, when widget is rendered (does not trigger on widget changes due to user action or async data loading.)
onlyServerRender boolean

If true, server will render the widget and populate the given element. User interaction will not work.

# removeWidget static SIR(method, domElementOrSelector)

Removes a widget on given DOM element or selector.

Parameters
Name Type Description
method 'removeWidget'

Method name.
domElementOrSelector string | DomElement

DOM element or selector for widget you want to remove.

# registerAdapter static SIR(method, adapter)

Load client specific adapter, which allows getting data from client's page and APIs.

Parameters
Name Type Description
method 'registerAdapter'

Method name.
adapter string | function | Promise

Hosted adapter name provided by us or your own implementation.

# check static SIR(method, callback)

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

Parameters
Name Type Description
method 'check'

Method name.
callback function

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

# changeLanguage static SIR(method, language)

Changes language to provided parameter, if it's valid. Forces reload of all widgets, internal widget state is lost.

Parameters
Name Type Description
method 'changeLanguage'

Method name.
language string

For available languages see Languages.

# changeClockType static SIR(method, clockType)

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

Parameters
Name Type Description
method 'changeClockType'

Method name.
clockType string

'12' or '24'

# changeOddsType static SIR(method, oddsType)

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

Parameters
Name Type Description
method 'changeOddsType'

Method name.
oddsType string

Must be one of 'eu', 'us' or 'uk'.

# changeTeamInvert static SIR(method, teamInvert)

Changes team invert settings, used to control which one is displayed as left or right. By default, "home" is left and "away" is right, except for NFL and baseball, which are inverted. Forces reload of all widgets, internal widget state is lost.

Accepts parameter of following shape, each attribute is optional:

Parameters
Name Type Description
method 'changeTeamInvert'

Method name.
teamInvert object

Example: { sid: { 3: true }} inverts teams for all baseball matches.
all boolean

Invert all matches.
sid Object.<string, boolean>

Dictionary of sport ids to invert.
rcid Object.<string, boolean>

Dictionary of real category ids to invert.
utid Object.<string, boolean>

Dictionary of unique tournament ids to invert.

# changeLogLevel static SIR(method, logLevel)

Changes log level so you can have more info if something goes wrong.

Parameters
Name Type Description
method 'changeLogLevel'

Method name.
logLevel string

'error' | 'warn' | 'info'

# setClientTheme static SIR(method, theme, callbackopt)

Sets a widget theme.

Parameters
Name Type Attributes Description
method 'setClientTheme' <required>

Method name.
theme string <required>

Theme to load. Can be url (https) or client alias which exists in client setup (e.g. betradar).
callback function

Triggered when theme is loaded.