Betvision Integration
Handling Events

HANDLING EVENTS

Genius Sports Message Bus

What is the Genius Sports message bus and how to integrate with it

The geniussportsmessagebusis a messaging bus used to communicate information from our video player to other components of an integrating application, typically not controlled by Genius Sports, with the necessary information to react to a specific event.

To listen to events from the messagebus, clients should bind an event listener to the window object, as shown below:

window.addEventListener('geniussportsmessagebus', (event) => {
    if (typedEvent.detail.type === 'an-event-type') {
      ...
    } else if (typedEvent.detail.type === 'another-event-type') {
      ...
    } else if (typedEvents.detail.type === 'betslip-container-dimensions') {
      ...
    }
    ...
})

The event type that is dispatched onto the window object is a CustomEvent (MDN docs) (opens in a new tab).

Video player event 'player_ready'

The existing video player integration relies on the 'player_ready' event that the video player dispatches. This event is used to obtain a video streaming URL with an authentication token. All communication to and from the video player utilizes events.

More details: Documentation - How to integrate it.

Betslip interaction based on 'multibet-event'

The existing video player integration relies on an event named 'player_ready'. Similarly, to facilitate interaction with the betslip, an event named 'multibet-event' needs to be consumed.

window.addEventListener('geniussportsmessagebus', (event) => {
    if (typedEvent.detail.type = 'multibet-event') {
      ...
    } else if (typedEvent.detail.type === 'player_ready') {
      ...
    }
    ...
})

Betslip coordinates and size betslip-container-dimensions

When the Interactive Betting* mode is enable and the device is rotated, a message will be emitted containing coordinates and dimensions for the container that can be used to display a betslip within the Betvision experience.

ⓘ Information!
*Interactive Betting, this mode is available once your prices and markets are fully integrated into our system and you have completed your Betslip integration.

This message will be emitted every time the coordinates where the container should be rendered or the available size changes. If the device changed its rotation but the coordinates and size remains, the message will not be sent as we keep track of the last sent information.

The body will include:

  • left
  • top
  • height
  • width

The top and left properties refer to the betslip position (top-left corner) relative to the viewport. The height and width refers to the available space to draw the betslip component

interface BetsliptContainerDimensions {
  height: number,
  left: number,
  top: number,
  width: number
}

The following is an example of the structure of these events:

{
  "detail": {
    "correlationId": "c1df1667-9917-4996-0016-71dbe1bb264a",
    "routingKey": {},
    "type": "betslip-container-dimensions",
    "body": {
        "left": 393,
        "top": 8,
        "width": 218,
        "height": 359
    }
  }
}

Multibet Events

Commands Supported

The ‘multibet-event' supports the next commands inside the body:

  • addToBetslip
  • removeFromBetslip
  • placeBet
  • openBetslip
  • closeBetslip

These commands are accessible in the body of the events raised by the video player.

if (typedEvent.detail.type = 'multibet-event') {
        switch(typedEvent.detail.body.command) {
            case "addToBetslip":
            ...
            break;
            case 'removeFromBetslip':
            ...
            break;
            case "placeBet":
            ...
            break;
            case "openBetslip":
            ...
            break;
            case "closeBetslip":
            ...
            break;
        }
} else ...

Payload for "addToBetslip" and "removeFromBetslip"

The data contained in the betslip command to "addToBetslip" | "removeFromBetslip" is structured as follows:

interface BetslipEvent {
    command: "addToBetslip" | "removeFromBetslip",
    sportsbookFixtureId: string,
    marketId: string,
    sportsbookMarketId: string,
    sportsbookMarketContext: string,
    sportsbookSelectionId: string,
    decimalPrice: string,
    fractionalPrice: string,
    americanPrice: string,
    stake?: number //optional
}

The following is an example of the structure of these events:

{
    "command": "addToBetslip",
    "sportsbookFixtureId": "56789",
    "marketId": "100120022",
    "sportsbookMarketId": "1234567",
    "sportsbookMarketContext": "ABCDE",
    "sportsbookSelectionId": "2132365",
    "decimalPrice": "1.66",
    "fractionalPrice": "66/100",
    "americanPrice": "-145",
    "stake": undefined
}

Payload for "placeBet"

The data contained in the betslip command to "placeBet" is structured as follows:

interface BetslipEvent {
    command: "placeBet" ,
    markets: [ 
        {
            sportsbookFixtureId: string,
            marketId: string,
            sportsbookMarketId: string,
            sportsbookMarketContext: string,
            sportsbookSelectionId: string,
            decimalPrice: string,
            stake?: number //optional
        },
    ]
}

The following is an example of the structure of these events:

{
  "command": "placeBet",
  "markets": [ 
    {
      "sportsbookFixtureId": "56789",
      "marketId": "100120022",
      "sportsbookMarketId": "1234567",
      "sportsbookMarketId: "",
      "sportsbookMarketContext": "ABCDE",
      "sportsbookSelectionId": "2132365",
      "decimalPrice": "1.66",
      "stake": undefined
    },
    {
      "sportsbookFixtureId": "56789",
      "marketId": "100120023",
      "sportsbookMarketId": "1234567",
      "sportsbookMarketContext": "ABCDE",
      "sportsbookSelectionId": "2132365",
      "decimalPrice": "1.32",
      "stake": undefined
    }
  ] 
}
  • sportsbookFixtureId - customer fixture ID
  • marketId - Genius Sports market ID
  • sportsbookMarketId - customer market ID
  • sportsbookMarketContext - customer market context. This field will be populated only if the customer provided it in UpdategramResponse
  • sportsbookSelectionId - customer selection ID
  • decimalPrice - the price that was displayed in the Multibet Widget when the player pressed the "Add to betslip" button. This value should NOT be used for bet acceptance.
  • An optional stake value which is can be one of the following values: a number, null, or undefined.

Payload for "openBetslip"

The data contained in the betslip command to "openBetslip" is structured as follows:

interface BetslipEvent {
    command: "openBetslip"
}

The following is an example of the structure of these events:

{
  "command": "openBetslip"
}

Payload for "closeBetslip"

The data contained in the betslip command to "closeBetslip" is structured as follows:

interface BetslipEvent {
    command: "closeBetslip"
}

The following is an example of the structure of these events:

{
  "command": "closeBetslip"
}

Tilting the native device and full screen

The video player is hosted inside a “webview” on the native device, which is controlled by the customer. Due to this the video player cannot receive certain native mobile device events, like device rotation.

To enable the end user switching from a traditional betting page layout to overlaid full screen streaming the hosting mobile application has to raise an event through the hosting “webview” into the Genius Live Video player. This requires development work from the bookmaker

ⓘ Information!
Sample code how to allow fullscreen mode and traditional betting view based on user device tilt actions can be found in this repository:
GitHub - geniussportsgroup/geniuslive-examples (opens in a new tab)

Integrating BetslipRestrictions