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 integrations@imgarena.com.

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

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

For more information on how to use unpkg please see their docs: https://unpkg.com

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>

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.

const targetElement = document.querySelector('#img-arena-event-centre');
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: "[OPERATOR-NAME]",
  sport: "ufc",
  version: "latest",
  eventId: "705",
  language: "en",
  targetModule: "full",
  targetElementSelector: targetElement
});

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.

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.

Subscribing

.on(MESSAGE_TOPIC_NAME, (messageData) => {
  // operate on received messageData, see below for returned fields for each topic
})

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.

Emitting

// See below the fields to include on object passed for each topic
.emit(MESSAGE_TOPIC_NAME, messageData)

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.

Languages

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

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.

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