Self-Service Adapter Demo

--- title: "Adapter - Overview" canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/adapter/Overview" markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/adapter/Overview.md" last_updated: "2026-04-09T12:15:18Z" --- # Adapter - Overview 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: 1. **Receives requests** – Widgets call adapter endpoints with specific parameters (event ID, market type, language, etc.) 2. **Fetches data** – The adapter retrieves data from your betting API or WebSocket feed 3. **Transforms data** – Your API response is mapped to the format defined by the SIR Widgets specification 4. **Delivers 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 widgets - **Full control** – You manage caching, rate limiting, and data transformation logic - **Real-time ready** – Built-in subscription patterns support live odds updates - **Two implementation options** – Build your own (self-service) or use a Sportradar-hosted adapter for supported data providers ## Adapter Types SIR Widgets supports two types of adapter implementations: ### 1. Self-Service Adapter A custom adapter implementation that you develop yourself. This gives you complete control over: - Data fetching and updating logic - Caching strategies - Transformation rules **Use when:** - You want full control over implementation - You're not using one of supported data provider [Learn more about Self-Service Implementation →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/SelfServiceImplementation.md) [Open](https://apidocs.sportradar.com/resources/api-hub.md) ### 2. Hosted Adapter A hosted adapter implementation provided and by Sportradar that works with common data providers. Sportradar manages: - Implementation details - Updates and maintenance **Use when:** - You're using a supported data provider (e.g., Sportradar) [Learn more about Hosted Implementation →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/HostedImplementation.md) [Open](https://apidocs.sportradar.com/resources/api-hub.md) ## Integration Example This 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. > **Important** > > Replace `` with your actual Sportradar client ID. Also replace `` and `...widgetProps` with the actual widget name and configuration. > **Danger** > > 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.** **Self-Service Example** ```html Self-Service Adapter Demo

``` 1. **Step 1** #### Basic Structure Base structure needed for a standalone HTML file. 2. **Step 2** #### 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. 3. **Step 3** #### Widget Loader Script Add the SIR widget loader script in the `` section. This loads the widget framework asynchronously and makes the global `SIR` function available. Make sure to replace: - `` with your actual Sportradar client ID. 4. **Step 4** ### Adapter Implementation Here goes your adapter implementation code. Example using mocked data is in [Self-Service Implementation - Mocked Data Example](https://apidocs.sportradar.com/resources/widgets/docs/adapter/SelfServiceImplementation.md#mocked-data-adapter-example). 5. **Step 5** ### Register Adapter Register the adapter object using `SIR("registerAdapter", adapter)`. This must be done **once** before adding any widgets. 6. **Step 6** #### 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: - `` with the actual widget name (e.g. `betInsights`) - `...widgetProps` with the specific properties for that widget (e.g., `{ matchId: 12345678 }`) 7. **Step 7** #### Widget Container Create a container element (`#sr-widget`) where the widget will be rendered. Widgets need a target element to mount into. [Learn more about Self-Service Implementation →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/SelfServiceImplementation.md) **Hosted Example** ```html Hosted Adapter Demo

``` 1. **Step 1** #### Basic Structure Base structure needed for a standalone HTML file. 2. **Step 2** #### 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. 3. **Step 3** #### Widget Loader Script Add the SIR widget loader script in the `` section. This loads the widget framework asynchronously and makes the global `SIR` function available. Make sure to replace: - `` with your actual Sportradar client ID. - `` with the adapter data source provided to you during the integration process. 4. **Step 4** #### 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: - `` with the actual widget name (e.g. `betInsights`) - `...widgetProps` with the specific properties for that widget (e.g., `{ matchId: 12345678 }`) 5. **Step 5** #### Widget Container Create a container element (`#sr-widget`) where the widget will be rendered. Widgets need a target element to mount into. [Learn more about Hosted Implementation →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/HostedImplementation.md) ## Next Steps - [Self-Service Implementation Guide →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/SelfServiceImplementation.md) - [Hosted Implementation Guide →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/HostedImplementation.md) - [Common Adapter Types Reference →](https://apidocs.sportradar.com/resources/widgets/docs/adapter/Types.md)