Snapping Games and Presenting Odds

Obtaining sporting event odds and presenting them to the application.

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 [email protected].

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

Method	Parameter	Default Value	Description
setLanguage	string	en	Set the language of the SDK.
setAutoSnap	boolean	false	Turns on the auto snap functionality.
setVibrate	boolean	false	Uses the phones vibrate functionality, when the snap was successful.
setUsState	string	none	A two digit ISO code to identify an US State. Will be used to filter the Odds.
setAccessTokenProvider	function	function that throws an error if not set	A function that takes no parameters and returns the Promise of the access token See access token implementation for more information.
onLiveEventsStatusChangedCallback	function(isLive): void	none	Callback function executed after initialisation and when an upcoming sportsEvent becomes live
onClose	function(): void	no operation	Callback function to handle SDK close events.
appendTo	DOM Element	none	This call will finish the web component configuration and appends it to the given DOM element as child node.
build	none	none	Returns an intermeediate instance of the SdkBuilder. Needs to be used in combination with appendTo() later on