Widget Rotation and Dynamic Match Switching

#Intended Audience

This tutorial is for:

Frontend developers building dynamic widget displays with automatic rotation
Integration engineers creating live match dashboards or multi-match displays
Developers familiar with basic widget integration
Those building rotating content carousels or live match rotation systems

#Goals

By completing this tutorial, you will:

Understand how to dynamically update widget content by changing match IDs
Implement automatic widget rotation with timed intervals
Use the addWidget method to update existing widgets
Remove widgets programmatically using removeWidget
Manage widget lifecycle with start/stop controls
Build a complete rotating widget system

#Prerequisites

Before starting this tutorial, ensure you have:

Valid Sportradar Widget license - Contact Sales if needed
Multiple match IDs - At least 2-3 valid match identifiers for rotation
Basic HTML/CSS/JavaScript knowledge - Arrays, intervals, DOM manipulation
Completed Getting Started Guide - Understanding of basic widget integration
Web development environment - Text editor and modern browser

info

This tutorial uses the Live Match Tracker widget, but the rotation technique works with any widget type.

#Overview

#The Use Case

Widget rotation is useful for:

Live match dashboards - Cycle through multiple live matches
Featured content rotation - Highlight different matches/tournaments
Space-efficient displays - Show multiple matches in a single widget area
Digital signage - Automatic content rotation for displays

#How It Works

When you call addWidget with the same target element but different configuration (e.g., different matchId), the widget framework:

Detects the existing widget in that element
Updates the widget with the new configuration
Re-renders with the new data

tip

Calling addWidget multiple times on the same element updates the widget rather than creating duplicates.

#Tutorial Steps

#Step 1: Set up HTML Structure

Create a simple page with a widget container and control button.

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Rotator</title>
    <style>
        .sr-widget {
            width: 620px;
        }
    </style>
</head>
<body>
    <div class="sr-widget"></div>
    <button onclick="endThisThing()">Remove Widget</button>
</body>
</html>

#Step 2: Initialize the Widgetloader

Load the widget framework and configure your match IDs array.

(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'
});

// Configure match IDs for rotation
let matchIds = [41960917, 41960918, 41960919]; // Replace with your match IDs
let ix = 0;  // Current index in the array
let interval; // Will hold the interval timer

warning

Replace the example match IDs with valid match IDs from your license. Using invalid IDs will result in widget errors.

Implement a function that adds or updates the widget with the next match ID.

function addOrUpdateWidget(callback) {
    SIR('addWidget', '.sr-widget', 'match.lmtPlus', { matchId: matchIds[ix] }, callback);
    
    // Move to next match ID, wrap to start if at end
    if (++ix >= matchIds.length) { ix = 0; }
}

#Understanding the Logic

How Widget Updating Works

Call addWidget - With the current matchId from the array
Widget framework detects - Element .sr-widget already contains a widget
Widget updates - Instead of creating a new widget, it updates the existing one
Index increments - Move to the next match ID for the next rotation
Array wraps - When reaching the end, reset to index 0

info

The optional callback parameter allows you to perform actions after the widget loads, such as starting the rotation timer.

#Step 4: Start the Rotation

Load the first widget and start the automatic rotation timer.

// Load first widget, then start rotation
addOrUpdateWidget(function() {
    // Start rotating every 3 seconds (3000ms)
    interval = setInterval(addOrUpdateWidget, 3000);
});

tip

Why use a callback? This ensures the first widget loads before starting the rotation timer, preventing rapid initial updates.

#Adjusting Rotation Speed

Change the interval duration to control rotation speed:

// Slower rotation - every 5 seconds
interval = setInterval(addOrUpdateWidget, 5000);

// Faster rotation - every 1 second
interval = setInterval(addOrUpdateWidget, 1000);

Create a function to stop rotation and remove the widget from the page.

function endThisThing() {
    // Stop the rotation timer
    clearInterval(interval);
    
    // Remove the widget from the page
    SIR('removeWidget', '.sr-widget');
    // Alternative: pass DOM element directly
    // SIR('removeWidget', document.querySelector('.sr-widget'));
}

