• Agregue su nombre único de ID de operador.

• Establezca targetModule: "iframe".

• Ingrese la ID del evento. Tenga en cuenta que debe usar la ID única para la cartelera; por ejemplo, para UFC FIGHT NIGHT la ID del evento es "707".

• Encuentre la ID de pelea única a la que le gustaría navegar cuando el Centro de Eventos se cargue inicialmente. En este ejemplo, la ID de la pelea es "6667".

• Agregue el contexto inicial, que consiste solo en "fightId".

  • El campo ‘view’ debe ser: "Fight" para permitir la navegación a la cartelera completa.

  • "fightId" corresponde a una pelea determinada.

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

Código de muestra:

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

Tenga en cuenta que, si no desea permitir la navegación y quiere limitar la vista solo para una pelea en particular, puede hacerlo pasando "targetModule:" como "fight".

Tenga en cuenta que no hay un botón Volver en el Centro de Eventos anterior.

Código de muestra:

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

Pasos para renderizar la vista Emparejamiento, sin navegación

• Agregue su ID de operador único.

• Establezca el targetModule: "matchup" (distingue entre mayúsculas y minúsculas).

• Ingrese la eventId. Tenga en cuenta que debe usar la ID única para la cartelera.

• Encuentre la FightID única a la que le gustaría navegar cuando el Centro de Eventos se represente inicialmente, por ejemplo 7121.

• Agregue el contexto inicial, que consiste en "view" y "fightId".

  • El valor de "view" debe ser: "matchup" para representar la cartelera en la vista de emparejamiento.

  • "fightId" corresponde a una pelea determinada.

Código de muestra:

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

Pasos para implementar el CE completo:

• Añada su nombre único de ID de operador.

• Establezca targetModule como "full".

• Ingrese la ID del evento. Tenga en cuenta que debe usar la ID única para la cartelera, es decir UFC 254. La ID del evento es "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"
      });

Esto otorgará acceso completo a la cartelera UFC.

Pasos para incrustar solo la tarjeta de pelea, sin navegación

• Agregue su ID de operador único.

• Establezca targetModule: "fightCard" (distingue entre mayúsculas y minúsculas).

• Ingrese la ID de evento. Tenga en cuenta que debe usar la ID única para la FightCard. Por ejemplo, para UFC Fight Night la ID de evento es "707".

Código de muestra:

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

Modularización

El Centro de eventos de UFC admite la inicialización en 7 configuraciones modulares diferentes. Esto se hace proporcionando el nombre del módulo dentro del campo "targetModule".

Temas de mensajes

Todas las tablas mostradas a continuación detallan los campos de datos presentes en los objetos de datos de mensajes que se envían y reciben para cada tema de mensaje.

Protocolo de enlace fallido

No se pudo completar el tema específico para indicar el protocolo de enlace entre el Centro de Eventos y su sitio. Este tema es emitido por la biblioteca de integración, solo hay que suscribirse a él, no emitirlo.

Actualización de contexto

Tema para cubrir las actualizaciones generales en el estado de la interfaz de usuario a través del objeto initialContext. Por ejemplo: navegar a una pelea o cartelera específica

Cartelera completa

Para incrustar el Centro de Eventos UFC completo, debe especificar los siguientes campos específicos para su compilación.

• 'targetModule' especifica si la aplicación debe mostrar el Centro de Eventos completo, una pelea individual, la cartelera, los golpes, los emparejamientos, las estadísticas o la cinta.

• 'eventId' se refiere a la cartelera/evento de UFC que se desea mostrar.

Pasos para renderizar la vista de cinta, sin navegación

• Agregue su ID de operador único.

• Establezca el targetModule: "tape" (distingue entre mayúsculas y minúsculas).

• Ingrese la eventId. Tenga en cuenta que debe usar la ID única para la cartelera.

• Encuentre la FightID única a la que le gustaría navegar cuando el Centro de Eventos se represente inicialmente, por ejemplo 7121.

• Agregue el contexto inicial, que consiste en "view" y "fightId".

  • El campo "view" debe ser "tape" para representar la cartelera en la vista de cinta.

  • "fightId" corresponde a una pelea determinada.

Código de muestra:

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

Pasos para renderizar la vista Estadísticas, sin navegación

• Agregue su ID de operador único.

• Establezca el targetModule: "stats" (distingue entre mayúsculas y minúsculas).

• Ingrese la eventId. Tenga en cuenta que debe usar la ID única para la cartelera.

• Encuentre la FightID única a la que le gustaría navegar cuando el Centro de Eventos se represente inicialmente, por ejemplo 7121.

• Agregue el contexto inicial, que consiste en "view" y "fightId".

  • El campo "view" debe ser "stats" para mostrar la cartelera en la vista de estadísticas.

  • "fightId" corresponde a una pelea determinada.

Código de muestra:

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

• Agregue su ID de operador único.

• Establezca el targetModule: "striking" (distingue entre mayúsculas y minúsculas).

• Ingrese la eventId. Tenga en cuenta que debe usar la ID única para la cartelera.

• Encuentre la FightID única a la que le gustaría navegar cuando el Centro de Eventos se represente inicialmente, por ejemplo 7121.

• Agregue el contexto inicial, que consiste en "view" y "fightId".

  • El campo “view” debe ser: "striking" para mostrar la cartelera en la vista de golpes.

  • "fightId" corresponde a una pelea determinada.

Código de muestra:

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