Betting Entertainment Tools

Widgets Demo

Getting Started

This page provides an overview of the Sportradar Betting Entertainment Tools documentation.

The easiest way to generate Widgets code is on our Widgets Demo page. Demo page offers various customization options. You can check a quick introduction video on How to setup BET products.

When you are happy with your customization you can simply download widget code and run it locally. To use Widgets on your page you will need Client ID.

Don't have Client ID? Please read how to get one.

Add Widgets on a Page

In this section, we will show how to add a widget to a HTML page.

Every widget has some global options which you can set when initializing a widget. For all the available global options and methods see SIR API documentation.

Step 1: Initialize Widgets

First, initialize widgets via code snippet by adding it inside <body> tag. By default Widgets will use English language. You can specify initial language (see available languages) with a global option in SIR API.

<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/sportradar/widgetloader","SIR", {
        language: 'en' // SIR global options
    });
</script>

This kind of inclusion allows you to start using global SIR function immediately because all commands executed before framework is completely loaded, are stored and executed once framework is loaded.

Replace 'sportradar' Client ID (sportradar.com/sportradar/widgetloader) with your Client ID.

Step 2: Add a Widget

Next, add HTML element and execute SIR function with addWidget method on that element. Note that this will replace content of targeted dom element once framework is loaded. All methods are available at SIR API.

<div id="my-widget">
    <!--  Avoid placing content here as it will be replaced once `SIR` function with `addWidget` method is executed! -->
</div>
<script>
    // start using global SIR object
    SIR('addWidget', '#my-widget', 'widget_name_here', {matchId: match_id_here}); // widget_name_here example: match.lmtPlus / match_id_here example: 24740256
</script>
How to find guides: widget name, match id.

You have just added Sportradar widget to your page.

There is another option of adding widget on a page but with limited usage. See this section.

Further Steps

On every widget you can use onTrack function (as a property) which will be invoked on some events. You can find more information here.

You are welcome to check out some other guides and examples:

Add Widgets on a Page (declarative)

This type of including widgets on a page will first wait for widgetloader script to load and then search for all elements with data-sr-widget attribute. It will use the value of that attribute to automatically add widgets to the page. Trying to access SIR function before widgetloader is loaded will result in an error. In such cases you will need to handle function call later in time, after widgetloader is loaded. This is not the case with upper example of adding widget to a page where you can start using SIR immediately after inclusion of code snippet.

Step 1: Add a Widgetloader Script

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

Step 2: Add a Widget

Simply add HTML element with data-sr-widget attribute and widget name as value.

Based on the selected widget we must add additional data attributes to target specific match, team etc. If we look at Live Match Tracker we need to provide value for required property matchId. Other widgets will need to have data attributes based on their properties.

<!-- widget_name_here example: match.lmtPlus / match_id_here example: 24740256 -->
<div class="sr-widget" data-sr-widget="widget_name_here" data-sr-match-id="match_id_here"></div>
Additional properties such as matchId and teamId can be included as data attributes, where camel case javascript properties need to be converted to dash separated attribute names.
Example: matchId needs to be converted to match-id and placed in tag as data-sr-match-id attribute.