circle-info
"Additional Solutions” provide insights into our range of media offerings; originally part of IMG & now part of Sportradar
chevron-right
search
sportradar.comSportradar Support Portal

Operator Integration Instructions

Please note that the code snippets displayed in this article are intended to be used for assessment and testing purposes only. Prior to going live, please reach out to [email protected]envelope.

hashtag
Integration Library

The Front Row Seat integration library is distributed with an ES module build and a UMD build, the examples below use the UMD syntax for clarity and to show the simplest implementation.

The package is distributed using npm, where both ES module and UMD builds are available: https://www.npmjs.com/package/@img-arena/front-row-seatarrow-up-right

The UMD build is available on unpkg: https://unpkg.com/@img-arena/front-row-seatarrow-up-right

For more information on how to use unpkg please see their docs: https://unpkg.comarrow-up-right

hashtag
Usage

Integrating the IMG Arena UFC Event Centre into your website can be achieved by following the below steps:

  1. Add a "container" HTML DOM element for where the Event Centre should appear.

  2. Include the integration library script.

  3. Initialise the integration library.

<!DOCTYPE html>
<html>
  <head>
    <title>IMG Arena Event Centre</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="img-arena-event-centre"></div>
    <script src="https://unpkg.com/@img-arena/front-row-seat"></script>
    <script>
      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "OPERATOR-NAME",
        sport: "ufc",
        targetModule: "full",
        eventId: "EventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

      eventCentreInstance.on(MessageTopics.CONTEXT_UPDATE, msg => {
        console.log(msg);
      });

      eventCentreInstance.on(MessageTopics.HANDSHAKE_FAILED, () => {
        console.log("Handshake failed");
      });
    </script>
  </body>
</html>

hashtag
Target Element

There may be occasions where it is preferable to pass in an element node instead of a string for the target destination of the event centre.

The targetElementSelector property can be either a string for the selection of a DOM element, or an element node itself.

hashtag
Authorisation

Each integrated customer receives their own unique IMG Arena Event Centre URL. To prevent potential web scraping, we frequently monitor for the unauthorised use of this URL and have the ability to shut down any suspicious usage.

hashtag
Initialisation

To handle the synchronising of the UFC Event Centre with your site there are two methods exposed on the return value from the eventCentre initialiser: on and emit. Both these methods follow the pub/sub pattern for asynchronous message exchange. The on method is for receiving messages from the Event Centre, whereas the emit method is for sending messages to the Event Centre.

hashtag
Subscribing

The on method is available on the return value from the eventCentre initialiser, it is used to subscribe to messages emitted from the Event Centre. The supported message topics are exposed on the eventCentreUtils namespace, eventCentreUtils.MessageTopics, and are detailed below. The callback receives a single value which is an object containing the respective fields to the message topic subscribed to.

hashtag
Emitting

The emit method is available on the return value from the eventCentre initialiser, it is used to send messages to the Event Centre. Only supported message topics will be passed to the Event Centre.

hashtag
Languages

As can be seen from the examples, 'language' can be set as a variable. Please see: Language Translations Available

hashtag
Theme

The theme of the event centre can be configured by passing in a value for the theme parameter. theme: "dark" will display the dark-themed version of the event centre. Note that if you do not pass the theme parameter, the light version of the event centre will be rendered.

hashtag
Options

Some additional options can be specified in the options field.

Option name
Description
Default
Example

videoPlaybackEnabled

Enables viewing broadcasts when they are available

false

true or false

disablePeopleImages

Disables images of people, showing placeholders instead

false

true or false

userId

Used for google analytics tracking

undefined

"123e4567"

NextSDK Integration

Last updated

Was this helpful?