#removeWidget Options

SIR('removeWidget', '.sr-widget');

Pass a CSS selector string. The framework will find and remove the widget.

danger

Always clear intervals before removing widgets to prevent memory leaks and errors from the interval trying to update a non-existent widget.

#Complete Implementation

View Complete Working Example

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Rotator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .sr-widget {
            width: 620px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <h1>Live Match Rotation</h1>
    <div class="sr-widget"></div>
    <button onclick="endThisThing()">Stop & Remove Widget</button>

    <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'
        });

        // Configure match IDs for rotation
        let matchIds = [41960917, 41960918, 41960919];
        let ix = 0;
        let interval;

        // Function to add or update widget
        function addOrUpdateWidget(callback) {
            SIR('addWidget', '.sr-widget', 'match.lmtPlus', { matchId: matchIds[ix] }, callback);
            if (++ix >= matchIds.length) { ix = 0; }
        }

        // Start rotation
        addOrUpdateWidget(function() {
            interval = setInterval(addOrUpdateWidget, 3000);
        });

        // Stop rotation and remove widget
        function endThisThing() {
            clearInterval(interval);
            SIR('removeWidget', document.querySelector('.sr-widget'));
        }
    </script>
</body>
</html>

#Advanced Variations

#Pause/Resume Functionality

Add controls to pause and resume rotation:

let isPaused = false;

function toggleRotation() {
    if (isPaused) {
        // Resume rotation
        interval = setInterval(addOrUpdateWidget, 3000);
        isPaused = false;
    } else {
        // Pause rotation
        clearInterval(interval);
        isPaused = true;
    }
}

html

<button onclick="toggleRotation()">Pause/Resume</button>

Add previous/next buttons for manual control:

function nextWidget() {
    clearInterval(interval); // Stop auto-rotation
    addOrUpdateWidget();
}

function previousWidget() {
    clearInterval(interval); // Stop auto-rotation
    // Move back 2 positions (current increment + desired back step)
    ix = (ix - 2 + matchIds.length) % matchIds.length;
    addOrUpdateWidget();
}

html

<button onclick="previousWidget()">← Previous</button>
<button onclick="nextWidget()">Next →</button>

You can rotate between different widget types:

let widgets = [
    { type: 'match.lmtPlus', config: { matchId: 41960917 } },
    { type: 'match.scoreboard', config: { matchId: 41960918 } },
    { type: 'tournament.standings', config: { tournamentId: 12345 } }
];

function addOrUpdateWidget(callback) {
    const current = widgets[ix];
    SIR('addWidget', '.sr-widget', current.type, current.config, callback);
    if (++ix >= widgets.length) { ix = 0; }
}

#Troubleshooting

Symptom: Brief blank screen between widget updates.

Cause: Widget needs time to fetch new data.

Solution: Increase rotation interval or add a loading state:

function addOrUpdateWidget(callback) {
    // Show loading indicator
    document.querySelector('.sr-widget').classList.add('loading');
    
    SIR('addWidget', '.sr-widget', 'match.lmtPlus', { 
        matchId: matchIds[ix],
        onTrack: function(event, data) {
            if (event === 'data_change' && !data.error) {
                // Remove loading indicator when data loads
                document.querySelector('.sr-widget').classList.remove('loading');
            }
        }
    }, callback);
    
    if (++ix >= matchIds.length) { ix = 0; }
}

#Issue: Rotation Continues After Removal

Symptom: Console errors about missing elements after widget removal.

Cause: clearInterval wasn't called before removeWidget.

Solution: Always clear the interval first:

function endThisThing() {
    // MUST clear interval before removing
    clearInterval(interval);
    SIR('removeWidget', '.sr-widget');
}

#Issue: Rotation Speed Changes Unexpectedly

Symptom: Widgets rotate faster or slower than expected.

