How to Embed STATSCORE Widgets with Automatic Prematch-to-Live Switching
Implement the global loader once, then render any match dynamically using eventId. A two-step implementation for fast loading and automatic switching between PrematchPro and LivematchPro trackers.
How to integrate STATSCORE Widgets on your website.
To ensure the widgets load incredibly fast and seamlessly switch between Prematch and Live match displays, the implementation is divided into two simple parts.
1. The Loader (Insert into the Website Header)
This script is responsible for downloading the STATSCORE library. It needs to be implemented only once for the entire website.
Instructions: Paste the following code globally into the <head> section of your website.
html
<!-- STATSCORE Global Loader: Place only once in the <head> -->
<script>
!function(){var d="STATSCOREWidgetsEmbederScript";if(!window.document.getElementById(d)){window.STATSCOREWidgets={},window.STATSCOREWidgets.onLoadCallbacks=[],window.STATSCOREWidgets.onLoad=function(d){window.STATSCOREWidgets.onLoadCallbacks.push(d)};var n=window.document.createElement("script");n.src="https://wgt-s3-cdn.statscore.com/bundle/EmbederESM.js",n.type="module",n.async=!0,n.id=d,n.addEventListener("error",function(d){for(var n=0;n<window.STATSCOREWidgets.onLoadCallbacks.length;n++)window.STATSCOREWidgets.onLoadCallbacks[n](d)}),document.head.appendChild(n)}}();
2. The Widget Viewer (Insert into the Page Content)
This code renders the actual match. Thanks to the LiveSwapper mechanism, you don't have to worry about the match status. Just insert the unique eventId, and the script will automatically display the Prematch Layout (if the match is scheduled) and seamlessly swap to the Live Layout (if the match is live).
Instructions: Whenever you want to display a match on a subpage or in an article, insert the HTML/JS code below where the widget should appear.
⚠️ Important: Change the var eventId = 6429192; to the ID of the specific match you want to display!
html
<!-- STATSCORE Widget Container -->
<!-- You can adjust the min-height according to your website's layout needs -->
<div id="statscore-widget-container" style="min-height: 500px; width: 100%;"></div>
<!-- STATSCORE Dynamic Match Script -->
<script>
window.STATSCOREWidgets.onLoad(function(e) {
if (e) {
console.error("STATSCORE: Library loading error", e);
return;
}
/* --- IMPORTANT: CHANGE EVENT DATA HERE --- */
var eventId = 6429192; // <--- REPLACE WITH YOUR EVENT ID
var lang = 'pl'; // Language code ('pl', 'en', etc.)
/* Configured Widget Group IDs */
var PREMATCH_ID = "69c0ee********1263e323f3"; // <--- REPLACE WITH YOUR PREMATCHPRO GROUP ID
var LIVE_ID = "69c0ed********1263e323f2"; // <--- REPLACE WITH YOUR LIVEMATCHPRO GROUP ID
var container = document.getElementById("statscore-widget-container");
try {
var widgetData = { "language": lang, "eventId": eventId };
var widgetOptions = { "loader": { "enabled": true } };
/* 1. Initialize PREMATCH Group */
var prematchGroup = new window.STATSCOREWidgets.WidgetGroup(
container,
PREMATCH_ID,
widgetData,
widgetOptions
);
/* 2. Initialize LIVEMATCH Group */
var liveGroup = new window.STATSCOREWidgets.WidgetGroup(
container,
LIVE_ID,
widgetData,
widgetOptions
);
/* 3. Execute LiveSwapper Engine */
var liveSwapper = new window.STATSCOREWidgets.LiveSwapper(prematchGroup, liveGroup);
liveSwapper.on('error', function(errorEvent) {
console.error("STATSCORE LiveSwapper Swap Error:", errorEvent);
});
} catch (error) {
console.error("STATSCORE Execution Error:", error);
}
});
</script>
Pro-Tip for developers: If you plan to embed multiple different matches on the exact same page, make sure you change the id="statscore-widget-container" variable to a unique identifier (for example, id="statscore-widget-container-2") and update the container variable in the script accordingly, so the system knows where to render each game respectively.
You can find product documentation here: