Steps to render Matchup view - No navigation

• Add your unique operator ID.

• Set your targetModule: "matchup" (case sensitive).

• Enter the eventId, note to use the unique ID for the fightcard

• Find the unique fightID that you would like to navigate to when the event centre is initially rendered, e.g. 7121

• Add the initialContext which consists of "view" & "fightId"

  • 'View' must be: "matchup" to render the fightcard in matchup view

  • 'fightId' of a given fight.

Sample Code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "matchup",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "matchup",
          fightId: "fightID"
        }
      });

Modularisation

The UFC Event Centre supports being initialised in 7 different modular configurations. This is done by providing the module name within the "targetModule" field.

Message Topics

All the tables below detail the data fields present in the message data objects that are sent and received for each message topic.

Handshake Failed

Dedicated topic to signify the handshake between Event Centre and your site failed to complete. This topic is emitted by the integration library, it should only be subscribed to, not emitted.

Context Update

Topic for covering general UI state updates via the initialContext object, for example: navigating to a specific fight card or fight

Full Fight Card

To embed the full UFC Event Centre, you must specify the following fields specific to your build.

• 'targetModule' specifies whether the app should display the full fight card, single fight, fightcard, striking, matchup, stats or tape.

• 'eventId' refers to the UFC fightcard/event that you wish to display.

• Add your unique operator ID.

• Set your targetModule: "striking" (case sensitive).

• Enter the eventId, note to use the unique ID for the fightcard

• Find the unique fightID that you would like to navigate to when the event centre is initially rendered, e.g. 7121

• Add the initialContext which consists of "view" & "fightId"

  • 'View' must be: "striking" to render the fightcard in striking view

  • 'fightId' of a given fight.

Sample Code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "striking",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "striking",
          fightId: "fightID"
        }
      });

Steps to render Stats view - No navigation

• Add your unique operator ID.

• Set your targetModule: "stats" (case sensitive).

• Enter the eventId, note to use the unique ID for the fightcard

• Find the unique fightID that you would like to navigate to when the event centre is initially rendered, e.g. 7121

• Add the initialContext which consists of "view" & "fightId"

  • 'View' must be: "stats" to render the fightcard in stats view

  • 'fightId' of a given fight.

Sample Code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "stats",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "stats",
          fightId: "fightID"
        }
      });

Steps to embed just the fight card - no navigation

• Add your unique operator ID.

• Set targetModule: "fightCard" (case sensitive).

• Enter the eventId, note to use the unique ID for the fightCard, i.e UFC Fight Night, event ID is "707".

sample code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "fightCard",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

Steps to render Tape view - No navigation

• Add your unique operator ID.

• Set your targetModule: "tape" (case sensitive).

• Enter the eventId, note to use the unique ID for the fightcard

• Find the unique fightID that you would like to navigate to when the event centre is initially rendered, e.g. 7121

• Add the initialContext which consists of "view" & "fightId"

  • 'View' must be: "tape" to render the fightcard in tape view

  • 'fightId' of a given fight.

Sample Code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "tape",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "tape",
          fightId: "fightID"
        }
      });

Steps to implement full EC:

• Add your unique operator ID name.

• Set targetModule as "full"

• Enter the eventId, note to use the unique ID for the fightcard, i.e UFC 254, event ID is "625".

      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "full",
        eventId: "eventID",
        version: "latest",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

This will grant full access to UFC Fightcard

• Add your unique operator ID name.

• Set targetModule: "iframe".

• Enter the eventId, note to use the unique ID for the fightcard, i.e UFC FIGHT NIGHT, event ID is "707".

• Find the unique fightID that you would like to navigate to when the event centre is initially loaded, i.e on this instance fightID is "6667"

• Add the initialContext which consists of "fightId"

  • 'View' must be: "Fight" to allow navigation to full fight card

  • 'fightId' of a given fight.

initialContext: {
          view: "Fight",
          fightId: "fightID"
        }

Sample code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "full",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "Fight",
          fightId: "fightID"
        }
      });

Note that if you do not want to allow navigation and want to limit view just for a particular fight, this can be done by passing "targetModule:" as "fight".

Note that there is no back button on the above event centre.

sample code:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "fight",
        eventId: "681",
        version: "dev/beac4ea5",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "Fight",
          fightId: "6667"
        }
      });