Cause: Multiple intervals created without clearing previous ones.

Solution: Always clear existing interval before creating new one:

function startRotation(speed) {
    // Clear any existing interval
    if (interval) {
        clearInterval(interval);
    }
    // Create new interval
    interval = setInterval(addOrUpdateWidget, speed);
}

#Key Takeaways

Widget Updates

Calling addWidget on an element that already contains a widget updates the existing widget rather than creating duplicates.

Interval Management

Always use clearInterval before removing widgets or starting new intervals to prevent memory leaks and errors.

removeWidget Method

The removeWidget method accepts either a CSS selector string or a DOM element reference for flexible widget removal.

#Further Reading

#Core Documentation

Global SIR API Reference - Complete API including removeWidget method
Live Match Tracker Widget - Full LMT Plus documentation
Widget Configuration - All configuration options

Widget Visibility in Carousels - Managing visibility with display/visibility
Adding Loading Indicators - Smooth transitions during updates
Conditional Widget Display - Error handling during updates

#JavaScript Resources

MDN: setInterval - Interval timing documentation
MDN: clearInterval - Clearing intervals
Array Iteration - Working with arrays

#Intended Audience

This tutorial is for:

Frontend developers building dynamic widget displays with automatic rotation
Integration engineers creating live match dashboards or multi-match displays
Developers familiar with basic widget integration
Those building rotating content carousels or live match rotation systems

#Goals

By completing this tutorial, you will:

Understand how to dynamically update widget content by changing match IDs
Implement automatic widget rotation with timed intervals
Use the addWidget method to update existing widgets
Remove widgets programmatically using removeWidget
Manage widget lifecycle with start/stop controls
Build a complete rotating widget system

#Prerequisites

Before starting this tutorial, ensure you have:

Valid Sportradar Widget license - Contact Sales if needed
Multiple match IDs - At least 2-3 valid match identifiers for rotation
Basic HTML/CSS/JavaScript knowledge - Arrays, intervals, DOM manipulation
Completed Getting Started Guide - Understanding of basic widget integration
Web development environment - Text editor and modern browser

info

This tutorial uses the Live Match Tracker widget, but the rotation technique works with any widget type.

#Overview

#The Use Case

Widget rotation is useful for:

Live match dashboards - Cycle through multiple live matches
Featured content rotation - Highlight different matches/tournaments
Space-efficient displays - Show multiple matches in a single widget area
Digital signage - Automatic content rotation for displays

#How It Works

When you call addWidget with the same target element but different configuration (e.g., different matchId), the widget framework:

Detects the existing widget in that element
Updates the widget with the new configuration
Re-renders with the new data

tip

Calling addWidget multiple times on the same element updates the widget rather than creating duplicates.

#Tutorial Steps

#Step 1: Set up HTML Structure

Create a simple page with a widget container and control button.

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Rotator</title>
    <style>
        .sr-widget {
            width: 620px;
        }
    </style>
</head>
<body>
    <div class="sr-widget"></div>
    <button onclick="endThisThing()">Remove Widget</button>
</body>
</html>

#Step 2: Initialize the Widgetloader

Load the widget framework and configure your match IDs array.

(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'
});

// Configure match IDs for rotation
let matchIds = [41960917, 41960918, 41960919]; // Replace with your match IDs
let ix = 0;  // Current index in the array
let interval; // Will hold the interval timer

warning

Replace the example match IDs with valid match IDs from your license. Using invalid IDs will result in widget errors.

Implement a function that adds or updates the widget with the next match ID.

function addOrUpdateWidget(callback) {
    SIR('addWidget', '.sr-widget', 'match.lmtPlus', { matchId: matchIds[ix] }, callback);
    
    // Move to next match ID, wrap to start if at end
    if (++ix >= matchIds.length) { ix = 0; }
}

#Understanding the Logic

How Widget Updating Works

