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:

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 feed
Transforms data – Your API response is mapped to the format defined by the SIR Widgets specification
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 →

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 →

#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 <YOUR_CLIENT_ID> with your actual Sportradar client ID. Also replace <WIDGET_NAME> 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.

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: 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(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>

Learn more about Self-Service Implementation →

#Next Steps

#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 feed

Transforms data – Your API response is mapped to the format defined by the SIR Widgets specification

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

#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 <YOUR_CLIENT_ID> with your actual Sportradar client ID. Also replace <WIDGET_NAME> and ...widgetProps with the actual widget name and configuration.

danger

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: 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(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>

Learn more about Self-Service Implementation →

#What Is an Adapter?

#Adapter Types

1. Self-Service Adapter

2. Hosted Adapter

#Integration Example

Basic Structure

Styling

Widget Loader Script

Adapter Implementation

Register Adapter

Add Widget

Widget Container

#Next Steps

Overview

#What Is an Adapter?

#Adapter Types

1. Self-Service Adapter

2. Hosted Adapter

#Integration Example

Basic Structure

Styling

Widget Loader Script

Adapter Implementation

Register Adapter

Add Widget

Widget Container

#Next Steps