# Virtual Football ## Available football modes Sportradar’s Virtual Football is available in different modes and the integration for the following competitions is similar: 1. Bundesliga 2. League Mode 3. Euro Cup 4. Nations Cup 5. World Cup 6. Asian Cup 7. Champions Cup 8. Italian League 9. French League 10. Spanish League 11. German League ## Unique tournaments The various football modes use unique `match_ids` and `tournament_ids`. Nonetheless it is important to map the `tournament_ids` to the corresponding competition, if more than one competition is integrated. For the cup modes, the UI will use the `unique_tournament_id` to identify for which of the tournaments the calls are made. This is necessary in order to display the correct odds for the two tournaments. ### Bundesliga ``` unique_tournament_id: 34616 ``` ### League Mode ``` unique_tournament_id: 14149 ``` ### Euro Cup ``` unique_tournament_id: 2448 ``` Additionally, the different stages in Euro Cup mode are structured within dedicated tournaments which have the following ids:
Tournament IDTournament Name
53961Virtual Football Euro Cup Group A
53962Virtual Football Euro Cup Group B
53963Virtual Football Euro Cup Group C
53964Virtual Football Euro Cup Group D
53965Virtual Football Euro Cup Group E
53966Virtual Football Euro Cup Group F
53967Virtual Football Euro Cup Knock Out
### Nations Cup ``` unique_tournament_id: 13933 ``` Additionally, the different stages in Nations Cup mode are structured within dedicated tournaments which have the following ids:
Tournament IDTournament Name
49665Virtual Football Nations Cup Group A
49666Virtual Football Nations Cup Group B
49667Virtual Football Nations Cup Group C
49668Virtual Football Nations Cup Group D
49669Virtual Football Nations Cup Group E
49670Virtual Football Nations Cup Group F
49671Virtual Football Nations Cup Knock Out
### World Cup ``` unique_tournament_id: 15446 ``` Additionally, the different stages in World Cup mode are structured within dedicated tournaments which have the following ids:
Tournament IDTournament Name
60337Virtual Football World Cup Group A
60338Virtual Football World Cup Group B
60339Virtual Football World Cup Group C
60340Virtual Football World Cup Group D
60341Virtual Football World Cup Group E
60342Virtual Football World Cup Group F
60343Virtual Football World Cup Group G
60344Virtual Football World Cup Group H
60345Virtual Football World Cup Knock Out
### Asian Cup ``` unique_tournament_id: 26654 ``` Additionally, the different stages in Asian Cup mode are structured within dedicated tournaments which have the following ids:
Tournament IDTournament Name
74607Virtual Football Asian Cup Group A
74608Virtual Football Asian Cup Group B
74609Virtual Football Asian Cup Group C
74611Virtual Football Asian Cup Group D
74612Virtual Football Asian Cup Group E
74613Virtual Football Asian Cup Group F
74614Virtual Football Asian Cup Knock Out
### Champions Cup ``` unique_tournament_id: 28199 ``` Additionally, the different stages in Champions Cup mode are structured within dedicated tournaments which have the following ids:
Tournament IDTournament Name
79196Virtual Football Champions Cup Group A
79197Virtual Football Champions Cup Group B
79198Virtual Football Champions Cup Group C
79199Virtual Football Champions Cup Group D
79200Virtual Football Champions Cup Group E
79201Virtual Football Champions Cup Group F
79202Virtual Football Champions Cup Group G
79203Virtual Football Champions Cup Group H
79204Virtual Football Champions Cup Knock Out
## UI - Visualization component The UI component (Entertainment Area) is delivered as an `iframe` with a fixed size of 762 x 571 pixel. It consists of a live score component, the video stream, event time line and call to action.
Below you will find en example of an typical integration URL for the Entertainment Area: 
https://{domain}/{product}/desktop/index?clientid={client_id}&lang={lang}&style={style}&layout=Vflm1&oddType=dec
ParameterRequiredDescription
clientidrequiredIdentifies you as a bookmaker in our system. The id will be provided to you by your technical account manager.
langoptional

Specifies the display language in the visualization component(ISO 639-1 specification).

Most European language are already available and other can be added on demand

styleoptionalIf 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.
oddTypeoptionalSpecifies 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.
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. ## 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 "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. There might be other messages as well sent via the `postMessage` interface of the browser which can be ignored for our applications. ### 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. #### `setEvents` ```json { "type": "setMatches", "data": { "competition_id": 41819, "season_id": 41819, "competition_nr": 1721, "season_nr": 1721, "competition_stage_type": "league", "matchset_nr": 15, "match_day": 15, "match_ids": [ 6797573, 6797574, 6797575, 6797576, 6797577, 6797578, 6797579, 6797580 ], "screen_name": "web-league", "unique_tournament_id": 14149, "event_start": 1502815625000 } } ``` ### Preset match day A mouse click on the match day selector component can be simulated by sending the following message via `postMessage`. This message can be used e.g. to preset the next match day (current match day + 1) after loading the Virtual Football Mode. As a result, the requested match day will be highlighted and the `setMatches` `postMessage` will be sent (refer to section [Match day switch](#match-day-switch)): You can preset the match day by using the match day number or a timestamp. `setSelectedMatchday` only works for league modes while `setSelectedMatchdayByTimestamp` works for all modes. Also keep in mind that if there are multiple `iframes` on a page it needs to be selected via a different method than just by the `iframe` tag as it is done in the given example. #### `setSelectedMatchday` ```javascript document.querySelector(‘iframe’).contentWindow.postMessage({ type: "setSelectedMatchday", data: { matchday: 12, nextSeason: true } }, "*"); ``` #### `setSelectedMatchdayByTimestamp` ```javascript document.querySelector("iframe").contentWindow.postMessage({ type: "setSelectedMatchdayByTimestamp", data: 1460557500 }, "*"); ``` ### Height changes of the `iframe` The height of the `iframe` will be provided through following `postMessage` (height is measured in pixel). #### `setHeight` ```json { "type": "setHeight", "data": { "height": 599, "screen_name": "web-league", "unique_tournament_id": 34616 } } ``` ## Get team image Sportradar provides team flags as a PNG image for usage in your market offer. ``` https://{domain}/{product}/mobile/getTeamImage.png?clientid={clientid:number}&teamid={teamid:number} ``` * `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. * `teamid` – the `sr:competitor`. ## Statistics Center integration As one important component, Sportradar's Statistics Center (also available for real sport) is fully integrated in all Virtual Football products:
The Statistics Center can be accessed ‘out of the box’ directly by clicking the Icon on the right hand side of the Entertainment Area:
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:
The head to head statistics can be opened in a separate popup window by sending the following `postMessage`: ```javascript document.querySelector("iframe").contentWindow.postMessage({ type: "openStats", data: { competitor1: 240001, competitor2: 240002, seasonId: 22673 } }, "*") ``` --- # 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-football.md?ask= ``` 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.