Skip to main content
Logo
Explore APIsContact Us
  • Home
  • Match Preview
  • Tournament Preview
  • Virtual Stadium
  1. Resources
  2. Widgets
  3. Getting Started

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

Video Walkthrough

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

Watch Tutorial

#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 in our FAQ.

#Integration Methods

Choose between two integration approaches based on your needs:

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
<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 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)
  4. Configuration object with widget-specific properties
note

For integrations within ShadowDOM, see our ShadowDOM integration guide.

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


#Configuration & API Reference

warning

Every widget supports global configuration options and methods through the SIR API.

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

#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
  2. Check individual widget documentation pages
  3. See the widget naming FAQ

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 for detailed instructions.


#Next Steps

Integration Examples

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

View Examples

Custom Styling

Apply custom CSS to match your brand and website design.

Learn Theming

Licensing Guide

Understand license requirements and resolve licensing errors.

Get License

Common Errors

Solutions to frequently encountered widget errors and issues.

Troubleshoot

Frequently Asked Questions

Quick answers to common questions about widget integration.

Read FAQ

SIR API Documentation

Complete reference for all available methods and configuration options.

API Reference
Last updated 11 days ago
Is this site helpful?
Widgets, Engagement Tools
TutorialsWidget Tracking & Analytics Guide
On this page
  • Quick Start
  • Prerequisites
  • Integration Methods
  • Configuration & API Reference
  • Event Tracking
  • Finding Widget Information
  • Next Steps