# Virtual Basketball League

## UI - Visualization Component <a href="#toc426037022" id="toc426037022"></a>

The UI component (Entertainment Area) is delivered as an `iframe` with a fixed width of 762 pixels.&#x20;

The height depends on the view being used. The Skill View is used by default and has a size of 762 x 662 pixels. The Compact View has a size of 762 x 797 pixels.

Switch between Skill and Compact View can be done by pressing the dedicated button in the top left corner of the UI.

Below you will find en example of an typical integration URL for the Entertainment Area:

<pre><code><strong>https://{domain}/vbl/vbl/index?clientid={clientid}&#x26;lang={lang}&#x26;style={style}&#x26;oddType={oddType}
</strong></code></pre>

<table><thead><tr><th valign="top">Parameter</th><th valign="top">Required</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>clientid</code></td><td valign="top">required</td><td valign="top">Identifies you as a bookmaker in our system. The id will be provided to you by your technical account manager.</td></tr><tr><td valign="top"><code>lang</code></td><td valign="top">optional</td><td valign="top"><p>Specifies the display language in the visualization component(ISO 639-1 specification).</p><p>Most European language are already available and other can be added on demand</p></td></tr><tr><td valign="top"><code>style</code></td><td valign="top">optional</td><td valign="top">If needed, your technical account manager will provide you with a style parameter. If not provided, the default style will be applied and there is no further action needed from your side.</td></tr><tr><td valign="top"><code>oddType</code></td><td valign="top">optional</td><td valign="top">Specifies the odds display format. The parameter does not have impact on how odds are calculated and only triggers a simple conversion from decimal odds to the specified odds format. If this is not specified, the default odds format will be decimal.</td></tr></tbody></table>

