Betting Entertainment Tools

Widgets Demo

Button Widget

Button widget is an button element that displays additional information about virtual stadium channel.


Parameters
Name Type Attributes Description
apiKey string <required>

api key of operator
channelId string <required>

Id of channel to open
onAction function

Function/action handler. Is executed when a specific action occurs. Example:

onAction: function(action) {
     switch (action.type) {
         case 'Toggle': {
             const { data } = action; // handle button click action accordingly.
             ...
         }
         ...
     }
 }
buttonVariant 'large' | 'compact'

If integration: floatingButton, control the button size/content

  • large: full button, icon and text
  • compact: just the icon
Examples

Using button widget

```html
<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", {
       language: 'en'
   });
   // Button Widget
   SIR('addWidget', '.sr-vs-widget', 'virtualStadium.button', {channelId: "{CHANNEL_ID}", apiKey: "{apiKey}"}});
</script>
<div class="vs-wrapper">
   <div class="sr-vs-widget"></div>
</div>
 ```

Transition from button to Virtual Stadium Solution widget

 ```html
    <style>
        body {
            height: 200vh;
            position: relative;
        }
        .wrapper {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
        }
        #vs {
            --anim-duration: 250ms;
        }
        #vs-chat {
            transition: all var(--anim-duration) ease-in;
            transform-origin: bottom right;
            transform: scale(0);
            opacity: 0;
        }
        #vs-chat[data-open='true'] {
            height: var(--chat-height);
            height: 800px;
            width: 400px;
            opacity: 1;
            transform: scale(1);
        }
        #vs-chat[data-open='false'] {
            opacity: 0;
        }
        #vs-button {
            position: absolute;
            right: 0;
            bottom: 0;
            transition: all var(--anim-duration) ease-in;
            width: fit-content;
            transform: translateX(0%);
            opacity: 1;
        }
        #vs-button[data-state='loading'] {
            animation: pulse 1s infinite;
        }
        #vs-button[data-state='hidden'] {
            transform: translateX(100%);
            opacity: 0;
        }
        @ keyframes pulse {
            100% {
                filter: blur(0px);
            }
            50% {
                filter: blur(1px);
            }
            0% {
                filter: blur(0px);
            }
        }
    </style>
    <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", {
        language: 'en'
     });
     // Virtual Stadium Widget
     SIR('addWidget', '.vs-button', 'virtualStadium.button', {channelId: "{CHANNEL_ID}", apiKey: "{apiKey}"}, buttonVariant: "{large|compact}"});

    const openButton = document.querySelector("#vs-button")
    const chat = document.querySelector("#vs-chat")
    const animationDurationInMs = 250;

    function handleChatClose() {
        if (payload.type === 'Click' && payload.data?.source === 'CloseSolution') {
            openButton.removeAttribute('data-state');
            chat.setAttribute('data-open', false);
            // Delay widget removal till animation finishes
            setTimeout(() => {
                SIR('removeWidget', '#vs-chat');
            }, animationDurationInMs);
        }
    }

    function handleChatOpen() {
        openButton.setAttribute("data-state", "hidden")
        chat.setAttribute("data-open", true)
    }

    function handleClick() {
        openButton.setAttribute("data-state", "loading")

        SIR('addWidget', '#vs-chat', 'virtualStadium', {
            channelId: "<fill me>",
            jwt: "<fill me>",
            onTrack: handleChatOpen,
            onAction: handleChatClose
        })
    }

    openButton.addEventListener("click", handleClick)
</script>
<div id="vs">
    <div role="button" id="vs-button" tabindex="0"></div>
    <div id="vs-chat" data-open="false"></div>
   </div>
 ```