Self-Service Adapter Demo

# 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 →](/engagement-tools/adapter/self-service-implementation.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 →](/engagement-tools/adapter/hosted-implementation.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. ***Replace\*\*\*\* ****``**** ****with your actual Sportradar client ID. Also replace**** ****``**** ****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.*** #### Self-service example ```html Self-Service Adapter Demo

``` [Learn more about Self-Service Implementation →](/engagement-tools/adapter/self-service-implementation.md) #### Hosted Example" ```html Hosted Adapter Demo

``` [Learn more about Hosted Implementation →](/engagement-tools/adapter/hosted-implementation.md) ### Next Steps * [Self-Service Implementation Guide →](/engagement-tools/adapter/self-service-implementation.md) * [Hosted Implementation Guide →](/engagement-tools/adapter/hosted-implementation.md) * [Common Adapter Types Reference →](/engagement-tools/adapter/types.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.sportradar.com/engagement-tools/adapter/overview.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.