Widget troubleshooting is the process of identifying, diagnosing, and resolving issues that occur during widget integration and runtime. Unlike error handling (which involves writing code to manage failures gracefully), troubleshooting focuses on finding the root cause of problems and implementing fixes.
This guide addresses the most common widget integration issues with visual symptoms, diagnostic steps, and proven solutions to get your widgets working correctly.
This tutorial is for developers and integrators who are experiencing specific issues with Sportradar widgets and need step-by-step diagnostic guidance to identify and resolve problems. Whether you're encountering layout issues, missing content, or unexpected behavior, this guide will help you systematically diagnose and fix common widget problems.
In this tutorial you will learn:
In order to complete this tutorial you will need:
This guide covers the following common issues:
| Issue | Symptom | Typical Cause |
|---|---|---|
| Widget Not Displaying | Nothing appears, container is empty | Initialization, configuration, or selector issues |
| Loading Indicator Disappears Too Early | Loading indicator vanishes before widget loads | Content placed inside widget target container |
| Widget Showing Errors | Error icons or messages displayed | Configuration, data availability, or licensing issues |
| Widget Visibility in Carousels and Sliders | Components misaligned or incorrectly sized | CSS display property conflicts |
| ShadowDOM Integration Issues | Widget not rendering inside ShadowDOM | Incorrect selector or missing styles |
| Widgets Theming | Widget appearance broken or inconsistent | CSS conflicts with page styles |
Before diving into specific issues, follow this systematic diagnostic approach:
Always start by checking the browser console for error messages:
F12 or Ctrl+Shift+J / Cmd+Option+J)Check if all resources are loading successfully:
Examine the widget container in the page structure:
Isolate the issue by testing with a minimal, known-working setup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget Test</title>
</head>
<body>
<div id="test-widget"></div>
<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/YOUR_CLIENT_ID/widgetloader",
"SIR", { language: "en" }
);
SIR('addWidget', '#test-widget', 'match.scoreboard', {
matchId: 43406689 // Known valid match ID
});
</script>
</body>
</html>If this works, the issue is likely in your specific implementation.
Some issues require assistance from Sportradar support. Contact support when:
Before contacting support, gather:
See Support for contact information and support channels.