Handling Widget Errors and Displaying Widgets Conditionally

Overview

Handling widget errors effectively and displaying widgets conditionally is crucial for providing a seamless user experience on your website. This guide will walk you through the process of managing widget errors and controlling widget visibility using the onTrack event and hidden containers.

Problem Statement

While the simplest approach to handle errors is by adding the 'silent' property to the widget, this may not be suitable for scenarios where you wish to display a tab or button to reveal the widget only when there are no errors.

Solution

To achieve the desired level of control, load the widget initially while keeping it hidden. Subsequently, check if it has loaded successfully before enabling or displaying the dependent elements on your webpage.

Example

In this example, we will load the scoreboard widget and display the 'Toggle widget display' button if the widget loads without encountering any errors.

In your HTML document, initialize the widget using the provided JavaScript library. This code snippet loads the necessary widget library and sets configuration options, such as themes and language.

<script>
    // Initialize widgets
    (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/betradar/widgetloader", "SIR", {
        language: "en"
    });
</script>

Step 2: Set Up Your HTML Structure

Create the HTML structure for your widget and loading indicator. Initially, load the widget into a hidden container to avoid displaying it immediately.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Widget Tracking Demo</title>
    <style>
        #your-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div id="your-content">
    <button id="toggle" style="display: none">Toggle widget display</button>
</div>
<!-- Load the widgets here so that they are not displayed initially -->
<div id="loading-area" style="display: none">
    <div id="widget" class="sr-widget" style="display: none"></div>
</div>
</body>

Step 3: Implement the onTrack Callback

Define a callback function to listen to widget events, specifically the onTrack event. This event provides information about the widget's loading status, including errors.

// Function to listen to widget events
const onTrack = (eventType, data) =>{
    if (eventType === 'data_change') {
        if (!data.error) {
            loadingArea.removeChild(widget);
            pageContent.appendChild(widget);
            button.style.display = 'block';
        }
    }
}

Implement a function to toggle the widget's visibility on a button click. This allows you to control when the widget is displayed to the user.

// Toggle widget visibility on button click
const onWidgetToggle = () => {
    widget.style.display = widget.style.display === 'none' ? 'block' : 'none';
}
button.onclick = onWidgetToggle;

Finally, load the widget using the SIR function, specifying the target container, widget name, and configuration options. Include the onTrack callback to handle errors and control widget visibility.

// Load the widget
SIR("addWidget", "#widget", "match.scoreboard", {
    matchId: 43406689,
    onTrack: onTrack
});

Conclusion

By following these steps, you can effectively handle widget errors, load widgets conditionally, and ensure a smoother user experience on your website. This approach allows you to control widget visibility and provides a clean solution for handling errors without displaying blank spaces on your page.

Full example

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Widget Tracking Demo</title>
    <style>
        #your-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div id="your-content">
    <button id="toggle" style="display: none">Toggle widget display</button>
</div>
<!-- Load the widgets in here so that they are not displayed -->
<div id="loading-area" style="display: none">
    <div id="widget" class="sr-widget" style="display: none"></div>
</div>
</body>
<script>
    // Get the HTML elements from the document
    const loadingArea = document.getElementById('loading-area');
    const pageContent = document.getElementById('your-content');
    const widget = document.getElementById('widget');
    const button = document.getElementById('toggle');

    // Initialize widgets
    (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/betradar/widgetloader", "SIR", {
        theme: false, // using custom theme
        language: "en"
    });

    // Function to listen to widget events
    const onTrack = (eventType, data) =>{
        if (eventType === 'data_change') {
            if (!data.error) {
                loadingArea.removeChild(widget);
                pageContent.appendChild(widget);
                button.style.display = 'block';
            }
        }
    }

    // Toggle widget visibility on button click
    const onWidgetToggle = () => {
        widget.style.display = widget.style.display === 'none' ? 'block' : 'none';
    }
    button.onclick = onWidgetToggle;

    // Load the widget
    SIR("addWidget", "#widget", "match.scoreboard", {
        matchId: 43406689,
        market: 'whoWillScoreFirst',
        onTrack: onTrack
    });
</script>
</html>

Documentation

Betting Entertainment Tools