For further examples, please refer to the [Sportradar iGaming Demonstrator](https://virtualsports.sportradar.com/product/vfel2).

Multi language support is available by optional `language` parameter in URL. Most common languages are already supported, others on demand.

### Skill View

<figure><img src="/files/Yubzs6zLy7bD8Pi2iE25" alt=""><figcaption></figcaption></figure>

### Compact View

<figure><img src="/files/s9i89yWn0GEXETevbYmF" alt=""><figcaption></figcaption></figure>

## Cross-origin communication between UI and parent `iframe`

We need to enable communication between the UI and the market offer (e.g. switch the odds section to selected match day by mouse click at a match day button within the match day selector component).

We also need to consider, most customers may access Sportradar's Virtual Sports via more than one domain name (and of course these domain names may change or new domains need to be added).

Communication between UI and market offer is done via `postMessages`. The following shows an example for how to listen to the `postMessages`:

```javascript
/* register a listener to the message event and use the subscribe function as the callback */
window.addEventListener("message", subscribe, false);

/**
 * A callback function used by the message event. It takes the event, parse the data and call the message handler (handleMessage)
 * @param {event} message The event object given by the message event
 */
function subscribe(message) {
    //the data has to be parsed as JSON because the Virtual Sports application sends only strings as payload
    let data = message.data;
    try {
        data = JSON.parse(message.data)
    } catch (e) { }

    handleMessage(data)
}

/**
 * Function to handle a message object by the Virtual Sports application
 * @param {string} type The message type contains the name of the message
 * @param {object} data The message data contains all data related to the message
 */
function handleMessage(data) {
    switch (data.type) {
        case "setMatches":
            // Do setMatches stuff here
            break;
        case "placeBets":
            // Do placeBets stuff here
            break;
        case "setHeight":
            // Do setHeight stuff here
            break;

        /* Do general stuff here if access to the data is needed */
    }
}
```

This example implementation can be used to listen to the events of the `iframe` and execute functions based on the received event type and event data.

The different post messages will be described in the following sub-sections.&#x20;

There might be other messages as well sent via the `postMessage` interface of the browser which can be ignored for our applications.&#x20;

### **Add bets from `iframe` to bet slip**

In Virtual Basketball bets can conveniently be placed via the `iframe` and bets will be added to your bet slip accordingly.&#x20;

We offer a combination betting markets: X fold-favourite and X fold-outsider. X fold-favourite market offers the possibility of combining either 2, 3, 4, 6 or 8 teams most likely to win. The X fold-outsider market offers the possibility of combining 2, 3 or 4 teams most likely to lose.

<figure><img src="/files/bPin7KmXMTnQ5zgqNNW0" alt=""><figcaption></figcaption></figure>

The `postMessage` `placeBets` will be send to the parent frame and will give it an array as data. Every array element contains the following object with object attributes:&#x20;

```javascript
{
    // Equivalent to the XML format specification Odds.id
    oddsId: [INT] 0,
    // Equivalent to the XML format specification OddsField.type       
    oddsFieldType: [STRING] '',
    // odds type given as string
    type: [STRING] '',
    // contains the odds, but for validation purposes only      
    validateValue: [FLOAT] 0.00,
    //contains the Match ID
    matchId: [INT] 0,
    // identifier for the products
    identify: 'vbl'
}
```

If you get an array with only one element, you get a single bet. More than one element is a multi bet. See the following examples for further details:

#### Single bet&#x20;

```javascript
{
    "type": "placeBets",
    "data": [
        0: {
            oddsId: 706759,
            oddsFieldType: '2',
            type: "match"
            validateValue: 1.7,
            matchId: 266779,
            identify: 'vbl'
        }
    ]
}
```

#### Multi bet

```javascript
{
    "type": "placeBets",
    "data": [
        0: {
            oddsId: 706759,
            oddsFieldType: '1',
            type: "match"
            validateValue: 2.0,
            matchId: 266779,
            identify: 'vbl'


        },
        1: { // for combo more than one
            oddsId: 706761,
            oddsFieldType: '2',
            type: "match"
            v alidateValue: 1.75,
            matchId: 266779,
            identify: 'vbl'

        },
        n: {
            ...    
        }
    ]
}
```

### Match day switch

With every bet stop or when a user clicks the match day selector within the UI to go to the next available or past matches, the following `postMessage` will be sent.&#x20;

#### `setMatchday`

```json
{
    "type": "setMatchday",
    "data" :{
        "season_no":10384,
        "season_name": "VBL Season 447",
        "match_day":15,
        "event_start":1502815680000,
        "screen_name":"web"
    }
}
```

### Preset match day

The mouse click on a match day of the match day selector component can be simulated by calling sending the `setSelectedMatchday` `postMessage`.

#### `setSelectedMatchday`

```javascript
document.querySelector("iframe").contentWindow.postMessage({
    type: "setSelectedMatchday",
    data: { 
        matchday: 12 
    }
}, "*")
```

### Height changes of the `iframe`&#x20;

Each time the height of the UI changes, either caused by the switch between the 2 available views (compact and skill view) or due to changes of the width, the current height of the `body` in pixel is sent to the parent frame via `postMessage`.

#### `setHeight`

```json
{ 
    "type": "setHeight", 
    "data": {
        height: 898
    }
};
```

## Get team image

Sportradar provides team flags as a PNG image for usage in your market offer.

```
https://{domain}/{product}/getLogo.png?clientid={clientId}&lang=en&teamid={teamId}
```

* `domain` – this describes the environment and will be provided during integration.
* `product` – this depicts the virtual sport being integrated and which platform the integration is taking place. e.g. `vfnc`, `vfncstaging`, `vflm`, `vflmstaging`.
* `clientid` – your client id. &#x20;
* `teamid` – the `sr:competitor`.&#x20;

## Statistics Center integration

As one important component, Sportradar's Statistics Center (also available for real sport) is fully integrated in Virtual Basketball:&#x20;

<figure><img src="/files/I8eHlvn8oR2Tl1PlMvgJ" alt=""><figcaption></figcaption></figure>

The Statistics Center can be accessed ‘out of the box’ directly by clicking the icon on the right to the match day picker:

<figure><img src="/files/IFMQFb7HpJ9iVQaSOSEh" alt=""><figcaption></figcaption></figure>

It’s also recommended to add a statistics icon and link to your market offer (to be done on customer side) and refer to the head 2 head statistics for on match level:

<figure><img src="/files/9jEXcAHCqC1YA12b07c3" alt=""><figcaption></figcaption></figure>

The head to head statistics can be opened in a separate popup window by sending the following `postMessage`:&#x20;

```javascript
document.querySelector("iframe").contentWindow.postMessage({
    type: "openStats", 
    data: { 
        competitor1: 240001, 
        competitor2: 240002 
    }
}, "*") 
```


---

# 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.sportradar.com/games/virtual-sports/virtual-sports-via-unified-odds-feed-uof/frontend-integration/desktop-integration/virtual-basketball-league.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.