Documentation

USW

Public API, exposed as a global USW function (if not changed), after widgetloader script is loaded.

USW itself has some global options that can be set in either widgetloader script tag or in code snippet abofe. These options are:

  • language {string}: any of our supported language codes
  • clockType {string}: '12' or '24'. Clock type to use when displaying time.
  • oddsType {string}: 'eu', 'uk' or 'us'. Odds type to use across all widgets: UK (fractional), EU (decimal) or US (american).
  • adserverClientId {int}: Id from sportradar's adserver.
  • matchId {string|number}: default 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)
  • teamId {string|number}: default team id for all widgets
  • logLevel {'error'|'warn'|'info'}: Sets initial log level. By default, nothing is logged.
  • debug {any}: if set to anything but false, 'logLevel' will change to warn. Plays nice with html5, since only specifying attribute is enough.

Examples

Initialising USW 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/sportradar/widgetloader" data-sr-language="en" data-sr-match-id="11483309" data-sr-debug></script>

Initialising USW widgets via code snippet. This pattern allows you to start using `USW` variable as soon as this code completes, which is 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.media.sportradar.com/sportradar/widgetloader","USW", {
        language: 'en',
        debug: true
    });
</script>

Note that "USW" can here be replace by anything. 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.media.sportradar.com/sportradar/widgetloader","SirWidgets", {
        language: 'en',
        debug: true
    });
</script>

Invoking methods listed below can be done by executing global `USW` function in a following way:

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

Methods

<static> addWidget(domElOrSelector, name [, props] [, callback] [, onlyServerRender])

Adds a widget on given DOM element or selector.

Parameters
Name Type Argument Description
domElOrSelector string | DomElement

Widget DOM element or selector.
name string

Widget name.
props object <optional>

Widget props.
callback function <optional>

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

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

<static> changeClockType(clockType)

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

Parameters
Name Type Description
clockType string

'12' or '24'

<static> changeLanguage(language)

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

Parameters
Name Type Description
language string

For available languages see Languages.

<static> changeLogLevel(logLevel)

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

Parameters
Name Type Description
logLevel string

'error' | 'warn' | 'info'

<static> changeOddsType(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
oddsType string

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

<static> changeTeamInvert(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
teamInvert object

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

Properties
Name Type Description
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.

<static> check(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
callback function

Callback 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 given DOM element or selector.

Parameters
Name Type Description
domElementOrSelector string | DomElement

DOM element or selector for widget you want to remove.

<static> updateWidget(domElOrSelector [, props] [, callback] [, onlyServerRender])

Updates a widget on given DOM element or selector.

Parameters
Name Type Argument Description
domElOrSelector string | DomElement

Widget DOM element or selector.
props object <optional>

Widget props.
callback function <optional>

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

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