SnapOdds Operator provides you with the Snapping UI for Snapping Sport Events and returns you all required information about the sport event. After a successful snap you are free to use the result as you wish and present subsequent functionality to the user.
Welcome!
Snap the game on live TV, and find the odds in a flash. Your players enjoy a better betting experience, and you upgrade your Sportsbook experience and player acquisition with frictionless betting.
Welcome to SnapOdds
Welcome to SnapOdds! The following documentation will help to get you up and running with SnapOdds Operator or SnapOdds Sports Media. We have done our best to ensure a seamless user experience, with a logical flow and clear instructions.
We know that no documentation is ever perfect, and there are always questions. If you need help, do not hesitate to .
SnapOdds Operator
SnapOdds Operator enhances your betting app or mobile web page with a "Snapping" function.
Sports betting apps and websites that integrate the white-labeled SnapOdds SDK (Software Development Kit) enable users to point their smartphone at any supported live sporting event on TV or streaming and instantly be served all of the betting odds relevant to that game. The SnapOdds SDK can be seamlessly integrated into native iOS and Android apps as well as web apps.
Note: To learn which sporting events are supported, feel free to .
SnapOdds Operator allows you to:
embed SnapOdds (unbranded) into iOS, Android and mobile web apps
discover available bets faster
Improve engagement with live games
SnapOdds Sports Media
SnapOdds Sports Media offers sports media application and website visitors a simple, unobtrusive and improved way to access betting odds, increasing the revenue earned from your app and website visitors.
Sports betting apps and websites that integrate the white-labeled SnapOdds SDK (Software Development Kit) enable users to point their smartphone at any supported live sporting event on TV or streaming and instantly be served all of the betting odds relevant to that game. The SnapOdds SDK can be seamlessly integrated into native iOS and Android apps as well as web apps.
Note: To learn which sporting events are supported, feel free to .
With SnapOdds Sports Media, you can:
embed branded snapping into third party iOS, Android and mobile web apps
open new opportunities for consumer acquisition
offer the smartest ad banner in history
Contact Sales
An improved betting experience and a brighter future starts with a simple conversation!
Whether you are curious how SnapOdds works for you, or if you want to discuss your content growth potential, make sure to
Want to jump right in?
Choose the documentation that best fits your needs:
iOS
Documentation for the iOS SDK, configuration steps, and more.
Our iOS SDK is published on and contains the Snapscreen framework, as well as a sample application to demonstrate the framework integration and usage.
This framework can be integrated into:
iOS 13.0 or later
Check out the following video guide to see how easy it is to integrate the iOS SDK.
provide a more “intuitive” experience compared to text search/paging
Starting with 2.3.0 SnapOdds SDK has full support of Apple Silicon and the simulator. We recommend you use the newest SDK version.
Up until version 2.3.0 SnapscreenFramework only includes simulator architecture for i386_x86 and not for arm64. This means you currently cannot run an app with SnapscreenFramework included on iOS simulators on Apple Silicon Macs. As a workaround, either use your app on a physical device or run Xcode via Rosetta to force the simulator to run with i386_x86.
To further our ongoing efforts to improve our product, we are working on an update to the SDK to include support for arm64 architecture for the iOS simulator.
SnapOdds Operator provides you with the Snapping UI for Snapping Sport Events and returns you all required information about the sport event. After a successful snap you are free to use the result as you wish and present subsequent functionality to the user.
SnapOdds Sport Media
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.
SnapOdds Sport Media
SnapOdds Sports Media provides a complete flow including the Snapping UI for snapping Sport Events and then displaying all available odds for the recognized sport event.
SnapOdds Operator
SnapOdds Operator provides you with the Snapping UI for Snapping Sport Events and returns you all required information about the sport event. After a successful snap you are free to use the result as you wish and present subsequent functionality to the user.
Initialization
Initialization
In order to initialize Snapscreen, call the following method when your React Native application starts up:
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
Snapping Games and Presenting Odds
Implementation
Ensure the SDK is initialized according to instructions listed in the section.
Android
Documentation for the Android SDK, configuration steps, and more.
Our Android SDK is published on and contains the Github packages for the SDK itself and required dependencies.
This framework can be integrated in:
Android 6.0 or newer (API Level 23)
Installation
Installing the iOS SDK.
Swift Package Manager
The easiest (and recommended) way to use Snapscreen is to integrate via SwiftPM. To integrate via SwiftPM, add the location of the github repository and the version to your Package.swift file, as shown below:
Permissions
Permissions required by the Android SDK.
Snapscreen uses various Android permissions to function correctly. Each of the permissions listed below are necessary, (and automatically defined by the Snapscreen SDK):
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.
The Betradar ID is provided in each SDK response, in order to match the response from the SDK with your data.
Snapscreen is provided as an iOS xcframework and bundles everything necessary for it to operate.
Drag the Snapscreenframework.xcframework to your iOS project
Make sure Xcode has added the framework to your project's Framework, Libraries and Embedded Content section in your General Settings
Make sure to change the Embed setting to Embed & Sign.
Camera Permission
The snapping functionality relies on permission to access the camera of your iOS device to function. Access to the camera requires developers to provide a description of the camera's usage in the application. To add this camera usage description, add the key NSCameraUsageDescription into your application's Info.plist, and describe how the camera is used for the snapping functionality.
android.permission.INTERNET
Used for accessing the backend services of Snapscreen
android.permission.CAMERA
Used for offering snapping functionality and access to the camera
android.permission.VIBRATE
Used for device feedback during snapping functionality
Installation
Installing the iOS SDK.
Swift Package Manager
The easiest (and recommended) way to use Snapscreen is to integrate via SwiftPM. To integrate via SwiftPM, add the location of the github repository and the version to your Package.swift file, as shown below:
Snapscreen is provided as an iOS xcframework and bundles everything necessary for it to operate.
Drag the Snapscreenframework.xcframework to your iOS project
Make sure Xcode has added the framework to your project's Framework, Libraries and Embedded Content section in your General Settings
Make sure to change the Embed setting to Embed & Sign.
Camera Permission
The snapping functionality relies on permission to access the camera of your iOS device to function. Access to the camera requires developers to provide a description of the camera's usage in the application. To add this camera usage description, add the key NSCameraUsageDescription into your application's Info.plist, and describe how the camera is used for the snapping functionality.
Customization
If you want to customize the colors of the UI you can simply override the CSS Variables in snapodds-sdk.css.
Retrieve an Intent for displaying the SnapActivity with your desired (or the default) SnapConfiguration
Start the intent for the SnapActivity
Live Game Capture Code And Odds Display Code Example
The following code illustrates a SnapActivity with the default configuration.
If you do not want or need to customize the snapping configuration, you can also omit the configuration parameter.
Once a sporting event is successfully snapped, the OddsResultsFragment is automatically presented in the SnapActivity and the odds for the snapped game are presented.
If the sporting event is not successfully snapped, the values above are not returned, and an error message will appear in the viewfinder:
"Your snap returned no results. Make sure your TV is visible in the viewfinder"
Camera Permissions Required before Presenting Snap
Applications must request user permission for camera access, and camera access is required for the app to function. For this reason, your application should be set to ask permission from the user to access the camera, and to receive said permission, before presenting the Snap UI. The following code will set your application to request and receive permission prior to opening Snap UI:
Recommendations
Present Snap as a separate Activity
It is recommended that you present the SnapFragment as a separate Activity.
Limit to portrait
Currently the Snap UI is only optimized for portrait orientation. It is recommended to present and limit the Activity containing a SnapFragment be limited to portrait orientation.
val intent = SnapActivity.intentForSportsMedia(this, SnapConfiguration();
startActivity(intent)
val isGranted = ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED
if (isGranted) {
startActivity(Intent(context, MySnapActivity::class.java))
} else {
requestPermissions(arrayOf(Manifest.permission.CAMERA), PERMISSION_REQUEST_CAMERA)
}
Initialization
Steps to initialize Snapscreen functionality.
Initialization
In order to initialize Snapscreen, the following class method must be called in your custom Application class in onCreate()
class MyApplication: Application() {
override fun onCreate() {
super.onCreate()
Snapscreen.setup(
this,
"your-client-id",
"your-client-secret",
Environment.PRODUCTION
)
}
}
Additional Information
For best results, locational information must be provided for the user on initialization. Within the SDK, set the users country and US state information using the parameters country and usState. For US customers, country and state information must be provided. For non-US customers, at least country should be provided.
Accessing SDK Instance
Once Snapscreen has been initialized, it can be retrieved by calling:
Installation
Installing the Android SDK.
Github Packages
Create a Personal Access Token on Github
Inside your GitHub Account:
Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token
Make sure to select the scope read:packages and Generate a token
After the token is generated, be sure to copy your new personal access token. It will not be accessible again. If the key is lost, the only option is to generate a new key.
Configure your Github Personal Access Token
To configure your token, a github.properties file containing your Github User ID and Personal Access Token must be placed in your project's root directory as shown below:
Alternatively, you can set the environment variables GPR_USER and GPR_API_KEY.
Add Github Packages Repository to Application Module's build.gradle
Next, define the Github Packages as a repository in the application module's build.gradle by adding the following section:
Add Dependency to Snapscreen SDK in Application Module's build.gradle
Note: If you have configured the project repositories via settings.gradle and changed the dependencyResolutionManagement to settings such as FAIL_ON_PROJECT_REPOS this may necessitate a change in where the repository is defined.
Customization
Customizing Colors
To customize in the Snap and Odds Display UI use the updateColorConfiguration method provided by our Native Module. The following code snippet shows all available options. Please note that for each color option, you can provide either a single color which is used for both light and dark mode or you can append the suffix -light or -dark to the color name to provide specific colors.
To customize displayed messages in the Snap UI, use the updateSnapUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to presenting the Snap UI.
Customizing Odds Display
To customize displayed messages in the Odds Display UI, use the updateOddsUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to present the Snap and Odds Display UI.
iOS Installation
To integrate the SnapOdds SDK in your project, open your iOS project's xcworkspace file with Xcode.
Add Native SDK with Swift Package Manager
To integrate via SwiftPM, add the location of the github repository and the version to your Package.swift file, as shown below:
This can also be done by adding the repository and version through the Xcode UI by selecting your project and adding the SwiftPM package under Package Dependencies.
Add React Native SDK Module
Add the files SnapscreenSDKModule.swift and SnapscreenSDKModuleBridge.h from our provided to your Xcode project.
Add Objective-C bridging header
If your project does not yet contain an Objective-C bridging header, you also need to add a bridging header to make our SDK integration work.
To do so, create a new Header File and name it <project-name>-Bridging-Header.h.
Add the following line to the bridging header:
Then open your target's Build Settings (by navigating to your project, then clicking on the application Target and selecting Build Settings from the top menu.
Search for the setting names Objective-C Bridging Header and set it to the name of your newly created header file.
If your newly created header file is not placed in the same folder as your xcworkspace file, you might need to adapt the settings' value to include the full relative path.
Initialization
Steps to initialize Snapscreen functionality.
Initialization
In order to initialize Snapscreen, the following class method must be called in your custom Application class in onCreate()
class MyApplication: Application() {
override fun onCreate() {
super.onCreate()
Snapscreen.setup(
this,
"your-client-id",
"your-client-secret",
Environment.PRODUCTION
)
}
}
Additional Information
For best results, locational information must be provided for the user on initialization. Within the SDK, set the users country and US state information using the parameters country and usState. For US customers, country and state information must be provided. For non-US customers, at least country should be provided.
Accessing SDK Instance
Once Snapscreen has been initialized, it can be retrieved by calling:
Customization
Customizing displayed messages, colors and fonts.
Customizing Colors
To customize colors in SnapFragment use the UIColorConfiguration object on the Snapscreen instance.
To customize fonts in SnapFragment, use the UIFontConfiguration object on the Snapscreen instance.
Customizing Snap UI
To customize displayed messages in the SnapFragment use the SnapUIConfiguration object on the Snapscreen instance.
All desired customizations must be done prior to presenting the SnapFragment or SnapActivity. While it is possible to modify the configuration between presentations of the SnapFragment, such modifications while SnapFragment is present are not guaranteed to be respected.
Customization
Customizing Colors
To customize in the Snap UI use the updateColorConfiguration method provided by our Native Module. The following code snippet shows all available options. Please note that for each color option, you can provide either a single color which is used for both light and dark mode or you can append the suffix -light or -dark to the color name to provide specific colors.
To customize displayed messages in the Snap UI use the updateSnapUIConfiguration method provided by our Native Module. The following code snippet shows all available options:
All desired customizations must be done prior to presenting the Snap UI.
Initialization
Steps to initialize SnapscreenFramework functionality.
Import SnapscreenFramework
For any class that requires access to the SnapscreenFramework functionality, add the following line:
import SnapscreenFramework
Initialization
In order to initialize Snapscreen, call the following class method in AppDelegate in application:didFinishLaunchingWithOptions:
Additional information
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
Accessing SDK instance
Once Snapscreen is initialized, it can be retrieved by calling:
Customization
Customizing displayed messages, colors and fonts.
Customizing Colors
To customize colors in SnapFragment or OddsResultsFragment use the UIColorConfiguration object on the Snapscreen instance.
Customizing Fonts
To customize fonts in SnapFragment or OddsResultsFragment, use the UIFontConfiguration object on the Snapscreen instance.
Customizing Snap UI
To customize the displayed messages in SnapFragment, use the UIConfiguration object on the Snapscreen instance.
All desired customizations should be done prior to presenting the SnapFragment. While it is possible to modify the configuration between presentations of the SnapFragment, such modifications while SnapFragment is present are not guaranteed to be respected.
Customizing Odds Display
To customize displayed messages in the OddsResultsFragment, use the OddDisplayUIConfiguration object on the Snapscreen instance.
All desired customizations must be done prior to presenting the SnapActivity and subsequently the OddsResultsFragment. While it is also possible to modify the configuration between presentations of the OddsResultsFragment, modifications initiated while the Fragment is present are not guaranteed to be respected.
Implementation Errors
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 .
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:
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.
Customization
Customizing displayed messages. colors and fonts.
Customizing Colors
To customize colors in SnapViewController and OddsResultsViewController, use the SnapscreenUIColorConfiguration object on the Snapscreen instance.
Customizing Fonts
To customize fonts in SnapViewController and OddsResultsViewController, use the SnapscreenUIFontConfiguration object on the Snapscreen instance.
Customizing Snap UI
To customize displayed messages in the SnapViewController use the SnapscreenSnapUIConfiguration object on the Snapscreen instance.
All desired customizations must be done prior to presenting the SnapViewController. While it is also possible to modify the configuration between presentations of the SnapViewController, modifications initiated while the ViewController is present are not guaranteed to be respected.
Customizing Odds Display
To customize displayed messages in the OddsResultsViewController use the SnapscreenOddsUIConfiguration object on the Snapscreen instance.
All desired customizations must be done prior to present the SnapViewController and subsequently the OddsResultsViewController. While it is also possible to modify the configuration between presentations of the OddsResultsViewController, modifications initiated while the ViewController is present are not guaranteed to be respected.
Initialization
Steps to initialize SnapscreenFramework functionality.
Import SnapscreenFramework
For any class that requires access to the SnapscreenFramework functionality, add the following line:
import SnapscreenFramework
Initialization
In order to initialize Snapscreen, call the following class method in AppDelegate in application:didFinishLaunchingWithOptions:
Additional information
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
Accessing SDK instance
Once Snapscreen is initialized, it can be retrieved by calling:
SnapOdds as Banner
Make SnapOdds available as a clickable banner in your app or webpage.
Examples
Place on homepage
Place as cards into your feed
Benefits
Explain the innovation
Attract users with image
Banner Design
Initialization
Initialization
In order to initialize Snapscreen, call the following method when your React Native application starts up:
To improve performance, SnapOdds requires basic locational information to be provided. Set the users country and US state information within the SDK using the parameters country and usState:
Snapping Games and Presenting Odds
Implementation
Verify the SDK is initialized.
Snapping Games and Presenting Odds
Implementation
Verify the SDK is initialized by calling the setupWithClientId method.
React Native
While we currently do not provide a wrapped NPM package for a React Native integration of our SDK, we provide a very simply step-by-step introduction in your project.
First follow the Steps in iOS Installation and Android Installation to integrate the native SDK packages in the your native projects and then see the examples under the SnapOdds Operator and SnapOdds Sport Media section how to integrate the SnapOdds SDK functionality.
In order to use the SnapOdds SDK in your React Native project you need to target at least the following target versions with your application.
iOS 13.0 or later
Installation
Installing the JavaScript SDK.
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.
Installation
Installing the JavaScript SDK.
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.
Retrieve an instance of SnapViewController with your desired (or the default) SnapConfiguration
Present the SnapViewController (the recommended presentation is modally in a UINavigationController)
Live Game Capture And Odds Display Code Example
The following code illustrates a SnapViewController with the default configuration.
If you do not want or need to customize the snapping configuration, you can also omit the configuration parameter.
Once a sporting event is successfully snapped, the OddsResultsViewController is automatically pushed in the UINavigationController and the odds for the snapped game are presented.
If the sporting event is not successfully snapped, an error message will appear in the viewfinder:
"Your snap returned no results. Make sure your TV is visible in the viewfinder"
Camera Permissions Required before Presenting Snap
Applications must request user permission for camera access, and camera access is required for the app to function. For this reason, your application should be set to ask permission from the user to access the camera, and to receive said permission, before presenting the Snap UI. The following code will set your application to request and receive permission prior to opening Snap UI:
Recommendations
Present Snap in a UINavigationController
SnapOdds recommends presentingSnapViewController in a UINavigationController. Please note that SnapViewController itself does not present any cancellation item within the UI. The developer of the application is responsible for configuring a cancel item on the presented UINavigationController.
Limit to portrait
Currently, Snap UI is optimized only for portrait orientation. We recommend that you limit the supported interface orientations for the presented UINavigationController to portrait only.
Present the SnapOdds Operator UI by using presentSportMediaFlowWithConfiguration method.
Live Game Capture And Odds Display Code Example
The following code presents the Snap UI and automatically the Odds Display UI afterwards and shows the full configuration options.
After a successful snap (and call of the callback) the Odds Display UI is automatically presented.
The navigationBackground and navigationForeground options are ignored on Android and you need to adapt your Android theme accordingly to style the ActionBar.
iOS Camera Permissions Required before Presenting Snap
Although the SnapOdds Sport Media UI flow asks for camera permissions we recommend doing this in your React Native application before you present the Sport Media flow to also allow the user to go to the device's system settings in case the permission were denied previously.
iOS Camera Permission Configuration
In order to be able to ask for the camera permission, your iOS projects needs to define a value for NSCameraUsageDescription in it's Info.plist. Be sure to configure this before using the SnapOdds Sport Media UI either by modifying your Info.plist manually or by adding the appropriate configuration to your React Native application's configuration (e.g. by adding the following code to your app.json in case you use expo)
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.
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.
let status = AVCaptureDevice.authorizationStatus(for: .video)
switch status {
case .authorized:
presentSnap()
case .notDetermined:
AVCaptureDevice.requestAccess(for: .video) { [weak self] (granted) in
DispatchQueue.main.async { [weak self] in
if granted {
self?.presentSnap()
} else {
presentAlertWithLinkToSettings()
}
}
}
case .denied: fallthrough
case .restricted:
presentAlertWithLinkToSettings()
@unknown default:
presentSnap()
}
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 Snapping Games and Presenting Odds
Implementation
Verify the SDK is initialized.
Ensure your class conforms to SnapscreenSnapDelegate
Retrieve an instance of SnapViewController with your desired (or the default) SnapConfiguration and your SnapscreenSnapDelegate
Present the SnapViewController (the recommended presentation is modally in a UINavigationController)
Handle result in your delegate implementation
The sport event that is returned contains the SportRadar Match ID as the property externalId. Several other ID providers like Kambi, Donbest, and more are available on request.
Live Game Capture Code Example
The following code illustrates a SnapViewController with the default configuration.
If you do not want or need to customize the snapping configuration, you can also omit the configuration parameter.
Once a sporting event is successfully snapped, the following method is called in your SnapscreenSnapDelegate:
After a successful snap (and call of the delegate method) the SnapViewController automatically stops snapping. If you do not present any follow-up UI and you want to continue snapping, you can call continueSnapping() on the SnapViewController.
If the sporting event is not successfully snapped, the delegate method is not called, and an error message will appear in the viewfinder:
"Your snap returned no results. Make sure your TV is visible in the viewfinder"
Camera Permissions Required before Presenting Snap
Applications must request user permission for camera access, and camera access is required for the app to function. For this reason, your application should be set to ask permission from the user to access the camera, and to receive said permission, before presenting the Snap UI. The following code will set your application to request and receive permission prior to opening Snap UI:
Recommendations
Present Snap in a UINavigationController
SnapOdds recommends presentingSnapViewController in a UINavigationController. Please note that SnapViewController itself does not present any cancellation item within the UI. The developer of the application is responsible for configuring a cancel item on the presented UINavigationController.
Limit to portrait
Currently, Snap UI is optimized only for portrait orientation. We recommend that you limit the supported interface orientations for the presented UINavigationController to portrait only.
Installation
Installing the Android SDK.
Github Packages
Create a Personal Access Token on Github
Inside your GitHub Account:
Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token
Make sure to select the scope read:packages and Generate a token
After the token is generated, be sure to copy your new personal access token. It will not be accessible again. If the key is lost, the only option is to generate a new key.
Configure your Github Personal Access Token
To configure your token, a github.properties file containing your Github User ID and Personal Access Token must be placed in your project's root directory as shown below:
Alternatively, you can set the environment variables GPR_USER and GPR_API_KEY.
Add Github Packages Repository to Application Module's build.gradle
Next, define the Github Packages as a repository in the application module's build.gradle by adding the following section:
Add Dependency to Snapscreen SDK in Application Module's build.gradle
Note: If you have configured the project repositories via settings.gradle and changed the dependencyResolutionManagement to settings such as FAIL_ON_PROJECT_REPOS this may necessitate a change in where the repository is defined.
JavaScript
Documentation for Javascript and web-components, configuration steps, and more.
The latest version of the SDK is published on https://github.com/snapodds/sdk-js/releases and contains a web-component for rendering the Snapscreen UI and the necessary initialization API.
When integrating the SDK please make sure to follow our for a great customer experience.
Requirement:
A license key is required to use our API. You can obtain a license by contacting us at:
The following license keys can be used for trial purposes only:
Snapping Games
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
Implementation
Snapping Games
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
Implementation
Verify the SDK is initialized by calling the setupWithClientId method.
SnapOdds as Button
Make SnapOdds available with a button in your app or webpage.
The button can be integrated using one of the following three layouts.
Snapscreen uses various Android permissions to function correctly. Each of the permissions listed below are necessary, (and automatically defined by the Snapscreen SDK):
android.permission.INTERNET
Used for accessing the backend services of Snapscreen
android.permission.CAMERA
Used for offering snapping functionality and access to the camera
android.permission.VIBRATE
Used for device feedback during snapping functionality
Ensure the SDK is initialized according to instructions listed in the
section.
Ensure your class conforms to SnapFragmentResultListener or SnapActivityResultListener
Instantiate SnapFragment or SnapActivity with your desired SnapConfiguration and your SnapFragmentResultListener or SnapActivityResultListener
Handle the result in your listener implementation.
The sport event that is returned contains the SportRadar Match ID as the property externalId. Several other ID providers like Kambi, Donbest, and more are available on request.
Live Game Capture Code Example
In order to snap a TV image and search for a sporting event, it is necessary to create and present an instance of SnapFragmentvia the newInstance class method. Snap settings can be customized by configuring the SnapConfiguration passed to the initializer. The SnapFragmentResultListener will receive a callback once a sporting event was successfully snapped.
The following code presents a SnapFragment with the default configuration.
If you do not want or need to customize the snapping configuration, you can also omit the configuration parameter.
Once a sporting event is successfully 'snapped', the following method is called in SnapFragmentResultListener:
After a successfull snap (and call of the listener method) the SnapFragment automatically stops snapping. If you do not present any follow-up UI and you want to continue snapping, you can call continueSnapping() on the SnapFragment.
If the sporting event is not successfully snapped, the values above are not returned, and an error message will appear in the viewfinder:
"Your snap returned no results. Make sure your TV is visible in the viewfinder"
Camera Permissions Required before Presenting Snap
Applications must request user permission for camera access, and camera access is required for the app to function. For this reason, your application should be set to ask permission from the user to access the camera, and to receive said permission, before presenting the Snap UI. The following code will set your application to request and receive permission prior to opening Snap UI:
Alternative Example using SnapActivity
In addition to using the SnapFragment directly, you can also use the SnapActivity provided by the SDK. In that case, use the class method on SnapActivity to retrieve an intent and pass a SnapActivityResultListener. The SnapActivityResultListener will receive a callback once a sporting event was successfully snapped.
The following code presents a SnapActivity with the default configuration.
If you do not want or need to customize the snapping configuration, you can also omit the configuration parameter.
Once a sporting event is successfully snapped, the following method is called in SnapActivityResultsListener:
After a successfull snap (and call of the listener method) the SnapFragment (used for UI presentation in the SnapActivity) automatically stops snapping. If you do not present any follow-up UI and you want to continue snapping, you can call continueSnapping() on the SnapFragment.
If you want to dismiss the activity and continue your own UI, you need to call activity.finish() on the SnapActivity.
Recommendations
Present Snap as a separate Activity
It is recommended that you present the SnapFragment as a separate Activity.
Limit to portrait
Currently the Snap UI is only optimized for portrait orientation. It is recommended to present and limit the Activity containing a SnapFragment be limited to portrait orientation.
Present the SnapOdds Operator UI by using presentOperatorFlowWithConfiguration method.
Handle result in the methods' callback
The sport event that is returned contains the SportRadar Match ID as the property externalId. Several other ID providers like Kambi, Donbest, and more are available on request.
Live Game Capture Code Example
The following code presents the Snap UI and shows the full configuration options.
The returned snapResult object is a Javascript object containing one string value with the key externalId and another string value with the key snapResultEntry which is a stringified JSON of the full response object that is returned by the native SDKs.
After a successful snap (and call of the callback) the SnapOdds Operator UI is automatically dismissed.
The navigationBackground and navigationForeground options are ignored on Android and you need to adapt your Android theme accordingly to style the ActionBar.
iOS Camera Permissions Required before Presenting Snap
Although the SnapOdds Operator UI flow asks for camera permissions we recommend doing this in your React Native application before you present the Operator flow to also allow the user to go to the device's system settings in case the permission were denied previously.
iOS Camera Permission Configuration
In order to be able to ask for the camera permission, your iOS projects needs to define a value for NSCameraUsageDescription in it's Info.plist. Be sure to configure this before using the SnapOdds Operator UI either by modifying your Info.plist manually or by adding the appropriate configuration to your React Native application's configuration (e.g. by adding the following code to your app.json in case you use expo)
func snapscreenSnapViewController(
_ viewController: SnapViewController,
didSnapSportEvent sportEvent: SportEventSnapResultEntry) {
viewController.dismiss(animated: true, completion: nil)
// This is the SportRadar Match ID by default.
// Other ID providers are available on request
let externalProviderId = sportEvent.externalId
}
let status = AVCaptureDevice.authorizationStatus(for: .video)
switch status {
case .authorized:
presentSnap()
case .notDetermined:
AVCaptureDevice.requestAccess(for: .video) { [weak self] (granted) in
DispatchQueue.main.async { [weak self] in
if granted {
self?.presentSnap()
} else {
presentAlertWithLinkToSettings()
}
}
}
case .denied: fallthrough
case .restricted:
presentAlertWithLinkToSettings()
@unknown default:
presentSnap()
}
override fun snapFragmentDidSnapSportEvent(
fragment: SnapFragment,
sportEvent: SportEventSnapResultEntry
) {
// This is the SportRadar Match ID by default.
// Other ID providers are available on request
val externalProviderId = sportEvent.externalId
}
val isGranted = ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED
if (isGranted) {
startActivity(Intent(context, MySnapActivity::class.java))
} else {
requestPermissions(arrayOf(Manifest.permission.CAMERA), PERMISSION_REQUEST_CAMERA)
}
val intent = SnapActivity.intentForSportsOperator(this, SnapConfiguration(), this)
startActivity(intent)
{
"expo": {
"ios": {
"infoPlist": {
"NSCameraUsageDescription": "The camera is used to snap your TV."
}
}
}
}
Examples
Button in App Header
Action in Main Menu
Action in Tab Bar
Floating Button
Benefits
Enable action from anywhere
Provide fast and easy access
Button Design
For Accessibility and SEO
Add aria-label to the button with a descriptive action text e.g. "Snap TV for Odds"
Access Token Handling
Covers the handling of tokens for authentication purposes.
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:
The requested access grant type, should be set to "anonymous".
device_fingerprint
String
Unique device fingerprint.
{access_token:string,token_type:
{error:string,error_description:
{error:string,error_description:
{error:string,error_description:
{error:string,error_description:
Below is an example of the HTTP request using curl to receive an access 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.
Note: The access token provider must return a standard Promise (not any equivalent like AngularJS $q or other custom promise libraries like Kris Kowal's Q). The SDK is built as angular element and relies on zone.js for change detection, so only browser native async methods are recognized.
Access Token Handling
Covers the handling of tokens for authentication purposes.
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.
POSThttps://api.us.snapscreen.com/oauth/token
Request Body
Name
Type
Description
Below is an example of the HTTP request using curl to receive an access 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 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 of the whole access token returned from the Snapscreen API.
Enclosed below is a snippet of a basic implementation of the access token provider.
Note: The access token provider must return a standard (not any equivalent like or other custom promise libraries like ). The SDK is built as angular element and relies on for change detection, so only browser native async methods are recognized.
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.
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..
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 .
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 sections.
SDK Configuration Options
The following parameters are used in the SnapoddsSdk.sportsMediaBuilder():
Method
Parameter
Default Value
Description
Android Installation
To integrate SnapOdds SDK into your Android project, open your Android project in Android Studio. (See for details)
Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token
Make sure to select the scope read:packages and Generate a token
After the token is generated, be sure to copy your new personal access token. It will not be accessible again. If the key is lost, the only option is to generate a new key.
Configure your Github Personal Access Token
To configure your token, a github.properties file containing your Github User ID and Personal Access Token must be placed in your project's root directory as shown below:
Alternatively, you can set the environment variables GPR_USER and GPR_API_KEY.
Add Github Packages Repository to Application Module's build.gradle
Next, define the Github Packages as a repository in the application module's build.gradle by adding the following section:
Add Dependency to Snapscreen SDK in Application Module's build.gradle
Add React Native SDK Module
Add the files SnapscreenSDKModule.java and SnapscreenSDKPackage.java from our provided sample project here on Github to your Android project and be sure to change the package of both files according to your own project.
Additionally in your Android project's application subclass (most likely MainApplication.java) add the new Native Module Package in the method getPackages
Obtaining live sporting event information by 'snapping'
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.
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..
The following parameters are used in the SnapoddsSdk.operatorsBuilder():
// 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);
// 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);
SnapOdds Sports Media provides a complete flow including the Snapping UI for snapping Sport Events and then displaying all available odds for the recognized sport event.
Customization
Customizing displayed messages, colors and fonts.
Customizing Colors
To customize colors in SnapViewController, use the SnapscreenUIColorConfiguration object on the Snapscreen instance.
To customize fonts in SnapViewController, use the SnapscreenUIFontConfiguration object on the Snapscreen instance.
Customizing Snap UI
To customize displayed messages in the SnapViewController use the SnapscreenSnapUIConfiguration object on the Snapscreen instance.
All desired customizations must be done prior to presenting the SnapViewController. While it is also possible to modify the configuration between presentations of the SnapViewController, modifications initiated while the ViewController is present are not guaranteed to be respected.
Snapscreen.instance?.snapUIConfiguration.snapHintText = "My custom Hint"
SnapOdds Sport Media
SnapOdds Sports Media provides a complete flow including the Snapping UI for snapping Sport Events and then displaying all available odds for the recognized sport event.
