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:

Direct integration of XCFramework

Snapscreen is provided as an iOS xcframework and bundles everything necessary for it to operate.

1. Drag the Snapscreenframework.xcframework to your iOS project

2. Make sure Xcode has added the framework to your project's Framework, Libraries and Embedded Content section in your General Settings

3. 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.

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:

Snapscreen.setup(
    withClientId: "your-client-id", 
    clientSecret: "your-client-secret", 
    environment: .production
)

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:

Snapscreen.instance?.country = "US"
Snapscreen.instance?.usState = "NJ"

Accessing SDK instance

Once Snapscreen is initialized, it can be retrieved by calling:

Snapscreen.instance

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:

Snapscreen.setup(
    withClientId: "your-client-id", 
    clientSecret: "your-client-secret", 
    environment: .production
)

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:

Snapscreen.instance?.country = "US"
Snapscreen.instance?.usState = "NJ"

Accessing SDK instance

Once Snapscreen is initialized, it can be retrieved by calling:

Snapscreen.instance

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:

Direct integration of XCFramework

Snapscreen is provided as an iOS xcframework and bundles everything necessary for it to operate.

1. Drag the Snapscreenframework.xcframework to your iOS project

2. Make sure Xcode has added the framework to your project's Framework, Libraries and Embedded Content section in your General Settings

3. 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.

Our iOS SDK is published on https://github.com/snapodds/sdk-ios 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.

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.

Github Packages

Create a Personal Access Token on Github

Inside your GitHub Account:

1. Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token

2. Make sure to select the scope read:packages and Generate a token

3. 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:

gpr.user=GITHUB_USERID
gpr.key=PERSONAL_ACCESS_TOKEN

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:

