Skip to main content Open Assistant Open Assistant Adapter - Overview | Engagement Tools | API Hub
Engagement Tools Widgets, Engagement Tools, BET
Last updated 3 months ago
Is this site helpful? The Adapter is the integration layer that connects SIR Widgets to your betting platform's data. It acts as a translator between your odds API and the widgets, transforming your data format into the structure widgets expect. By implementing a single adapter, all widgets in your application can access your betting data through standardized endpoints—eliminating duplicate integration work and enabling rapid widget deployment.
# What Is an Adapter?An adapter is a JavaScript object that runs client-side in the browser and serves as the data bridge for all widgets:
Receives requests – Widgets call adapter endpoints with specific parameters (event ID, market type, language, etc.)Fetches data – The adapter retrieves data from your betting API or WebSocket feedTransforms data – Your API response is mapped to the format defined by the SIR Widgets specificationDelivers updates – Data is passed back to widgets via callbacks, with optional real-time subscriptions
Key benefits:
Write once, use everywhere – A single adapter implementation serves all widgetsFull control – You manage caching, rate limiting, and data transformation logicReal-time ready – Built-in subscription patterns support live odds updatesTwo implementation options – Build your own (self-service) or use a Sportradar-hosted adapter for supported data providers
# Adapter TypesSIR Widgets supports two types of adapter implementations:
# Integration ExampleThis example shows starting from scratch with a plain HTML file. If you're integrating into an existing website, add the corresponding elements to your existing pages.
Self-Service Example
Hosted Example
# Next Steps
Replace <YOUR_CLIENT_ID> with your actual Sportradar client ID. Also replace <WIDGET_NAME> and ...widgetProps with the actual widget name and configuration.
Register the adapter once on page load, before adding any widgets. Do not call registerAdapter multiple times or register different adapters. Doing so will cause unpredictable behavior. Widgets added before adapter registration will fail to load data.
Styling
If you are working from starting standalone HTML file add CSS styles for the widget container.
When integrating into an existing website, style the widget container according to your page design instead of using these example styles.
Widget Loader Script
Add the SIR widget loader script in the <head> section. This loads the widget framework asynchronously and makes the global SIR function available.
Make sure to replace:
<YOUR_CLIENT_ID> with your actual Sportradar client ID.
Adapter Implementation
Here goes your adapter implementation code. Example using mocked data is in Self-Service Implementation - Mocked Data Example .
Register Adapter
Register the adapter object using SIR("registerAdapter", adapter). This must be done once before adding any widgets.
Add Widget
Initialize the widget using SIR("addWidget", ...) inside a load event listener. This ensures the widget is added after the page and framework are valid.
Make sure to replace:
<WIDGET_NAME> with the actual widget name (e.g. betInsights)...widgetProps with the specific properties for that widget (e.g., { matchId: 12345678 })
Widget Container
Create a container element (#sr-widget) where the widget will be rendered. Widgets need a target element to mount into.
html
<!DOCTYPE html > < html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < title > Self-Service Adapter Demo </ title > < style > body { display : flex ; justify-content : center ; } . widgets { max-width : 620 px ;
width : 100% ;
}
. sr-widget {
border : rgba ( 0 , 0 , 0 , 0.12 ) solid 1 px ;
}
< / style >
< script type = "text/javascript" >
( 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 global options
} ) ;
const adapter = {
// < Adapter code will go here >
};
SIR ( "registerAdapter" , adapter) ;
SIR ( "addWidget" , "#sr-widget" , "<WIDGET_NAME>" , {
... widgetProps // Replace with widget props
} ) ;
< / script >
</ head >
< body >
< div class = "widgets" >
< div id = "sr-widget" > Widget will load here... </ div >
</ div >
</ body >
</ html >