Virtual Horses Kiron

UI - Visualization component

The Virtual Horses Kiron visualization component is delivered as an iframe with a responsive interface.

Below URL provides an example as shown on Sportradar’s Virtual Sports Demonstrator:

https://{domain}/vhk/vhk/index?clientid={clientid}&lang={style}&style={style}&oddType={oddType}

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

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

Listening to postMessages

For Virtual Horses Kiron, you have to setup an event listener for postMessages:

window.addEventListener("message", receiveMessage);

• messageType can be of the following:

  • setHeight

  • svg:response

  • switchEvents

• messageData.type could be competitor (for jersey), form, rating or lengthbehindwinner

• messageData should contain always race (e.g: vhc:stage:3717087), competitor (e.g.: sr:competitor:456545) and sport vhk

<script type="text/javascript">
    function receiveMessage(event) {
        var data = event.data;
        // assumption: if event.data is an string, it was JSON.stringifed before.
        if (typeof data === "string") {
            data = JSON.parse(data);
        }

        var type = data.messageType;
        var data = data.messageData;

        // switch case
        // console.log("customer received", type, data);
        switch (type) {
            case 'setHeight':
                document.getElementById('iframe').style.height = data.height + "px";
                break;
            case 'svg:response':
                // do something with the data from response
                var imageDiv = document.getElementById('images');
                var newDiv = document.createElement('div');
                newDiv.innerHTML = data.svg;
                imageDiv.appendChild(newDiv);
                break;
            case 'switchEvents':
                // do something with the data from response
                document.getElementById('switchEvents').innerHTML = JSON.stringify(data);
                break;
            default:
                //console.log('default');
                break;
        }

    }
</script>

switchEvents

This postMessage is called once after loading the page, each time a user clicks a race in the ‘Race Calendar’, as well as, when a race starts.

This function can be used to bring the race related odds to the users focus by scrolling the odds list to this position:

{
    "messageType": "switchEvents",
    "messageData": {
        "event_start": 1567697231,
        "unified_event_ids": [
            "vhc:stage:15498708"
        ],
        "sport": "vhk",
        "application": "desktop",
        "unique_tournament_id": 936970
    }
}

Sending postMessages

You can send postMessages to the iframe in order to retrieve a competitor's jockey jerseys, rating or form.

Messages to the iframe must be of messageType svg:request. Examples of such messages can be seen below.

Getting jockey jerseys

You can download jockey jerseys as Scalable Vector Graphic in order to embed it into your market offer:

You can do by sending the following request via postMessage to the iframe.

iframe.postMessage(JSON.stringify({ 
    messageType: 'svg:request', 
    messageData: { 
        type: 'competitor', 
        race: 'vdr:stage:15498902', 
        competitor: 'sr:competitor:455655', 
        sport: 'vhk' 
    } 
}), '*')

Getting form

You can download the competitor's form as Scalable Vector Graphic in order to embed it into your market offer:

You can do so by sending the following request via postMessage to the iframe.

iframe.postMessage(JSON.stringify({
    messageType: 'svg:request', 
    messageData: {
        type: 'form', 
        race: 'vhc:stage:15498708', 
        competitor: 'sr:rating:454837', 
        sport: 'vhk'
    }
}), '*')

Getting rating

You can download the competitor's rating as Scalable Vector Graphic in order to embed it into your market offer:

by sending the following request via postMessage to the iframe.

iframe.postMessage(JSON.stringify({ 
    messageType: 'svg:request', 
    messageData: { 
        type: 'rating', 
        race: 'vhc:stage:15498708', 
        competitor: 'sr:rating:454837', 
        sport: 'vhk' 
    } 
}), '*')

Getting length behind winner

You can download a competitor's length behind winner as Scalable Vector Graphic in order to embed it into your market offer:

You can do so by sending the following request via postMessage to the iframe.

iframe.postMessage(JSON.stringify({ 
    messageType: 'svg:request', 
    messageData: { 
        type: 'lengthbehindwinner', 
        race: 'vhc:stage:15498708', 
        competitor: 'sr:rating:454837', 
        sport: 'vhk' 
    } 
}), '*')