---
title: "Getting Started"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-started"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-started.md"
last_updated: "2026-03-26T13:44:48Z"
---

# Getting Started

Welcome to the Sportradar Betting Entertainment Tools (BET) documentation. This guide will help you quickly integrate our widgets into your website.

## Quick Start

The fastest way to get started is using our interactive demo page, which lets you preview and customize widgets before integration.

### Interactive Widget Demo

Explore all available widgets, customize their appearance, and generate integration code instantly.

[Open Demo Page](https://widgets.sir.sportradar.com/widgets-demo)

### Video Walkthrough

5-minute introduction video showing how to set up BET products on your website.

[Watch Tutorial](https://www.youtube.com/watch?v=jPNdtdJ71Hs)

## Prerequisites

Before integrating widgets, you'll need a **Client ID** to authenticate your application.

> **Info**
>
> Don't have a Client ID? See [how to obtain one](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/faq.md#client-id) in our FAQ.

## Integration Methods

Choose between two integration approaches based on your needs:

**Recommended: JavaScript API**

**Best for:** Dynamic applications, SPAs, and when you need programmatic control.

**Advantages:**

- Use `SIR` function immediately, even before the loader finishes
- Full control over widget lifecycle
- Better for dynamic content and single-page applications
- Access to all API methods and events

## JavaScript API Integration

This is the recommended method for most applications. It provides immediate access to the `SIR` function and full control over widget behavior.

### Step 1: Initialize the Widget Framework

Add this script inside your `<body>` tag. Commands execute immediately and are queued until the framework loads.

```html {6}
<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.sir.sportradar.com/YOUR_CLIENT_ID/widgetloader","SIR", {
        language: 'en' // Optional: Set initial language (default: 'en')
    });
</script>
```

> **Warning**
>
> Replace `YOUR_CLIENT_ID` in the URL with your actual Client ID.

> **Tip**
>
> See [available languages](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/references/languages.md) for supported language codes.

### Step 2: Add a Widget Container

Create an HTML element where the widget will be rendered:

```html
<div id="my-widget">
    <!-- This content will be replaced by the widget -->
</div>
```

> **Warning**
>
> The `SIR` function replaces all content inside the target element. Don't place important content here.

### Step 3: Initialize the Widget

Call the `SIR` function with the `addWidget` method:

```html
<script>
    SIR('addWidget', '#my-widget', 'match.lmtPlus', {
        matchId: 'sr:match:24740256'
    });
</script>
```

**Parameters:**

1. `'addWidget'` - Method name
2. `'#my-widget'` - CSS selector for the container element
3. `'match.lmtPlus'` - Widget name ([see all widget names](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/faq.md#widget-name))
4. Configuration object with widget-specific properties

> **Note**
>
> For integrations within **ShadowDOM**, see our [ShadowDOM integration guide](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md).

### Complete Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Sports Widget</title>
</head>
<body>
    <!-- Widget container -->
    <div id="lmt-widget"></div>

    <!-- Initialize framework -->
    <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.sir.sportradar.com/YOUR_CLIENT_ID/widgetloader","SIR", {
            language: 'en'
        });
    </script>

    <!-- Add widget -->
    <script>
        SIR('addWidget', '#lmt-widget', 'match.lmtPlus', {
            matchId: 'sr:match:24740256'
        });
    </script>
</body>
</html>
```

> **Info**
>
> **ShadowDOM** integration is a special case, if you encounter the need form ShadowDOM, have a look at [ShadowDOM Integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md) document.

**Declarative HTML**

**Best for:** Static pages and simple integrations.

**Advantages:**

- Simple HTML-based configuration
- No JavaScript knowledge required
- Automatic widget initialization

**Limitations:**

- Must wait for loader to complete before using `SIR` function
- Less flexible for dynamic scenarios

## Declarative HTML Integration {#declarative-html-integration}

For simple static pages, you can use data attributes to automatically initialize widgets.

> **Warning**
>
> The `SIR` function is only available **after** the widgetloader script completes loading. Using it before will cause errors.

### Step 1: Add the Widget Loader Script

```html
<script 
    type="application/javascript" 
    src="https://widgets.sir.sportradar.com/YOUR_CLIENT_ID/widgetloader" 
    data-sr-language="en" 
    async>
</script>
```

### Step 2: Add Widget Elements With Data Attributes

Create HTML elements with the `data-sr-widget` attribute:

```html
<div 
    class="sr-widget" 
    data-sr-widget="match.lmtPlus" 
    data-sr-match-id="sr:match:24740256">
</div>
```

**Data Attribute Naming:**

- Convert camelCase properties to dash-separated attributes with `data-sr-` prefix
- Example: `matchId` → `data-sr-match-id`
- Example: `teamId` → `data-sr-team-id`

> **Tip**
>
> Each widget requires specific properties. Check individual widget documentation for required data attributes.

### Complete Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Declarative Widget Example</title>
</head>
<body>
    <!-- Widget will be automatically initialized here -->
    <div 
        class="sr-widget" 
        data-sr-widget="match.lmtPlus" 
        data-sr-match-id="sr:match:24740256">
    </div>

    <!-- Load widget framework -->
    <script 
        type="application/javascript" 
        src="https://widgets.sir.sportradar.com/YOUR_CLIENT_ID/widgetloader" 
        data-sr-language="en" 
        async>
    </script>
</body>
</html>
```

***

## Configuration & API Reference

> **Warning**
>
> Every widget supports global configuration options and methods through the **[SIR API](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/SIR.md)**.

### Event Tracking

All widgets support the `onTrack` callback function for monitoring user interactions and widget events:

```javascript
SIR('addWidget', '#my-widget', 'match.lmtPlus', {
    matchId: 'sr:match:24740256',
    onTrack: function(eventName, eventData) {
        console.log('Widget event:', eventName, eventData);
        // Send to your analytics platform
    }
});
```

Learn more in the [onTrack documentation](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tracking-guide.md).

### Finding Widget Information

**How do I find the widget name?**

Widget names follow a pattern like `match.lmtPlus`, `match.preview`, or `team.standings`. You can:

1. Browse the widget catalog on the [demo page](https://widgets.sir.sportradar.com/widgets-demo)
2. Check individual widget documentation pages
3. See the [widget naming FAQ](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/faq.md#widget-name)

**How do I find the match ID or team ID?**

Entity IDs follow Sportradar's Universal Resource Notation (URN) format:

- Match ID example: `sr:match:24740256`
- Team ID example: `sr:competitor:12345`

See the [FAQ on finding IDs](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/faq.md#match-id) for detailed instructions.

***

## Next Steps

### Integration Examples

Real-world examples showing different integration patterns and use cases.

[View Examples](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples.md)

### Custom Styling

Apply custom CSS to match your brand and website design.

[Learn Theming](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/theming-widgets.md)

### Licensing Guide

Understand license requirements and resolve licensing errors.

[Get License](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/troubleshooting/licensing-errors.md)

### Common Errors

Solutions to frequently encountered widget errors and issues.

[Troubleshoot](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/troubleshooting/widget-errors.md)

### Frequently Asked Questions

Quick answers to common questions about widget integration.

[Read FAQ](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/faq.md)

### SIR API Documentation

Complete reference for all available methods and configuration options.

[API Reference](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/SIR.md)