Step 1
Below is code snippet, which you can find in Getting Started Guide. Snippet adds script to download and register widget loader as global functionSIR. Then it calls SIR function with addWidget method which will load our widget match.scoreboard into target dom element #sr-widget-1 that we provided below in widgets div.
Caution
Even though we immediately called
SIR function, it will only be executed once the widget loader framework is downloaded asynchronously! Once it is executed, it will replace the content of the targeted DOM element with empty widget code and then start initializing/loading the requested widget. Only then, when the widget obtains all the needed data, will it either display its components or show an error.
<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"
});
SIR("addWidget", "#sr-widget-1", "match.scoreboard", {matchId:41960917});
</script>
<div class="widgets">
<div id="sr-widget-1" class="box"></div>
</div>
Step 2
Next, we'll incorporate a loading indicator. Please ensure you're not adding any content to the element where the widget will be loaded.
<!-- No change to script code -->
<style>
body{display:flex;justify-content:center;}
.widgets{max-width: 360px;width:100%;}
/* Set same size widget and content div */
.box {
border: rgba(0,0,0,0.12) solid 1px; /* Visual helper */
min-height: 160px;
}
/* Center loader inside your content element */
#your-content {
display: flex;
align-items: center;
justify-content: center;
}
/* Example code for loading element */
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 40px;
height: 40px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* End of loading element code*/
</style>
<div class="widgets">
<div id="sr-widget-1" class="box"></div>
<!-- Make sure not to add content to the element you will load widget into! -->
<div id="your-content" class="box">
<div class="loader"></div>
</div>
</div>
Step 3
Our final step is to initially set the visibility of the widget's target element to 'hidden.' Then, once the 'data_change' event is triggered, we can proceed to either remove or hide the loading element and subsequently display the widget element. <script>
/* No change to widget loader code */
(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://master-vs.branch.widgets.nonprod.euc1.srbets.io/customBetDemo/widgetloader", "SIR", {
language: "en"
});
let widgetHasInitialized = false; // Optimization so that we only change display once
// Add onTrack callback to listen to changes
function onTrack(target, data) {
// Generally on first data_change event if error in data is undefined, widget will be successfully loaded
if (target === "data_change" && !data.error && !widgetHasInitialized) {
// Change display of target element that we hidden in styles below to display widget
document.getElementById('sr-widget-1').style.display = 'block';
// Hide your content with loader element
document.getElementById('your-content').style.display = 'none';
widgetHasInitialized = true;
}
}
// Add onTrack function to widget parameters
SIR("addWidget", "#sr-widget-1", "match.scoreboard", {matchId:41960917, onTrack: onTrack});
</script>
<style>
/* No change to previous styles */
/* Hide widget target element. until we get data_change event in onTrack function */
.sr-widget-1 {
display:none;
}
</style>
<div class="widgets">
<div id="sr-widget-1" class="box sr-widget-1"></div>
<!-- Make sure not to add content to the element you will load widget into! -->
<div id="your-content" class="box">
<div class="loader"></div>
</div>
</div>
Troubleshooting
Loading icon disappears before widget is loaded
Adding Content to the Targeted DOM Element
Be cautious when adding content to the target DOM element of the widget, as it will be replaced by widget code once the
addWidget method is executed.
<script>
/* No change to widget loader code */
(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://master-vs.branch.widgets.nonprod.euc1.srbets.io/customBetDemo/widgetloader", "SIR", {
language: "en"
});
SIR("addWidget", "#sr-widget-1", "match.scoreboard", {matchId:41960917});
</script>
<div class="widgets">
<div id="sr-widget-1" class="box">
<!-- Don't add content here! -->
<div id="your-content" class="box">
<div class="loader"></div>
</div>
</div>
</div>