# Fight Event Centre

* 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.

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

{% embed url="<https://codesandbox.io/s/muddy-firefly-jpjdui>" %}

Sample code:

```javascript
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".

{% embed url="<https://codesandbox.io/s/silly-microservice-zejkxw>" %}

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

sample code:

```javascript
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"
        }
      });
```