General Information

## Widgets Introduction Have Sportradar manage your sports visualizations and avoid timely development and maintenance costs. Choose among our host of individually customized widgets designed to live alongside your content. >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: Check out our Widgets Showcase for a complete interactive sampling, or reference our individual widget documentation for detailed product descriptions and further samples. ## 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. ## 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. ```html ``` ### 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. >Sample using matchId: ```html ``` 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. ```html
``` 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. 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 ```html ``` 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: 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.
Widget API & Version API Key
MLB Global Baseball v2 Global Baseball Trial
NBA Global Basketball v2 Global Basketball Trial
NCAA Football Global American Football v2 Global American Football Trial
NCAA Men's Basketball Global Basketball v2 Global Basketball Trial
NFL NFL v7 NFL Trial
NHL Global Ice Hockey v2 Global Ice Hockey Trial
Soccer Soccer v4 Soccer Trial
Golf Golf v3 Golf Trial
## 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
Name Type Description
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).
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
debug any If 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

```json ``` 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'. ```html ```
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. ```html ```
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:
### Methods ```js // syntax: SIR([, ...arguments]); // example of adding scoreboard widget on an element SIR('addWidget', 'div.my-div', 'us.match.score'); ``` 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: SIR('addWidget', 'div.my-div', 'us.match.score'); The API consists of the methods listed below.
addWidget(domElOrSelector, name [, props] [, callback])
Parameters
Name Type Argument Description
domElOrSelector string | DomElement DOM element or selector for placement of the widget
name string Widget name
props object optional Widget props
callback function optional Callback 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.

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
Name Type Description
clockType string '12' or '24'

changeLanguage(language) Changes the language to the provided parameter. Forces a reload of all widgets. The internal widget state is lost.
Parameters
Name Type Description
language string Language code. List of valid codes can be found here.

changeLogLevel(logLevel) Changes the log level for troubleshooting any errors. Logging must first be enabled by setting the debug option to true.
Parameters
Name Type Description
logLevel string 'error' | 'warn' | 'info'

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
Name Type Description
oddsType string Valid values: 'eu', 'us' or 'uk'.

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
Name Type Description
teamInvert object Example: { sid: { 3: true }} inverts teams for all baseball games
Name Type Description
all boolean Invert all games
sid Object. Dictionary of sport ids to invert
rcid Object. Dictionary of real category ids to invert
utid Object. Dictionary of unique tournament ids to invert

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

removeWidget(domElementOrSelector) Removes a widget on a given DOM element or selector.
Parameters
Name Type Description
domElementOrSelector string | DomElement DOM Element or selector for the widget to be removed