def githubProperties = new Properties() githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
repositories {
    maven {
        name = "GitHubPackages"
        url = uri("https://maven.pkg.github.com/snapodds/sdk-android")
        
        credentials {        
            /** Create github.properties in root project folder file with     
            ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN 
            ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
            username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
            password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
        }

        metadataSources {
            mavenPom()
            google()
            mavenCentral()
            artifact()
        }
    }
}

Add Dependency to Snapscreen SDK in Application Module's build.gradle

dependencies {
    //consume library
    implementation 'com.snapscreen.mobile:sdk-android:latest-release'
}

Github Packages

Create a Personal Access Token on Github

Inside your GitHub Account:

1. Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token

2. Make sure to select the scope read:packages and Generate a token

3. 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:

gpr.user=GITHUB_USERID
gpr.key=PERSONAL_ACCESS_TOKEN

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:

def githubProperties = new Properties() githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
repositories {
    maven {
        name = "GitHubPackages"
        url = uri("https://maven.pkg.github.com/snapodds/sdk-android")
        
        credentials {        
            /** Create github.properties in root project folder file with     
            ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN 
            ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
            username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
            password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
        }

        metadataSources {
            mavenPom()
            google()
            mavenCentral()
            artifact()
        }
    }
}

Add Dependency to Snapscreen SDK in Application Module's build.gradle

dependencies {
    //consume library
    implementation 'com.snapscreen.mobile:sdk-android:latest-release'
}

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.

Our Android SDK is published on https://github.com/snapodds/sdk-android 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)

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.

Snapscreen.instance?.country = "US"
Snapscreen.instance?.usState = "NJ"

Accessing SDK Instance

Once Snapscreen has been initialized, it can be retrieved by calling:

Snapscreen.instance

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.

Snapscreen.instance?.country = "US"
Snapscreen.instance?.usState = "NJ"

Accessing SDK Instance

Once Snapscreen has been initialized, it can be retrieved by calling:

Snapscreen.instance

Customizing Colors

To customize colors in SnapFragment use the UIColorConfiguration object on the Snapscreen instance.

Snapscreen.instance?.colorConfiguration.background = R.color.myBackground

Customizing Fonts

To customize fonts in SnapFragment, use the UIFontConfiguration object on the Snapscreen instance.

Snapscreen.instance?.fontConfiguration.baseTypeface = Typeface.DEFAULT

Customizing Snap UI

To customize displayed messages in the SnapFragment use the SnapUIConfiguration object on the Snapscreen instance.

Snapscreen.instance?.snapUIConfiguration.snapHintText = "My custom Hint"

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.

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

1. Ensure the SDK is initialized according to instructions listed in the Android Initialization section.

2. Ensure your class conforms to SnapFragmentResultListener or SnapActivityResultListener

3. Instantiate SnapFragment or SnapActivity with your desired SnapConfiguration and your SnapFragmentResultListener or SnapActivityResultListener

4. Handle the result in your listener implementation.

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 SnapFragment via 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.

SnapFragment.newInstance(SnapConfiguration(), this)

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:

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
}

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:

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)
}

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.

val intent = SnapActivity.intentForSportsOperator(this, SnapConfiguration(), this)
startActivity(intent)

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:

override fun snapActivityDidSnapSportEvent(
    activity: SnapActivity,
    fragment: SnapFragment,
    sportEvent: SportEventSnapResultEntry) {
    
}

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.

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.

Implementation

1. Verify the SDK is initialized.

2. Retrieve an instance of SnapViewController with your desired (or the default) SnapConfiguration

3. 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.

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.

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

• provide a more “intuitive” experience compared to text search/paging

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.

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!

Want to jump right in?

Choose the documentation that best fits your needs:

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

1. Verify the SDK is initialized.

2. Ensure your class conforms to SnapscreenSnapDelegate

3. Retrieve an instance of SnapViewController with your desired (or the default) SnapConfiguration and your SnapscreenSnapDelegate

4. Present the SnapViewController (the recommended presentation is modally in a UINavigationController)

5. Handle result in your delegate implementation

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.

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

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

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.

Initialization

In order to initialize Snapscreen, call the following method when your React Native application starts up:

SnapscreenSDKModule.setupWithClientId("your-client-id", "your-client-secret");

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:

SnapscreenSDKModule.setCountry("US")
SnapscreenSDKModule.setUsState("NJ")

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:

dependencies: [
    .package(url: "https://github.com/snapodds/sdk-ios.git", .upToNextMajor(from: "2.0.0"))
]

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 sample project here on Github 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:

#import <React/RCTBridgeModule.h>

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

In order to initialize Snapscreen, call the following method when your React Native application starts up:

SnapscreenSDKModule.setupWithClientId("your-client-id", "your-client-secret");

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:

SnapscreenSDKModule.setCountry("US")
SnapscreenSDKModule.setUsState("NJ")

Customizing Colors

To customize colors in SnapViewController and OddsResultsViewController, use the SnapscreenUIColorConfiguration object on the Snapscreen instance.

Snapscreen.instance?.colorConfiguration.background = UIColor.white

Customizing Fonts

To customize fonts in SnapViewController and OddsResultsViewController, use the SnapscreenUIFontConfiguration object on the Snapscreen instance.

Snapscreen.instance?.fontConfiguration.base = UIFont.systemFont(ofSize: 14, weight: ..regular)

Customizing Snap UI

To customize displayed messages in the SnapViewController use the SnapscreenSnapUIConfiguration object on the Snapscreen instance.

Snapscreen.instance?.snapUIConfiguration.snapHintText = "My custom Hint"

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.

Snapscreen.instance?.oddsUIConfiguration.title = "Game Odds"

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.

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.

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.

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

1. Ensure the SDK is initialized according to instructions listed in the section.

2. Retrieve an Intent for displaying the SnapActivity with your desired (or the default) SnapConfiguration

3. 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.

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

• Android 6.0 or newer (API Level 23)

To integrate SnapOdds SDK into your Android project, open your Android project in Android Studio. (See for details)

Github Packages

Create a Personal Access Token on Github

Inside your GitHub Account:

1. Go to Settings -> Developer Settings -> Personal Access Tokens -> Generate new token

2. Make sure to select the scope read:packages and Generate a token

3. 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

Additionally in your Android project's application subclass (most likely MainApplication.java) add the new Native Module Package in the method getPackages

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.

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.

SnapscreenSDKModule.updateColorConfiguration({
  "textPrimary": "#000000",
  "textAccent": "#000000",
  "backgroundWhite": "#FFFFFF",
      
  "background-light": "#E5E5E5",
  "background-dark": "#4B4B4B",

  "backgroundMuted": "#F2f2F2",
  "border": "#E5E5E5",
  "backgroundAccent": "#2DD4BF",
  "backgroundAccentShade": "#D5F6F2",
  "error": "#EA436E",
  "errorShade": "#FBD9E2"
});

Customizing Snap UI

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:

SnapscreenSDKModule.updateSnapUIConfiguration({ 
  "snapHintText": "My Custom Snap Hint", 
  "snapProgressText": "Custom Progress",
  "snapErrorGeneralText": "Custom Error",
  "snapErrorConnectionIssueText": "Custom Connection Error",
  "snapErrorNoResultsText": "Custom No Results",
  "hidePoweredBySnapOddsBranding": true
});

All desired customizations must be done prior to presenting the Snap UI.

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.

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.

Implementation

1. Verify the SDK is initialized by calling the setupWithClientId method.

2. 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.

SnapscreenSDKModule.presentSportMediaFlowWithConfiguration({ 
  "automaticSnap": false,
  "autosnapTimeoutDuration": 30,
  "autosnapIntervalInSeconds": 0.5,
 
  "navigationBackground": "#FFFFFF",
  "navigationForeground": "#2DD4BF",
  
  "or",
  
  "navigationBackground-light": "#FFFFFF",
  "navigationBackground-dark": "#2DD4BF",
  "navigationForeground-light": "#2DD4BF",
  "navigationForeground-dark": "#000000"
});

After a successful snap (and call of the callback) the Odds Display UI is automatically presented.

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)

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "The camera is used to snap your TV."
      }
    }
  }
}

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
  }
}

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.

SnapscreenSDKModule.updateColorConfiguration({
  "textPrimary": "#000000",
  "textAccent": "#000000",
  "backgroundWhite": "#FFFFFF",
      
  "background-light": "#E5E5E5",
  "background-dark": "#4B4B4B",

  "backgroundMuted": "#F2f2F2",
  "border": "#E5E5E5",
  "backgroundAccent": "#2DD4BF",
  "backgroundAccentShade": "#D5F6F2",
  "error": "#EA436E",
  "errorShade": "#FBD9E2"
});

Customizing Snap UI

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:

SnapscreenSDKModule.updateSnapUIConfiguration({ 
  "snapHintText": "My Custom Snap Hint", 
  "snapProgressText": "Custom Progress",
  "snapErrorGeneralText": "Custom Error",
  "snapErrorConnectionIssueText": "Custom Connection Error",
  "snapErrorNoResultsText": "Custom No Results",
  "hidePoweredBySnapOddsBranding": true
});

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:

SnapscreenSDKModule.updateOddsUIConfiguration({ 
  "dismissButtonText": "Dismiss",
  "title": "Custom Odds Title", 
  "loadingText": "Custom Loading",
  "errorText": "Custom Error",
  "tryAgainText": "Custom Try Again",
  "moneyTitle": "M",
  "spreadTitle": "S",
  "totalTitle": "T",
  "bestOddsTitle": "BEST",
  "hidePoweredBySnapOddsBranding": true 
});j

All desired customizations must be done prior to present the Snap and Odds Display UI.

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

1. Verify the SDK is initialized by calling the setupWithClientId method.

2. Present the SnapOdds Operator UI by using presentOperatorFlowWithConfiguration method.

3. Handle result in the methods' callback

Live Game Capture Code Example

The following code presents the Snap UI and shows the full configuration options.

SnapscreenSDKModule.presentOperatorFlowWithConfiguration({ 
  "automaticSnap": false,
  "autosnapTimeoutDuration": 30,
  "autosnapIntervalInSeconds": 0.5,
 
  "navigationBackground": "#FFFFFF",
  "navigationForeground": "#2DD4BF",
  
  "or",
  
  "navigationBackground-light": "#FFFFFF",
  "navigationBackground-dark": "#2DD4BF",
  "navigationForeground-light": "#2DD4BF",
  "navigationForeground-dark": "#000000"
}, (snapResult) => {
  console.log(`Snapped sport event ID ${snapResult.externalId}`);
});

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.

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)

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "The camera is used to snap your TV."
      }
    }
  }
}

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.

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)
}

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

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());
}

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());
}

The button can be integrated using one of the following three layouts.

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"

Examples

• Place on homepage

• Place as cards into your feed

Benefits

• Explain the innovation

• Attract users with image

Banner Design

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

Customizing Colors

To customize colors in SnapViewController, use the SnapscreenUIColorConfiguration object on the Snapscreen instance.

Snapscreen.instance?.colorConfiguration.background = UIColor.white

Customizing Fonts

To customize fonts in SnapViewController, use the SnapscreenUIFontConfiguration object on the Snapscreen instance.

Snapscreen.instance?.fontConfiguration.base = UIFont.systemFont(ofSize: 14, weight: ..regular)

Customizing Snap UI

To customize displayed messages in the SnapViewController use the SnapscreenSnapUIConfiguration object on the Snapscreen instance.

Snapscreen.instance?.snapUIConfiguration.snapHintText = "My custom Hint"

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.