To set up the JavaScript SDK two files must be made available:

• JavaScript resource

• CSS resource

Both files must be added to your web application's index.html. These files are made available via CDN (Content Delivery Network). The following code can be copied and pasted to access the CDN and obtain the SDK.

<link href="https://cdn.snapodds.com/sdk/v1/snapodds-sdk.css" type="text/css" rel="stylesheet">
<script src="https://cdn.snapodds.com/sdk/v1/snapodds-sdk.js" type="text/javascript"></script>

The SDK must be presented on the whole viewport. For this reason, the following styles must be added. If you already have overlaying elements rendered inside your page, please adjust your z-index accordingly.

<style type="text/css">
  snapodds-sdk {
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
</style>

To set up the JavaScript SDK two files must be made available:

• JavaScript resource

• CSS resource

Both files must be added to your web application's index.html. These files are made available via CDN (Content Delivery Network). The following code can be copied and pasted to access the CDN and obtain the SDK.

<link href="https://cdn.snapodds.com/sdk/v1/snapodds-sdk.css" type="text/css" rel="stylesheet">
<script src="https://cdn.snapodds.com/sdk/v1/snapodds-sdk.js" type="text/javascript"></script>

The SDK must be presented on the whole viewport. For this reason, the following styles must be added. If you already have overlaying elements rendered inside your page, please adjust your z-index accordingly.

<style type="text/css">
  snapodds-sdk {
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
</style>

With this configuration, the web-component is able to "snap" an image of supported live TV sports stream and retrieve information on the currently playing sporting event.

The customer's web application will then render not only the details of the sporting event, but the odds information for the matched game.

This is the simplest implementation, as all of the heavy lifting is done by the SnapOdds SDK.

Integration

The following section deals primarily with the code used in capture of live game information for SnapOdds Operator. If your use case requires game odds to be presented, the information captured by SnapOdds Operator is fed into SnapOdds Sports Media to correlate the game odds information, as described in Game Odds.

Description

With this configuration, the web component is able to "snap" an image of a live TV stream and retrieve information on the currently playing sporting event shown. It is expected that the customer's web application will use the response from the SDK to render more detailed information about the sporting event.

First, ensure both the JavaScript and CSS resource are correctly loaded and that the access token manager is correctly implemented.

To render the SnapOdds SDK component, a DOM element must be provided, to which the component will be attached to as a child. In most cases, the document.body component works best, as the SDK is then added as the last child, which helps with styling as the SDK overlays the full viewport.

Next, it is necessary to configure the SDK and add it as a child to the DOM element of your choice. This can be done by using SnapoddsSdk.snapBuilder().

Show SDK immediately

The following configuration is the simplest one and will show the SDK immediately after appendTo() is called.

SnapoddsSdk.operatorsBuilder()
  .setLanguage('en')
  .setAutoSnap(true)
  .setVibrate(true)
  .setAccessTokenProvider(fetchAccessTokenFromApi)
  .onResults((tvSearchResult) => /* Handle tvSearchResult here */ )
  .onClose(() => console.log('SDK:onClose'))
  .appendTo(document.body);

Show SDK only if sportEvents are live

The SDK can provide you with the information if there is at least one sportsEvent live, based on your channel's configuration.

Instead of appending the SDK to the document.body, you need to configure the onLiveEventsStatusChangedCallback() first. Therefore, you have to call build() instead of appendTo() at the end of the SDK's initialisation in order for it to work.

The callback you provide will be executed after initialisation and will return either true or false, indicating that there is at least one live sportsEvent available or not.

After that, it will automatically check every 5 minutes for upcoming sportEvents. If one is found the callback will be invoked as soon as the sportsEvent starts..

// Step1: Setup the SDK and set the onLiveEventsStatusChangedCallback()
const sdk = SnapoddsSdk.operatorsBuilder()
  .setLanguage('en')
  .setAutoSnap(true)
  .setVibrate(true)
  .setAccessTokenProvider(fetchAccessTokenFromApi)
  .onResults((tvSearchResult) => /* Handle tvSearchResult here */ )
  .onClose(() => console.log('SDK:onClose'))
  .onLiveEventsStatusChangedCallback(() => /* Toggle visibility of the UX element */)
  .build();
  
// Step2: Only when the customer interacts (e.g. clicks) on the UX element append it.
sdk.appendTo(document.body);

The following parameters are used in the SnapoddsSdk.operatorsBuilder():

SDK Configuration Options

Result format

tvSearchResult has the following format:

{
  tvChannel: {
    id: number, // long
    code: string,
    name: string,
    homepage: string, // URL
    _links: {
      self: {
        href: string // URL
      },
      logo: {
        href: string // URL
      },
      poster: {
        href: string // URL
      }
    }
  },
  sportEvent: {
    id: number, // long
    sportDataProviderCode: string,
    sportDataProviderMatchId: string,
    tvChannelId: number, // long
    startTime: string, // iso date-time: yyyy-MM-dd'T'HH:mm:ss.SSSZZ
    endTime: string, // iso date-time: yyyy-MM-dd'T'HH:mm:ss.SSSZZ
    sport: string,
    tournament: string,
    category: string,
    competitors: [
      {
         name: string
      }
    ],
    _links: {
      self: {
        href: string // URL
      }
    }
  },
  timestampRef: number (long),
  score: number (double)
}

The latest version of the SDK is published on and contains a web-component for rendering the Snapscreen UI and the necessary initialization API.

The JavaScript source code, for reference, is available at . To stay informed about the latest updates and improvements, we recommend to watch this repository on GitHub .

The SDK can be integrated in:

• Browsers that support

• Browsers that support

• Browsers that support

A sample integration of the SDK can be found at .

When integrating the SDK please make sure to follow our for a great customer experience.

With this configuration, the web component is able to "snap" an image of a live TV stream and retrieve information on the currently playing sporting event shown.

It is expected that the customer's web application will use the response from the SDK to render more detailed information about the sporting event.

If you want to customize the colors of the UI you can simply override the CSS Variables in snapodds-sdk.css.

snapodds-sdk{
  --snapodds__color--accent: #f2f2f2;
  --snapodds__color--accent-shade: #fffc;
  --snapodds__color--primary: #2dd4bf;
  --snapodds__color--warn: #ea436e;
  --snapodds__color--warn-shade: #ea436e33;
  --snapodds__color-background: #fff;
  --snapodds__color-background--shade: #e5e5e5;
  --snapodds__color-text: #101010;
  --snapodds__color-text--focus: #000;
  --snapodds__font-family: "Helvetica Neue", "Arial", sans-serif
}

@media (prefers-color-scheme: dark){
  snapodds-sdk{
    --snapodds__color--accent: #222;
    --snapodds__color--accent-shade: #000c;
    --snapodds__color-background: #09131d;
    --snapodds__color-background--shade: #4b4b4b;
    --snapodds__color-text: #fff
  }
}

The SnapOdds SDK requires a valid access token to be provided in order to communicate with the Snapscreen API, which uses the OAuth 2.0 authentication mechanism.

Our customers are provided with a Client ID and Secret which must be used to retrieve the access token from the API endpoint described below:

Grants an access token to an anonymous user.

POST https://api.us.snapscreen.com/oauth/token

Request Body

{
  access_token: string,
  token_type: string,
  refresh_token: string,
  expires_in: number (long),
  scope: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

Below is an example of the HTTP request using curl to receive an access token:

curl -d "client_id=YourClientId&client_secret=YourClientSecret&grant_type=anonymous"  https://api.us.snapscreen.com/oauth/token

Having the access token retrieval system implemented on the client side is unsafe and strongly discouraged, as credentials are available in plain text and could easily be stolen. Therefore SnapOdds recommends implementation of this logic on the server side.

For the implementation to function, a REST API endpoint must be provided from which the client can request the access token. On the server side, the access token will be fetched from the Snapscreen API, stored in the current HTTP session, and then returned to the browser.

To further improve security, we also recommend using the CSRF token technique to protect this resource. If you have other security protection mechanisms available in your Web Application, then we highly recommend using them as well.

Let us assume a REST API endpoint has been created using the path '/token'. The next required step is to direct this endpoint to the SnapOdds SDK in the form of an access token provider, which is function that when executed will return a Promise of the whole access token returned from the Snapscreen API.

Enclosed below is a snippet of a basic implementation of the access token provider.

function fetchAccessTokenFromApi() {
  return fetch('/token', { mode: 'cors', cache: 'no-cache' })
    .then((response) => response.json());
}

If you want to customize the colors of the UI you can simply override the CSS Variables in snapodds-sdk.css.

snapodds-sdk{
  --snapodds__color--accent: #f2f2f2;
  --snapodds__color--accent-shade: #fffc;
  --snapodds__color--primary: #2dd4bf;
  --snapodds__color--warn: #ea436e;
  --snapodds__color--warn-shade: #ea436e33;
  --snapodds__color-background: #fff;
  --snapodds__color-background--shade: #e5e5e5;
  --snapodds__color-text: #101010;
  --snapodds__color-text--focus: #000;
  --snapodds__font-family: "Helvetica Neue", "Arial", sans-serif
}

@media (prefers-color-scheme: dark){
  snapodds-sdk{
    --snapodds__color--accent: #222;
    --snapodds__color--accent-shade: #000c;
    --snapodds__color-background: #09131d;
    --snapodds__color-background--shade: #4b4b4b;
    --snapodds__color-text: #fff
  }
}

MissingAccessTokenProviderError

If the implementation of the accessTokenProvider method is missing this JavaScript error is thrown and shows up in the browsers developer console. No visual feedback is provided to the user as this is a typical implementation mistake. Please check the reference implementation available at #fetch-accesstoken-example.

InvalidAccessTokenError

In this case, please make sure that the the response from the accessTokenProvider returns a valid accessToken JSON object that contains the following properties:

{ 
  access_token: string,
  token_type: string, 
  refresh_token: string, 
  expires_in: number, 
  scope: string 
}

As the accessToken is retrieved after the SnapOdds WebComponent has been rendered, the user will be shown an Integration Error screen and the error shows up in the browsers developer console.

FetchAccessTokenError

If the promise returned by the accessTokenProvider method is rejected or can't be performed due to network problems then this error is thrown.

Make sure that your endpoint which provides the accessToken is reachable and check for any network errors in your browsers network tab.

As the accessToken is retrieved after the SnapOdds WebComponent has been rendered, the user will be shown an Integration Error screen and the error shows up in the browsers developer console.

The SnapOdds SDK requires a valid access token to be provided in order to communicate with the Snapscreen API, which uses the OAuth 2.0 authentication mechanism.

Our customers are provided with a Client ID and Secret which must be used to retrieve the access token from the API endpoint described below:

Grants an access token to an anonymous user.

POST https://api.us.snapscreen.com/oauth/token

Request Body

{
  access_token: string,
  token_type: string,
  refresh_token: string,
  expires_in: number (long),
  scope: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

{
  error: string,
  error_description: string
}

Below is an example of the HTTP request using curl to receive an access token:

curl -d "client_id=YourClientId&client_secret=YourClientSecret&grant_type=anonymous"  https://api.us.snapscreen.com/oauth/token

Having the access token retrieval system implemented on the client side is unsafe and strongly discouraged, as credentials are available in plain text and could easily be stolen. Therefore SnapOdds recommends implementation of this logic on the server side.

For the implementation to function, a REST API endpoint must be provided from which the client can request the access token. On the server side, the access token will be fetched from the Snapscreen API, stored in the current HTTP session, and then returned to the browser.

To further improve security, we also recommend using the CSRF token technique to protect this resource. If you have other security protection mechanisms available in your Web Application, then we highly recommend using them as well.

Fetch AccessToken Example

Let us assume a REST API endpoint has been created using the path '/token'. The next required step is to direct this endpoint to the SnapOdds SDK in the form of an access token provider, which is function that when executed will return a Promise of the whole access token returned from the Snapscreen API.

Enclosed below is a snippet of a basic implementation of the access token provider.

function fetchAccessTokenFromApi() {
  return fetch('/token', { mode: 'cors', cache: 'no-cache' })
    .then((response) => response.json());
}

If game odds are required, SnapOdds Sports Media is called upon to obtain odds information. The info obtained by SnapOdds Operator (as described in Snapping Live Games) is used to correlate the game odds information with the captured live game.

Description

Integration

First, ensure both the JavaScript and CSS resource are correctly loaded and that the access token manager is correctly implemented.

To render the SnapOdds SDK component, a DOM element must be provided, to which the component will be attached as a child. In most cases, the document.body component works best, as the SDK is then added as the last child, which helps with styling as the SDK overlays the full viewport.

Next, it is necessary to configure the SDK and add it as a child to the DOM element of your choice. This can be done by using SnapoddsSdk.snapBuilder().

Show SDK immediately

The following configuration is the simplest one and will show the SDK immediately after appendTo() is called.

SnapoddsSdk.sportsMediaBuilder()
  .setLanguage('en')
  .setAutoSnap(true)
  .setVibrate(true)
  .setUsState('NV')
  .setAccessTokenProvider(fetchAccessTokenFromApi)
  .onClose(() => console.log('SDK:onClose'))
  .appendTo(document.body);

Show SDK only if sportEvents are live

The SDK can provide you with the information if there is at least one sportsEvent live, based on your channel's configuration.

Instead of appending the SDK to the document.body, you need to configure the onLiveEventsStatusChangedCallback() first. Therefore, you have to call build() instead of appendTo() at the end of the SDK's initialisation in order for it to work.

The callback you provide will be executed after initialisation and will return either true or false, indicating that there is at least one live sportsEvent available or not.

After that, it will automatically check every 5 minutes for upcoming sportEvents. If one is found the callback will be invoked as soon as the sportsEvent starts..

// Step1: Setup the SDK and set the onLiveEventsStatusChangedCallback()
const sdk = SnapoddsSdk.sportsMediaBuilder()
  .setLanguage('en')
  .setAutoSnap(true)
  .setVibrate(true)
  .setUsState('NV')
  .setAccessTokenProvider(fetchAccessTokenFromApi)
  .onClose(() => console.log('SDK:onClose'))
  .onLiveEventsStatusChangedCallback(() => /* Toggle visibility of the UX element */)
  .build();
  
// Step2: Only when the customer interacts (e.g. clicks) on the UX element append it.
sdk.appendTo(document.body);

Geo Location

As sports books can have different landing pages per US state, SnapOdds offers the possibility to automatically filter the presented Odds based on the customers IP address.

This feature can be enabled via the customer level settings. If you wish to enable it, please contact support@snapodds.com.

Furthermore, the US state can also manually be set, when configuring the SDK. When set it will overrule the automatically detected geolocation.

For further instructions, please lookup the setUsState method in the #sdk-configuration-options sections.

SDK Configuration Options

The following parameters are used in the SnapoddsSdk.sportsMediaBuilder():