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://{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:

Parameter	Required	Description
clientid	required	Identifies you as a bookmaker in our system. The id will be provided to you by your technical account manager.
product	required	Specifies the product which needs to be set to vff1, vff2 or vff3 for Virtual Fast Football.
environment	required	Specifies either staging or production environments.
lang	optional	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
style	optional	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.
oddType	optional	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.

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.

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.

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:

// 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:

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

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