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/uscommon/widgetloader" data-sr-language="en_us" 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/uscommon/widgetloader","USW", {
        language: 'en_us',
        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/uscommon/widgetloader","SirWidgets", {
        language: 'en_us',
        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', 'us.match.score');

Methods

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

Parameters
Name Type Argument Description
domElOrSelector string | DomElement

Dom element or selector to it so we know where to put the widget
name string

Widget name
props object <optional>

Widget props
callback function <optional>

Callback that is triggered when 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.)
onlyServerRender boolean <optional>

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

<static> changeAdserverClientId(adserverClientId)

Changes adserverClientId. Forces reload of all widgets, internal widget state is lost.

Parameters
Name Type Description
adserverClientId string

<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' is

<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

<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 set 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> setClientTheme(theme [, callback])

Parameters
Name Type Argument Description
theme string

to load, can be url (https) or. client alias which exists in client setup e.g. 'betradar'
callback function <optional>

Callback that is triggered when theme is loaded

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

Parameters
Name Type Argument Description
domElOrSelector string | DomElement

Dom element or selector to it so we know where to put the widget
props object <optional>

Widget props
callback function <optional>

Callback that is triggered when 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.)
onlyServerRender boolean <optional>

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