Skip to main content
Open Assistant Open Assistant
US Sports Integration Tutorial | Engagement Tools | Sportradar Developer Documentation
US Sports Integration Tutorial Widgets, Engagement Tools, BET
Last updated 7 months ago
Is this site helpful? # Intended AudienceThis tutorial is for:
Frontend developers integrating widgets for US sports marketsTechnical integrators building sports betting or media platforms for North American audiencesDevelopers familiar with basic widget integration
Those needing to customize widget behavior for American Football, Basketball, Baseball, and Ice Hockey
# GoalsBy completing this tutorial, you will:
Configure widgets with US-specific display formats
Set 12-hour clock format for time displays
Customize result separators (e.g., using "-" instead of ":")
Invert team positioning to match US conventions
Apply these settings globally or per-sport
Create a complete US sports widget integration
# PrerequisitesBefore starting this tutorial, ensure you have:
Valid Sportradar Widget license - Contact Sales if neededClient ID - Provided with your licenseBasic HTML/JavaScript knowledge - Understanding of HTML structure and JavaScript syntaxBasic widget integration experience - Completed Getting Started Guide Web development environment - Text editor and modern web browserMatch ID for US sport - Valid match identifier from Basketball, American Football, Baseball, or Ice Hockey
These configuration options work for all sports but are particularly important for US sports markets where different display conventions are expected.
# OverviewUS sports have different display conventions compared to international formats:
Clock format : 12-hour (AM/PM) instead of 24-hourResult separator : Hyphen ("-") instead of colon (":")Team positioning : Away team typically shown first (inverted from international standard)
This tutorial shows you how to configure these settings globally in the widgetloader.
# Tutorial Steps# Step 1: Set up HTML StructureCreate your HTML page with basic styling to center and contain the widget.
html
<!DOCTYPE HTML > < html > < head > < meta charset = "UTF-8" > < title > US Sports Integration </ title > < style > body { display : flex ; justify-content : center ; } Initialize the widget framework with US-specific configuration options.
js
( 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 = # Understanding the Configuration Options
Configuration Option Details
Option Value Description clockType12 or 24Sets 12-hour (AM/PM) or 24-hour time format. Use 12 for US markets. resultSeparatorAny string Character(s) between team scores. US standard is "-" (e.g., "102-98"). teamInvertObject Controls which team appears on left/right. Accepts all: true or sid: { [sportId]: true }.
Team Invert Options:
All sports : { all: true } - Inverts teams for every sportSpecific sport : { sid: { 2: true } } - Only inverts Basketball (sport ID 2)
# Step 3: Add Widget to PageUse the SIR function to add your widget with the appropriate match ID.
js
SIR ( "addWidget" , ".sr-widget-1" , "match.lmtPlus" , { matchId : 'your_match_id_here' } ) ;
Replace your_match_id_here with a valid match ID from a US sport. The widget will automatically use the global configuration settings.
# Step 4: Test Your Integration
Open the HTML file in your browser
Verify the widget displays with:
12-hour time format (AM/PM)
Hyphen between scores (e.g., "102-98")
Correct team positioning for your market
# Complete Implementation
View Complete Working Example
html
<!DOCTYPE HTML > < html > < head > < meta charset = "UTF-8" > < title > US Sports Integration </
# Configuration Variations
All Sports Inverted
Specific Sports Only
International Format
Changing these global settings affects all widgets on the page. If you need different formats for different widgets, you'll need to reload the framework or use separate pages.
# Further Reading# Core DocumentationFor advanced widget-specific configurations, see:
. widgets {
max-width : 620 px ;
width : 100% ;
}
. sr-widget {
border : rgba ( 0 , 0 , 0 , 0.12 ) solid 1 px ;
margin-bottom : 24 px ;
}
< / style >
</ head >
< body >
< div class = "widgets" >
< div class = "sr-widget sr-widget-1" ></ div >
</ div >
</ body >
</ html >
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" , {
theme : 'sportradar' ,
language : "en" ,
clockType : 12 ,
resultSeparator : "-" ,
teamInvert : { sid : { 2 : true } }
} ) ;
Multiple sports
{ sid: { 2: true, 4: true } }
2 - Basketball3 - Baseball4 - Ice Hockey16 - American Football
For most US integrations, you'll want to invert all sports: teamInvert: { all: true }
title
>
< style >
body {
display : flex ;
justify-content : center ;
}
. widgets {
max-width : 620 px ;
width : 100% ;
}
. sr-widget {
border : rgba ( 0 , 0 , 0 , 0.12 ) solid 1 px ;
margin-bottom : 24 px ;
}
< / style >
</ head >
< body >
< 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.sir.sportradar.com/sportradar/widgetloader" , "SIR" , {
theme : 'sportradar' ,
language : "en" ,
clockType : 12 ,
resultSeparator : "-" ,
teamInvert : { all : true } // Invert all sports for US market
} ) ;
SIR ( "addWidget" , ".sr-widget-1" , "match.lmtPlus" , {
matchId : 'your_match_id_here'
} ) ;
< / script >
< div class = "widgets" >
< div class = "sr-widget sr-widget-1" ></ div >
</ div >
</ body >
</ html >
For a fully US-market integration, invert all sports:
js
{ clockType : 12 , resultSeparator : "-" , teamInvert : { all : true } }