Call addWidget - With the current matchId from the array
Widget framework detects - Element .sr-widget already contains a widget
Widget updates - Instead of creating a new widget, it updates the existing one
Index increments - Move to the next match ID for the next rotation
Array wraps - When reaching the end, reset to index 0

info

The optional callback parameter allows you to perform actions after the widget loads, such as starting the rotation timer.

#Step 4: Start the Rotation

Load the first widget and start the automatic rotation timer.

// Load first widget, then start rotation
addOrUpdateWidget(function() {
    // Start rotating every 3 seconds (3000ms)
    interval = setInterval(addOrUpdateWidget, 3000);
});

tip

Why use a callback? This ensures the first widget loads before starting the rotation timer, preventing rapid initial updates.

#Adjusting Rotation Speed

Change the interval duration to control rotation speed:

// Slower rotation - every 5 seconds
interval = setInterval(addOrUpdateWidget, 5000);

// Faster rotation - every 1 second
interval = setInterval(addOrUpdateWidget, 1000);

Create a function to stop rotation and remove the widget from the page.

function endThisThing() {
    // Stop the rotation timer
    clearInterval(interval);
    
    // Remove the widget from the page
    SIR('removeWidget', '.sr-widget');
    // Alternative: pass DOM element directly
    // SIR('removeWidget', document.querySelector('.sr-widget'));
}

#removeWidget Options

SIR('removeWidget', '.sr-widget');

Pass a CSS selector string. The framework will find and remove the widget.

danger

Always clear intervals before removing widgets to prevent memory leaks and errors from the interval trying to update a non-existent widget.

#Complete Implementation

View Complete Working Example

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Rotator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .sr-widget {
            width: 620px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <h1>Live Match Rotation</h1>
    <div class="sr-widget"></div>
    <button onclick="endThisThing()">Stop & Remove Widget</button>

    <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'
        });

        // Configure match IDs for rotation
        let matchIds = [41960917, 41960918, 41960919];
        let ix = 0;
        let interval;

        // Function to add or update widget
        function addOrUpdateWidget(callback) {
            SIR('addWidget', '.sr-widget', 'match.lmtPlus', { matchId: matchIds[ix] }, callback);
            if (++ix >= matchIds.length) { ix = 0; }
        }

        // Start rotation
        addOrUpdateWidget(function() {
            interval = setInterval(addOrUpdateWidget, 3000);
        });

        // Stop rotation and remove widget
        function endThisThing() {
            clearInterval(interval);
            SIR('removeWidget', document.querySelector('.sr-widget'));
        }
    </script>
</body>
</html>

#Advanced Variations

#Pause/Resume Functionality

Add controls to pause and resume rotation:

let isPaused = false;

function toggleRotation() {
    if (isPaused) {
        // Resume rotation
        interval = setInterval(addOrUpdateWidget, 3000);
        isPaused = false;
    } else {
        // Pause rotation
        clearInterval(interval);
        isPaused = true;
    }
}

html

<button onclick="toggleRotation()">Pause/Resume</button>

Add previous/next buttons for manual control:

function nextWidget() {
    clearInterval(interval); // Stop auto-rotation
    addOrUpdateWidget();
}

function previousWidget() {
    clearInterval(interval); // Stop auto-rotation
    // Move back 2 positions (current increment + desired back step)
    ix = (ix - 2 + matchIds.length) % matchIds.length;
    addOrUpdateWidget();
}

html

<button onclick="previousWidget()">← Previous</button>
<button onclick="nextWidget()">Next →</button>

You can rotate between different widget types:

let widgets = [
    { type: 'match.lmtPlus', config: { matchId: 41960917 } },
    { type: 'match.scoreboard', config: { matchId: 41960918 } },
    { type: 'tournament.standings', config: { tournamentId: 12345 } }
];

function addOrUpdateWidget(callback) {
    const current = widgets[ix];
    SIR('addWidget', '.sr-widget', current.type, current.config, callback);
    if (++ix >= widgets.length) { ix = 0; }
}

#Troubleshooting

Symptom: Brief blank screen between widget updates.

