# Snapping Games

## 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](/docs/web-sdk/javascript/snapodds-sport-media/snapping-games-and-presenting-odds.md).

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

```javascript
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..

```javascript
// 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

<table><thead><tr><th width="226">Method</th><th width="150">Parameter</th><th>Default Value</th><th>Description</th></tr></thead><tbody><tr><td>setLanguage</td><td>string</td><td>en</td><td>Set the language of the SDK. </td></tr><tr><td>setAutoSnap</td><td>boolean</td><td>false</td><td>Turns on the auto snap functionality.</td></tr><tr><td>setVibrate</td><td>boolean</td><td>false</td><td>Uses the phones vibrate functionality, when the snap was successful.</td></tr><tr><td>setAccessTokenProvider</td><td>function</td><td>function that throws an error if not set</td><td>A function that takes no parameters and returns the Promise of the access token See <a href="/pages/T628BrzdZicjexia9xDb#access-token-management">access token implementation</a> for more information.</td></tr><tr><td>onLiveEventsStatusChangedCallback</td><td>function(<code>isLive</code>): void</td><td>no operation</td><td>Callback function executed after initialisation and when an upcoming sportsEvent becomes live</td></tr><tr><td>onResults</td><td>function(<a href="/pages/FEddZUnAOFv79g9Uu1uR#result-format"><code>tvSearchResult</code></a>): void</td><td>no operation</td><td>Callback function executed when   sports events are detected.</td></tr><tr><td>onClose</td><td>function(): void</td><td>no operation</td><td>Callback function to handle SDK close events. </td></tr><tr><td>appendTo</td><td>DOM Element</td><td>none</td><td>This call will finish the web component configuration and appends it to the given DOM element as child node.</td></tr><tr><td>build</td><td>none</td><td>none</td><td>Returns an intermeediate instance of the SdkBuilder. Needs to be used in combination with <code>appendTo()</code> later on</td></tr><tr><td>setSnapBackHidden</td><td>boolean</td><td>false</td><td>Hide the "back" button in the Snap view</td></tr></tbody></table>

## Result format

`tvSearchResult` has the following format:

```json
{
  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)
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.snapodds.com/docs/web-sdk/javascript/snapodds-operator/snapping-games.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.