# Virtual Fast Football

## UI - Visualization component

The Virtual Fast Football visualization component is delivered as an `iframe` with a responsive interface between 320px and 1280 `px`.

Below URL provides an example as shown on [Sportradar’s Virtual Sports Demonstrator](https://virtualsports.sportradar.com/product/vff):

```
https://{domain}/uof-entry-point/stable/dist/index.html?sport=vff&product={product}&clientid={clientid}&lang={lang}&environment={environment}
```

 Below you will find a list of valid URL parameters:

<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>product</code></td><td valign="top">required</td><td valign="top">Specifies the product which needs to be set to vff1, vff2 or vff3 for Virtual Fast Football.</td></tr><tr><td valign="top"><code>environment</code></td><td valign="top">required</td><td valign="top">Specifies either <code>staging</code> or <code>production</code> environments.</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>

## Virtual Fast Football Market Visualization

There are plenty of different Virtual Fast Football betting markets. This offers customers a huge variety of betting opportunities but also requires some categorization to guide users and improve the overall experience.&#x20;

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

Cross-origin communication between the product’s `iframe` and the parent `iframe` is done via the `JavaScript` method `window.postMessage()`.

The Virtual World Match Football `iframe` fires events via `postMessage` as described in the following sub-sections.&#x20;

### `set-events`

This `set-events` event is triggered when the product is loaded and when when the event changes. The corresponding return value is described in the following example:

```json
// set-events event data
{
    sport: "vwmf",
    unique_tournament_id: 38973,
    unified_event_ids: [
        "vf:match:134497116"
    ]
}
```

### `rgs-height-change`

The `rgs-height-change` event is triggered whenever the size of the `iframe` changes. The corresponding return value is described in the following example:

```json
// rgs-height-change event data
{
    height: 512
}
```

### Example implementation

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.

```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 must be parsed as JSON because the Virtual Sports application sends only strings as payload
    const { type, data } = JSON.parse(message.data)
 
    handleMessage(type, 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(type, data) {
    switch (type) {
        case 'set-events':
            /* Do 'set-events' stuff here */
            break
        case ' rgs-height-change':
            /* Do ' rgs-height-change' stuff here */
            break
        default:
            /* handle unknown message types here and exit function*/
            return
    }
 
    /* Do general stuff here if access to the data is needed */
}
```


---

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