Cause: Widget needs time to fetch new data.

Solution: Increase rotation interval or add a loading state:

function addOrUpdateWidget(callback) {
    // Show loading indicator
    document.querySelector('.sr-widget').classList.add('loading');
    
    SIR('addWidget', '.sr-widget', 'match.lmtPlus', { 
        matchId: matchIds[ix],
        onTrack: function(event, data) {
            if (event === 'data_change' && !data.error) {
                // Remove loading indicator when data loads
                document.querySelector('.sr-widget').classList.remove('loading');
            }
        }
    }, callback);
    
    if (++ix >= matchIds.length) { ix = 0; }
}

#Issue: Rotation Continues After Removal

Symptom: Console errors about missing elements after widget removal.

Cause: clearInterval wasn't called before removeWidget.

Solution: Always clear the interval first:

function endThisThing() {
    // MUST clear interval before removing
    clearInterval(interval);
    SIR('removeWidget', '.sr-widget');
}

#Issue: Rotation Speed Changes Unexpectedly

Symptom: Widgets rotate faster or slower than expected.

Cause: Multiple intervals created without clearing previous ones.

Solution: Always clear existing interval before creating new one:

function startRotation(speed) {
    // Clear any existing interval
    if (interval) {
        clearInterval(interval);
    }
    // Create new interval
    interval = setInterval(addOrUpdateWidget, speed);
}

#Key Takeaways

Widget Updates

Calling addWidget on an element that already contains a widget updates the existing widget rather than creating duplicates.

Interval Management

Always use clearInterval before removing widgets or starting new intervals to prevent memory leaks and errors.

removeWidget Method

The removeWidget method accepts either a CSS selector string or a DOM element reference for flexible widget removal.

#Further Reading

#Core Documentation

Global SIR API Reference - Complete API including removeWidget method
Live Match Tracker Widget - Full LMT Plus documentation
Widget Configuration - All configuration options

Widget Visibility in Carousels - Managing visibility with display/visibility
Adding Loading Indicators - Smooth transitions during updates
Conditional Widget Display - Error handling during updates

#JavaScript Resources

MDN: setInterval - Interval timing documentation
MDN: clearInterval - Clearing intervals
Array Iteration - Working with arrays

#Intended Audience

#Goals

#Prerequisites

#Overview

#The Use Case

#How It Works

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Initialize the Widgetloader

#Step 3: Create the Widget Update Function

#Understanding the Logic

#Step 4: Start the Rotation

#Adjusting Rotation Speed

#Step 5: Implement Widget Removal

#removeWidget Options

#Complete Implementation

#Advanced Variations

#Pause/Resume Functionality

#Manual Navigation Controls

#Rotating Different Widget Types

#Troubleshooting

#Issue: Widget Flickers During Rotation

#Issue: Rotation Continues After Removal

#Issue: Rotation Speed Changes Unexpectedly

#Key Takeaways

Widget Updates

Interval Management

removeWidget Method

#Further Reading

#Core Documentation

#Related Tutorials

#JavaScript Resources

Widget Rotation and Dynamic Match Switching

#Intended Audience

#Goals

#Prerequisites

#Overview

#The Use Case

#How It Works

#Tutorial Steps

#Step 1: Set up HTML Structure

#Step 2: Initialize the Widgetloader

#Step 3: Create the Widget Update Function

#Understanding the Logic

#Step 4: Start the Rotation

#Adjusting Rotation Speed

#Step 5: Implement Widget Removal

#removeWidget Options

#Complete Implementation

#Advanced Variations

#Pause/Resume Functionality

#Manual Navigation Controls

#Rotating Different Widget Types

#Troubleshooting

#Issue: Widget Flickers During Rotation

#Issue: Rotation Continues After Removal

#Issue: Rotation Speed Changes Unexpectedly

#Key Takeaways

Widget Updates

Interval Management

removeWidget Method

#Further Reading

#Core Documentation

#Related Tutorials

#JavaScript Resources