US Sports Integration Tutorial

#Intended Audience

This tutorial is for:

Frontend developers integrating widgets for US sports markets
Technical integrators building sports betting or media platforms for North American audiences
Developers familiar with basic widget integration
Those needing to customize widget behavior for American Football, Basketball, Baseball, and Ice Hockey

#Goals

By 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

#Prerequisites

Before starting this tutorial, ensure you have:

Valid Sportradar Widget license - Contact Sales if needed
Client ID - Provided with your license
Basic HTML/JavaScript knowledge - Understanding of HTML structure and JavaScript syntax
Basic widget integration experience - Completed Getting Started Guide
Web development environment - Text editor and modern web browser
Match ID for US sport - Valid match identifier from Basketball, American Football, Baseball, or Ice Hockey

info

These configuration options work for all sports but are particularly important for US sports markets where different display conventions are expected.

#Overview

US sports have different display conventions compared to international formats:

Clock format: 12-hour (AM/PM) instead of 24-hour
Result 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 Structure

Create 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;
            }
            .widgets {
                max-width: 620px;
                width: 100%;
            }
            .sr-widget {
                border: rgba(0,0,0,0.12) solid 1px;
                margin-bottom: 24px;
            }
        </style>
    </head>
    <body>
        <div class="widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>
    </body>
</html>

#Step 2: Configure Widgetloader With US Settings

Initialize the widget framework with US-specific configuration options.

(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: { sid: { 2: true } }
});

#Understanding the Configuration Options

Configuration Option Details

Option	Value	Description
`clockType`	`12` or `24`	Sets 12-hour (AM/PM) or 24-hour time format. Use `12` for US markets.
`resultSeparator`	Any string	Character(s) between team scores. US standard is `"-"` (e.g., "102-98").
`teamInvert`	Object	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 sport
Specific sport: { sid: { 2: true } } - Only inverts Basketball (sport ID 2)
Multiple sports: { sid: { 2: true, 4: true } } - Basketball and Ice Hockey

Common US Sport IDs:

2 - Basketball
3 - Baseball
4 - Ice Hockey
16 - American Football

tip

For most US integrations, you'll want to invert all sports: teamInvert: { all: true }

Use the SIR function to add your widget with the appropriate match ID.

SIR("addWidget", ".sr-widget-1", "match.lmtPlus", {
    matchId: 'your_match_id_here'
});

note

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</title>
        <style>
            body {
                display: flex;
                justify-content: center;
            }
            .widgets {
                max-width: 620px;
                width: 100%;
            }
            .sr-widget {
                border: rgba(0,0,0,0.12) solid 1px;
                margin-bottom: 24px;
            }
        </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>

#Configuration Variations

For a fully US-market integration, invert all sports:

{
    clockType: 12,
    resultSeparator: "-",
    teamInvert: { all: true }
}

warning

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 Documentation

Getting Started Guide - Basic widget integration
Global SIR API - Complete API reference and configuration options
Widget Customization - Theming and branding

ShadowDOM Integration - Advanced DOM integration

For advanced widget-specific configurations, see:

Live Match Tracker (LMT) - Real-time match visualization
Custom Bet Integration - Custom bet builder
Bet Assist Integration - Betting assistance widgets

#Intended Audience

This tutorial is for:

Frontend developers integrating widgets for US sports markets
Technical integrators building sports betting or media platforms for North American audiences
Developers familiar with basic widget integration
Those needing to customize widget behavior for American Football, Basketball, Baseball, and Ice Hockey

#Goals

By 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

#Prerequisites

Before starting this tutorial, ensure you have:

Valid Sportradar Widget license - Contact Sales if needed
Client ID - Provided with your license
Basic HTML/JavaScript knowledge - Understanding of HTML structure and JavaScript syntax
Basic widget integration experience - Completed Getting Started Guide
Web development environment - Text editor and modern web browser
Match ID for US sport - Valid match identifier from Basketball, American Football, Baseball, or Ice Hockey

