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.

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.

Self-service example

<!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 →

Hosted Example"

<!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>Hosted 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
      });

      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 Hosted Implementation →

Next Steps

PreviousEngagement Tools NextHosted Implementation

Last updated 6 days ago

Was this helpful?

Good afternoon

hashtagWhat is an Adapter?

hashtagAdapter Types

hashtag1. Self-Service Adapter

hashtag2. Hosted Adapter

hashtagIntegration Example

hashtagSelf-service example

hashtagHosted Example"

hashtagNext Steps