Betting Entertainment Tools

Widgets Demo

Connected Widgets

This example shows how different widgets can communicate.

To do this we will add data-sr-match-id attribute to widgetloader instead on widget element. This will set an initial match and enable changing "target widget" data by selecting matches in combination with Match List or Season Fixtures widgets.

Example

Here we display Match List and Live Match Tracker widgets on the same page. Clicking on match in Match List widget will show corresponding match data in Live Match Tracker widget.


Code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Connected Widgets</title>
        <style>
            .sr-widgets-container {
                display: flex;
            }
            .sr-widget-2 {
                width: 620px;
            }
        </style>
    </head>
    <body>
        <!-- widget container -->
        <div class="sr-widgets-container">
            <div class="sr-widget-1" data-sr-widget="match.MatchList"></div>
            <div class="sr-widget-2" data-sr-widget="match.lmtPlus" data-sr-layout="topdown"></div> <!-- target widget -->
        </div>

        <!-- include widgetloader script -->
        <script type="application/javascript" src="https://widgets.sir.sportradar.com/sportradar/widgetloader" data-sr-match-id="match_id_here" async></script>
    </body>
</html>

The upper example is using declarative way of adding widgets to a page. The next example shows how to do the same thing programmatically.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Connected Widgets</title>
        <style>
            .sr-widgets-container {
                display: flex;
            }
            .sr-widget-2 {
                width: 620px;
            }
        </style>
    </head>
    <body>
        <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", {
                //matchId: match_id_here
            });
            SIR('addWidget', '.sr-widget-1', 'match.MatchList');
            SIR('addWidget', '.sr-widget-2', 'match.lmtPlus', {layout: "topdown"});
        </script>
        <!-- widget container -->
        <div class="sr-widgets-container">
            <div class="sr-widget-1"></div>
            <div class="sr-widget-2"></div>
        </div>
    </body>
</html>