info

These configuration options work for all sports but are particularly important for US sports markets where different display conventions are expected.

#Overview

US sports have different display conventions compared to international formats:

Clock format: 12-hour (AM/PM) instead of 24-hour
Result 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 Structure

Create 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;
            }
            .widgets {
                max-width: 620px;
                width: 100%;
            }
            .sr-widget {
                border: rgba(0,0,0,0.12) solid 1px;
                margin-bottom: 24px;
            }
        </style>
    </head>
    <body>
        <div class="widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>
    </body>
</html>

#Step 2: Configure Widgetloader With US Settings

Initialize the widget framework with US-specific configuration options.

(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: { sid: { 2: true } }
});

#Understanding the Configuration Options

Configuration Option Details

Option	Value	Description
`clockType`	`12` or `24`	Sets 12-hour (AM/PM) or 24-hour time format. Use `12` for US markets.
`resultSeparator`	Any string	Character(s) between team scores. US standard is `"-"` (e.g., "102-98").
`teamInvert`	Object	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 sport
Specific sport: { sid: { 2: true } } - Only inverts Basketball (sport ID 2)
Multiple sports: { sid: { 2: true, 4: true } } - Basketball and Ice Hockey

Common US Sport IDs:

2 - Basketball
3 - Baseball
4 - Ice Hockey
16 - American Football

tip

For most US integrations, you'll want to invert all sports: teamInvert: { all: true }

Use the SIR function to add your widget with the appropriate match ID.

SIR("addWidget", ".sr-widget-1", "match.lmtPlus", {
    matchId: 'your_match_id_here'
});

note

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</title>
        <style>
            body {
                display: flex;
                justify-content: center;
            }
            .widgets {
                max-width: 620px;
                width: 100%;
            }
            .sr-widget {
                border: rgba(0,0,0,0.12) solid 1px;
                margin-bottom: 24px;
            }
        </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>

#Configuration Variations

For a fully US-market integration, invert all sports:

{
    clockType: 12,
    resultSeparator: "-",
    teamInvert: { all: true }
}

warning

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 Documentation

Getting Started Guide - Basic widget integration
Global SIR API - Complete API reference and configuration options
Widget Customization - Theming and branding

ShadowDOM Integration - Advanced DOM integration

For advanced widget-specific configurations, see:

Live Match Tracker (LMT) - Real-time match visualization
Custom Bet Integration - Custom bet builder
Bet Assist Integration - Betting assistance widgets

#Intended Audience

#Goals

#Prerequisites

#Overview

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Configure Widgetloader With US Settings

#Understanding the Configuration Options

#Step 3: Add Widget to Page

#Step 4: Test Your Integration

#Complete Implementation

#Configuration Variations

#Further Reading

#Core Documentation

#Widget-Specific Integration Guides

US Sports Integration Tutorial

#Intended Audience

#Goals

#Prerequisites

#Overview

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Configure Widgetloader With US Settings

#Understanding the Configuration Options

#Step 3: Add Widget to Page

#Step 4: Test Your Integration

#Complete Implementation

#Configuration Variations

#Further Reading

#Core Documentation

#Widget-Specific Integration Guides

US Sports Integration Tutorial

#Intended Audience

#Goals

#Prerequisites

#Overview

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Configure Widgetloader With US Settings

#Understanding the Configuration Options

#Step 3: Add Widget to Page

#Step 4: Test Your Integration

#Complete Implementation

#Configuration Variations

#Further Reading

#Core Documentation

#Related Tutorials

#Widget-Specific Integration Guides

US Sports Integration Tutorial

#Intended Audience

#Goals

#Prerequisites

#Overview

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Configure Widgetloader With US Settings

#Understanding the Configuration Options

#Step 3: Add Widget to Page

#Step 4: Test Your Integration

#Complete Implementation

#Configuration Variations

#Further Reading

#Core Documentation

#Related Tutorials

#Widget-Specific Integration Guides