Betting Entertainment Tools

Widgets Demo

On pitch LCO stream toggle

Button Settings

Use branding namespace avStreamToggle for button related widget props:

Name Type Description
icons object Apply custom icons to button. 
    
        icons: {
            avStream: 'path_to_your_image_file',  //avStream is icon id for stream
            pitchSoccer: 'path_to_your_image_file', //pitchSoccer is icon id for soccer pitch
            ...
        };
useClientTheming boolean Disables srt classes and applies .srct-classes for custom styling.
List of applied classes is available in CSS Selectors section.

CSS Selectors

When useClientTheming setting is enabled (set to true), base styling is removed and CSS classes for custom styling are applied to button element. These are available css classes:

CSS Class Description
.srct-av-stream-button Styles applied to the av stream toggle button wrapper element.
.srct-av-stream-button__icon Styles applied to the av stream toggle button icon element.

List of Default Icons

Icon ID Matching Icon
pitchDarts Darts Dartboard icon
pitchAmericanFootball American Football icon
pitchBadminton Badminton Court icon
pitchBaseball Baseball field icon
pitchBasketball Basketball Court icon
pitchBeachVolleyball Volleyball Court icon
pitchFutsal Futsal Court icon
pitchHandball Handball Court icon
pitchHockey Hockey Rink icon
pitchRugby Rugby Pitch icon
pitchSnooker Snooker Pitch icon
pitchTableTennis Table Tennis Table icon
pitchTennis Table Court icon
pitchVolleyball Volleyball Court icon
pitchSquash Squash Court icon
pitchSoccer Soccer icon
avStream Soccer icon

Example

Following is the example of how a widget Match LMTPlus with LCO stream toggle button looks like:

Pitch view Stream view
Example of pitch view
Example of stream view

Code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Match LMTPlus LCO stream toggle button Configuration</title>
        <style>
            .sr-widgets {
                max-width: 620px;
                width: 100%;
            }

            /* button wrapper */
            .sr-bb .srct-av-stream-button {
                right: 10px;
            }

            /* button icon */
            .sr-bb .srct-av-stream-button__icon {
                fill: red;
            }
        </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: false,
                language: 'en'
            });

            SIR('addWidget', '.sr-widget-1', 'match.lmtPlus', {
                matchId: match_id_here,
                branding: {
                    namespaces: {
                        avStreamToggle: {
                            tabs: {
                                icons: {
                                    "avStream": "https://widgets.sir.sportradar.com/docs/img/logo.svg"
                                },
                                useClientTheming: true
                            }
                        }
                    }
                }
            });
        </script>
        <div class="sr-widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>
    </body>
</html>