Conditional Widget Display With Error Handling

#Intended Audience

This tutorial is for:

• Frontend developers building conditional UI elements that depend on widget state
• UX engineers creating graceful error handling experiences
• Developers familiar with basic widget integration and onTrack callbacks
• Those building tab interfaces, conditional buttons, or dynamic widget displays

#Goals

By completing this tutorial, you will:

• Understand when and why to display widgets conditionally
• Implement hidden widget loading with error detection
• Use onTrack callback to detect successful widget initialization
• Display UI controls only when widgets load successfully
• Move widgets between DOM containers dynamically
• Handle widget errors without showing broken UI elements

#Prerequisites

Before starting this tutorial, ensure you have:

• Valid Sportradar Widget license - Contact Sales if needed
• Basic HTML/CSS/JavaScript knowledge - DOM manipulation, event handling, element styling
• Completed Widget Loading Tutorial - Understanding of onTrack callback
• Web development environment - Text editor and modern browser with DevTools

#Overview

#The Challenge

In many UX scenarios, you want to show UI controls (buttons, tabs, toggles) only when the associated widget loads successfully:

• Tab interfaces - Display tabs only for widgets that loaded without errors
• Toggle buttons - Show "Show Widget" buttons only if the widget is available
• Conditional features - Enable features that depend on widget data

#The Solution

Load widgets in a hidden container, check for successful initialization using onTrack, then move them to the visible area and display related controls only if no errors occurred.

#Tutorial Steps

#Step 1: Set up HTML Structure With Hidden Containers

Create two separate areas: a hidden loading area for widgets, and a visible content area for UI controls.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Conditional Widget Display</title>
    <style>
        #your-content {
            display: flex;
            align-items: center;
            justify-content:

#Understanding the Structure

#Step 2: Get DOM Element References

Obtain references to all HTML elements you'll need to manipulate.

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

#Step 3: Initialize the Widgetloader

Load the widget framework with your configuration.

(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*

#Step 4: Implement the onTrack Callback With Error Detection

Create a callback that listens for successful widget loading and moves the widget to the visible area.

// Function to listen to widget events
const onTrack = (eventType, data) => {
    if (eventType === 'data_change') {
        if (!data.error) {
            // Widget loaded successfully - move it to visible area
            loadingArea.removeChild(widget);
            pageContent.appendChild(widget);
            button.

#What Happens Here

#Step 5: Implement Toggle Functionality

Create a function to toggle widget visibility when the button is clicked.

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

#Step 6: Load the Widget With Configuration

Initialize the widget with the onTrack callback.

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

#Complete Implementation

<!DOCTYPE html>
<html lang

#Advanced Use Cases

#Loading Multiple Widgets With Conditional Display

You can extend this pattern to handle multiple widgets:

#Error Logging and Fallback Content

Handle errors explicitly with custom messaging:

const onTrack = (eventType, data) => {
    if (eventType === 'data_change') {
        if (!data.error) {
            // Success: move widget and show controls
            loadingArea.removeChild(widget);
            pageContent.appendChild(widget);

#Troubleshooting

#Issue: Button Appears but Widget Doesn't

Symptom: The toggle button shows up, but clicking it doesn't display the widget.

Cause: The widget wasn't properly moved from the loading area.

Solution: Verify the DOM manipulation in your onTrack callback:

// Check in browser console
console.log('Widget parent:', widget.parentElement);
// Should show #your-content, not #loading-area

#Issue: Widget Shows Briefly Then Disappears

Symptom: Widget flashes on screen then vanishes.

Cause: Multiple data_change events firing without proper flag management.

Solution: Add a flag to track widget movement:

let widgetMoved = false;

const onTrack = (eventType, data) => {
    if (eventType === 'data_change' && !data.error && !widgetMoved) {
        loadingArea.removeChild(widget);
        pageContent.appendChild(widget);
        button.style.display = 'block'

#Issue: Console Errors About removeChild

Symptom: Uncaught DOMException: Failed to execute 'removeChild'

Cause: Trying to remove a widget that isn't a child of the loading area.

Solution: Check parent before removing:

if (widget.parentElement === loadingArea) {
    loadingArea.removeChild(widget);
    pageContent.appendChild(widget);
}

#Key Takeaways

#Further Reading

#Core Documentation

• Widget Events (onTrack) - Complete event reference and all event types
• Error Handling Guide - Comprehensive error handling strategies
• Widget Configuration - All widget configuration options

#Related Tutorials

• Adding Loading Indicators - Basic onTrack usage for loading states
• Widget Visibility in Carousels - Managing visibility in dynamic layouts

#Advanced Topics

• Silent Error Mode - When to use silent mode vs programmatic detection
• Dynamic Widget Loading - Loading widgets on demand
• Performance Best Practices - Optimizing widget loading