updateWidget(domElOrSelector [, props] [, callback])
Parameters
Name Type Argument Description
domElOrSelector string | DomElement DOM element or selector for placement of the widget
props object optional Widget props
callback function optional Callback 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 ```css .sr-bb .srt-base-1 { background-color: #eee; } ``` 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). ### Simple Example ```html Widgets test
``` 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. Widgets test





### Advanced Example ```html Widgets test
``` 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. Widgets test























## 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
Error Description
T Tournament error (Returned if the provided tournament is unlicensed)
W Widget error (Returned if the provided widget is unlicensed)
D Domain Error (Returned if your domain has not been whitelisted)
P No valid package error
L Licensing info did not reach the client
F The data feeds returned a license error
## Languages Supported Language Codes
Code Description
en English
en_us English
de Deutsch
fr Français
it Italiano
tr Türkçe
hr Hrvatski
sk Slovenčina
sl Slovenščina
no Norsk
se Svenska
da Dansk
es Español
nl Nederlands
pl Polski
pt Português
cs Česky
lv Latviešu
fi Suomeksi
ru Русский
th ไทย
zh 简体中文
bs Bosanski
hu Magyar
bg Български
sr Cрпски
el Eλληνικά
ro Română
et Eesti
mk Македонски
lt Lietuvių
vi Tiếng Việt
zht 中文繁體
id Bahasa
ja 日本語
ko 한국어
aa العربية
aze Azərbaycan dili
ka ქართული
heb עברית
sqi Shqip
ukr Українська
srl Srpski
me Crnogorski
br Português do Brasil
hye Հայերեն
sw Kiswahili
km ខ្មែរ, ខេមរភាសា, ភាសាខ្មែរ
tuk Turkmenistan
es_la Latin American Spanish
## NCAA Conferences and Divisions NCAA Football
Division Code
fbs Football Bowl Subdivision
Conference Code Description
aac American Athletic
acc Atlantic Coast
big12 Big 12
b1g Big Ten
cusa Conference USA
indep Independent
mac Mid-American
mw Mountain West
pac12 Pacific-12
sec Southeastern
sunbelt Sun Belt
Division Code
fcs Football Championship Subdivision
Conference Code Description
bsky Big Sky
bsc Big South
caac Colonial Athletic
indep Independent
ivy Ivy League
meac Mid-Eastern Athletic
mvc Missouri Valley
nec Northeast
ovc Ohio Valley
patriot Patriot League
pioneer Pioneer League
southern Southern
southland Southland
swac Southwestern Athletic
Division Code
dII Division II
Conference Code Description
ciaa Central Intercollegiate Athletic
gliac Great Lakes Intercollegiate Athletic
gac Great American
glvc Great Lakes Valley
gmac Great Midwest Athletic
gnac Great Northwest Athletic
gsc Gulf South
indep Independent
lsc Lone Star
miaa Mid-America Intercollegiate Athletics
mec Mountain East
n10 Northeast-10
nsic Northern Sun
psac Pennsylvania State Athletic
rmac Rocky Mountain Athletic
siac Southern Intercollegiate Athletic
sac South Atlantic
dIII Division III
Conference Code Description
arc American Rivers
asc American Southwest
cciw College Conference of Illinois and Wisconsin
centennial Centennial
ccc Commonwealth Coast
ecfc Eastern Collegiate
e8 Empire 8 Athletic
hcac Heartland Collegiate Athletic
indep Independent
llc Liberty League
mascas Massachusetts State Collegiate Athletic
miaa Michigan Intercollegiate Athletic
mac Middle Atlantic
mwest Midwest
miac Minnesota Intercollegiate Athletic
nescac New England Small College Athletic
newmac New England W&M Athletic
njac New Jersey Athletic
ncac North Coast Athletic
nacc Northern Athletics Collegiate
nwc Northwest
oac Ohio Athletic
odac Old Dominion Athletic
pac Presidents Athletic
sciac Southern California Intercollegiate Athletic
saa Southern Athletic
usasouth USA South Athletic
umac Upper Midwest Athletic
wiac Wisconsin Intercollegiate Athletic
NCAA Basketball
Division Code
dI Division I
Conference Code Description
aec America East
aac American Athletic
a10 Atlantic 10
acc Atlantic Coast
asun Atlantic Sun
big12 Big 12
bec Big East
bsky Big Sky
bsc Big South
b1g Big Ten
bwc Big West
caa Colonial Athletic Association
cusa Conference USA
gwc Great West
horizon Horizon League
indep Independent
ivy Ivy League
maac Metro Atlantic Athletic
mac Mid-American Overall
meac Mid-Eastern Athletic
mvc Missouri Valley
mw Mountain West
nec Northeast
ovc Ohio Valley
pac12 Pacific 12
patriot Patriot League
sec Southeastern
southern Southern
southland Southland
swac Southwest Athletic
summit Summit
sunbelt Sun Belt
wcc West Coast
wac Western Athletic
Division Code
dII Division II
Conference Code Description
ccaa California Collegiate Athletic
cacc Central Atlantic Collegiate
ciaa Central Intercollegiate Athletic
concar Conference Carolinas
acc East Coast
gac Great American
gliac Great Lakes Intercollegiate Athletic
glvc Great Lakes Valley
gmac Great Midwest Athletic
gnac Great Northwest Athletic
gsc Gulf South
hcac Heartland Collegiate Athletic
indep Independent
lstar Lone Star
maiaa Mid-America Intercollegiate Athletics
mec Mountain East
n10 Northeast-10
nsic Northern Sun Intercollegiate
pacw Pacific West
pbca Peach Belt Athletic
psac Pennsylvania State Athletic
rmac Rocky Mountain Athletic
sac South Atlantic
siac Southern Intercollegiate Athletic
ssc Sunshine State
Division Code
dIII Division III
Conference Code Description
amcc Allegheny Mountain Collegiate
acac American Collegiate Athletic
arc American Rivers
asc American Southwest
aec Atlantic East
cac Capital Athletic
cent Centennial
cunyac City University of New York Athletic
cciw College Conference of Illinois and Wisconsin
csac Colonial States Athletic
ccc Commonwealth Coast
emp8 Empire 8
gnac3 Great Northeast Athletic
hcac3 Heartland Collegiate Athletic
indep3 Independent
land Landmark
libl Liberty League
little Little East
macc MAC Commonwealth
macf MAC Freedom
mscac Massachusetts State Collegiate Athletic
miaa Michigan Intercollegiate Athletic
midw Midwest
miac Minnesota Intercollegiate Athletic
necc New England Collegiate
nescac New England Small College Athletic
newmac New England Womens and Men Athletic
njac New Jersey Athletic
nac North Atlantic
ncac North Coast Athletic
neac North Eastern Athletic
nacc Northern Athletics Collegiate
northw Northwest
oac Ohio Athletic
odac Old Dominion Athletic
pac Presidents Athletic
skyl Skyline
saa Southern Athletic
sciac Southern California Intercollegiate Athletic
scac Southern Collegiate Athletic
stliac St. Louis Intercollegiate Athletic
sunyac State University of New York Athletic
usasac USA South Athletic
uaa University Athletic
umac Upper Midwest Athletic
wiac Wisconsin Intercollegiate Athletic
Return to top

Docs Navigation