---
title: "US Sports Integration Tutorial"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-us-integration"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-us-integration.md"
last_updated: "2026-03-23T13:02:40Z"
---

# 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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md)
- 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](mailto:sales@betradar.com) 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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md)
- **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.

```js {6-9}
(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 }`

### Step 3: Add Widget to Page

Use 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'
});
```

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

1. Open the HTML file in your browser
2. 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

**All Sports Inverted**

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

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

**Specific Sports Only**

Invert only Basketball and American Football:

```js
{
    clockType: 12,
    resultSeparator: "-",
    teamInvert: { 
        sid: { 
            2: true,   // Basketball
            16: true   // American Football
        } 
    }
}
```

**International Format**

For comparison, international format would use:

```js
{
    clockType: 24,
    resultSeparator: ":",
    teamInvert: { all: false }
}
```

> **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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md) - Basic widget integration
- [Global SIR API](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/SIR.md) - Complete API reference and configuration options
- [Widget Customization](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/widgets-customization.md) - Theming and branding

### Related Tutorials

- [ShadowDOM Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md) - Advanced DOM integration

### Widget-Specific Integration Guides

For advanced widget-specific configurations, see:

- [Live Match Tracker (LMT)](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/lmt/Widgets.match.LMTPlus.md) - Real-time match visualization
- [Custom Bet Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/custom_bet/Widgets.CustomBet.DataAdapter.md) - Custom bet builder
- [Bet Assist Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/bet_assist/Widgets.betAssist.Integration.Integration.md) - Betting assistance widgets