# Instrucciones de integración del operador

{% hint style="info" %}
Tenga en cuenta que los fragmentos de código que se muestran en este artículo están destinados a ser utilizados únicamente con fines de evaluación y prueba. Antes de comenzar, comuníquese con <support@imgarena.com>.
{% endhint %}

## Librería de Integración

La biblioteca de integración de Front Row Seat se distribuye con una compilación de módulo ES y una compilación de UMD. Los siguientes ejemplos usan la sintaxis de UMD para mayor claridad y para mostrar la implementación más simple.

El paquete se distribuye mediante npm, donde están disponibles tanto el módulo ES como las compilaciones UMD: <https://www.npmjs.com/package/@img-arena/front-row-seat>

La compilación UMD está disponible en unpkg: <https://unpkg.com/@img-arena/front-row-seat>

Para obtener más información sobre cómo usar unpkg, consulte sus documentos: [https://unpkg.com](https://unpkg.com/)

La integración del Centro de Eventos UFC de IMG Arena en su sitio web se puede lograr mediante los siguientes pasos:

1. Añada un elemento HTML DOM "***container***" para el lugar donde debe aparecer el Centro de eventos.
2. Incluya el script de la biblioteca de integración.
3. Inicialice la biblioteca de integración.

```javascript
<!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>
```

### Elemento de destino

Puede haber ocasiones en las que sea preferible pasar un nodo de elemento en lugar de una cadena para el destino del Centro de Eventos.

La propiedad `targetElementSelector` puede ser una cadena para la selección de un elemento DOM o un nodo de elemento en sí mismo.

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

## Autorización

Cada cliente integrado recibe su propia URL única del Centro de Eventos de IMG Arena. Para evitar un posible web scraping, supervisamos con frecuencia el uso no autorizado de esta URL y tenemos la capacidad de cerrar cualquier uso sospechoso.

## Inicialización

Para manejar la sincronización del Centro de Eventos UFC con su sitio, hay dos métodos expuestos en el valor de retorno del inicializador `eventCentre`: `on` y `emit`. Ambos métodos siguen el patrón pub/sub para el intercambio de mensajes asincrónicos. El método `on` es para recibir mensajes del Centro de Eventos, mientras que el método `emit` es para enviar mensajes al Centro de eventos.

## Suscripción

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

El método `on` está disponible en el valor de retorno del inicializador de `eventCentre,` se utiliza para suscribirse a los mensajes emitidos desde el Centro de Eventos. Los temas de los mensajes admitidos se exponen en el espacio de nombres `eventCentreUtils`, `eventCentreUtils.MessageTopics`, y se detallan a continuación. La retrollamada recibe un valor único que es un objeto que contiene los campos respectivos al tema del mensaje al que se suscribió.

## Emisión

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

El método `emit` está disponible en el valor de retorno del inicializador de `eventCentre` Se`,` se utiliza para enviar mensajes al Centro de Eventos. Solo los temas de mensajes admitidos se pasarán al Centro de eventos.

## Idiomas

Como se puede ver en los ejemplos, 'language' (idioma) se puede configurar como una variable. Consulte: [language-translations-available](https://docs.sportradar.com/ufc-5.0/ufc-5.0-latam-spanish/language-translations-available "mention")

## Tema

TElEl tema del Centro de Eventos se puede configurar pasando un valor para el parámetro `theme`. `theme: "dark"` mostrará la versión oscura del Centro de Eventos. Tenga en cuenta que , si no pasa el parámetro `theme,` se mostrará la versión ligera del Centro de Eventos.

{% embed url="<https://codesandbox.io/s/full-fight-card-forked-t4gku?file=%2Findex.html>" %}

## **Opciones**

Algunas opciones adicionales se pueden especificar en el campo `options`.<br>

| Nombre de opción       | Descripción                                                                        | Por defecto | Ejemplo          |
| ---------------------- | ---------------------------------------------------------------------------------- | ----------- | ---------------- |
| `videoPlaybackEnabled` | <p>Permite ver transmisiones cuando</p><p>están disponibles</p>                    | false       | "true" o "false" |
| `disablePeopleImages`  | Deshabilita las imágenes de personas, mostrando marcadores de posición en su lugar | false       | "true" o "false" |
| `userId`               | Utilizado para seguimiento de análisis de Google                                   | undefined   | "123e4567"       |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sportradar.com/ufc-5.0/ufc-5.0-latam-spanish/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
