Self-Service Adapter

#What Is a Self-Service Adapter?

A Self-Service Adapter is a custom integration layer that connects SIR Widgets to your betting data sources. Instead of using Sportradar's hosted adapter, you implement the data fetching logic yourself, giving you complete control over:

• Data Sources – Connect to any odds/betting API
• Data Transformation – Map your API responses to the widget-expected format
• Caching Strategy – Implement your own caching and optimization
• Real-Time Updates – Control how and when data refreshes

#Understand the Adapter Structure

The adapter object consists of two primary properties:

• config: Contains static configuration for widgets, such as layout options and filtering rules.
• endpoints: A collection of functions that the widget calls to request data (e.g., event details, markets, odds).

const adapter = {
  config: {
    widget: {
      'betRecommendation.eventList': {
        layout: { /* EventListMarketsConfig */ },
        allowedMarkets: { /* SportMarketsMap */ }
      },
      // ... other widgets
    }
  },
  endpoints: {
    event:

#Understand the Adapter Data Flow

The following diagram illustrates how data flows from your backend API through the adapter and into the widget.

The adapter acts as a bridge, ensuring that whatever format your API returns is converted into the structure the widget expects.

#Workflow Breakdown

#Base Implementation Example

Start with this basic HTML structure to implement your self-service adapter.

#Adapter Implementation

The adapter is a JavaScript object that serves as the interface between your application's data layer and the SIR Widgets. It defines how widgets request data and how your application provides it.

#Implementing the Adapter Endpoints

Before implementing endpoints, review the endpoint type definitions in Types so you understand the required shapes, fields, and callback contracts.

Now implement the complete adapter with all core endpoints. Here's the full adapter implementation with mock data:

#Example: Mocked Data Adapter

Here's the complete HTML file with all pieces assembled:

#Connect to Your API

To connect to your actual betting API, you need to replace the mock data with actual network requests. This typically involves fetching data from your backend and transforming it to match the structure expected by the widget.

#Adding Real-Time Updates

For live events, it is crucial to keep odds and market status up to date. You can achieve this using polling or WebSockets. Here is an example using polling:

#Further Reading

• Adapter API Reference – Complete type definitions for all endpoints
• Adapter Overview – Architecture and concepts
• Self-Service Adapter Reference – Detailed endpoint documentation
• Hosted Adapter – Alternative approach using Sportradar-managed adapter

#Widget-Specific Tutorials

Once you've completed this general integration tutorial, refer to widget-specific guides for detailed implementation patterns:

• Bet Insights Widget – Coming soon
• Bet Recommendation Widgets – Coming soon
• Swipe Bet Widget – Coming soon

<!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: 620px;
        width: 100%;
      }
      .sr-widget {
        border: rgba(0, 0, 0, 0.12) solid 1px;
      }
    </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
      )})(window,document,"script","https://widgets.sir.sportradar.com/sportradar/widgetloader","SIR", {
          language: 'en' // SIR global options
      });
      
      const adapter = {
        config: {},
        endpoints: {
          availableMarketsForEvent : (args, callback) => {
            callback(undefined, {
              selection: [
                {
                  type: "uf",
                  event: "61513908",
                  market: "1",
                },
              ],
            });
            return () => {};
          },
          eventMarkets: (args, callback) => {
            callback(undefined, {
              event: args.selection.event,
              markets: [
                {
                  id: "1",
                  status: "active",
                  name: "1x2",
                  outcomes: [
                    {
                      id: "1",
                      name: "Tenhaisen",
                      odds: {
                        type: "decimal",
                        value: "1.88",
                      },
                      status: "active",
                    },
                    {
                      id: "2",
                      name: "draw",
                      odds: {
                        type: "decimal",
                        value: "3.85",
                      },
                      status: "active",
                    },
                    {
                      id: "3",
                      name: "Hoftenstain",
                      odds: {
                        type: "decimal",
                        value: "3.7",
                      },
                      status: "active",
                    },
                  ],
                },
              ],
            });
            return () => {};
          },
          event: (args, callback) => {
            callback(undefined, {
              event: {
                id: args.selection.event,
                date: {
                  displayValue: "14/01/26, 19:30",
                  startTime: "2026-01-14T19:30:00.000Z",
                },
                sport: {
                  id: "1",
                  name: "Soccer",
                },
                category: {
                  id: "30",
                  name: "Germany",
                },
                tournament: {
                  id: "42",
                  name: "Liga Supreme",
                },
                teams: [
                  {
                    id: "1270229",
                    name: "Tenhaisen",
                  },
                  {
                    id: "31531",
                    name: "Hoftenstain",
                  },
                ],
                isLive: false,
              },
            });
            return () => {};
          },        
          filterMarkets: (args, callback) => {
            callback(undefined, {
              selection: [
                {
                  type: "uf",
                  event: "61513908",
                  market: "1",
                },
              ],
            });
            return () => {};
          },
          betSlipSelection: (args, callback) => {
            callback(undefined, {
              selection: [
                {
                  event: "61513908",
                  market: "1",
                  outcome: "1",
                  type: "uf",
                },
              ],
            });
            return () => {};
          },
          cashBackSelections: (args, callback) => {
            callback(undefined, {
              events: [
                {
                  event: "56418457",
                  type: "uf",
                },
              ],
            });
            return () => {};
          },
        },
      };
    
      SIR("registerAdapter", adapter);

      window.addEventListener('load', function() {
        SIR("addWidget", "#sr-widget", "betInsights", {
          matchId: 61513908,
          testMarkets: "1"
        });
      });
    </script>
  </head>
  <body>    
    <div class="widgets">
      <div id="sr-widget">Widget will load here...</div>
    </div>
  </body>
</html>