IMG Arena Event Centre

# 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 . ## 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: The UMD build is available on unpkg: For more information on how to use unpkg please see their docs: [https://unpkg.com](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. ```javascript IMG Arena Event Centre

``` ### 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. ```javascript const targetElement = document.querySelector('#img-arena-event-centre'); const eventCentreInstance = frontRowSeat.eventCentre({ operator: "[OPERATOR-NAME]", sport: "mma", 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 ```javascript .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 ```javascript // 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](https://docs.sportradar.com/pfl-integration/language-translations-available "mention") ## 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" |