> For the complete documentation index, see [llms.txt](https://docs.sportradar.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sportradar.com/ufc-5.0/ufc-5.0-russian/readme.md).

# Инструкция по интеграции оператора

{% hint style="info" %}
Обратите внимание на то, что отображаемые в данной статье фрагменты кода предназначены для использования исключительно для целей оценки и тестирования. Прежде чем включиться в процесс, напишите по адресу: <support@sportradar.com>.
{% endhint %}

## Библиотека процесса интеграции

Библиотека процесса интеграции в формате Front Row Seat распространяется со сборкой в виде модуля ES и сборкой UMD. В приведенных ниже примерах для ясности и демонстрации простейших вариантов реализации используется синтаксис UMD.

Пакет распространяется с помощью npm, в котором доступны как сборка в виде модуля ES, так и сборка UMD: <https://www.npmjs.com/package/@img-arena/front-row-seat>

Сборка UMD доступна на unpkg: <https://unpkg.com/@img-arena/front-row-seat>

Подробнее о том, как использовать unpkg, см. в их документации: [https://unpkg.com](https://unpkg.com/)

## Порядок действий

Чтобы интегрировать Центр мероприятий Абсолютного бойцовского чемпионата (UFC) IMG Arena в свой веб-сайт, вам нужно выполнить следующие действия:

1. Добавить «***контейнерный***» HTML DOM элемент туда, где должна отображаться информация о данном Центре мероприятий.
2. Включить в него сценарий библиотеки процесса интеграции.
3. Инициализировать библиотеку процесса интеграции.

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

### Целевой элемент

Могут быть случаи, когда для целевого пункта назначения центра мероприятий предпочтительнее будет вместо строки передать узел элемента.

Свойством `targetElementSelector` может выступать либо строка выбора DOM-элемента, либо сам узел элемента.

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

## Авторизация

Каждый интегрированный клиент получает собственный уникальный URL-адрес Центра мероприятий IMG Arena. В целях предотвращения потенциального веб-скрапинга мы нередко отслеживаем несанкционированное использование этого URL-адреса и можем заблокировать любое подозрительное использование.

## Инициализация

Для выполнения синхронизации Центра мероприятий UFC с вашим сайтом есть два метода, зависящие от возвращаемого значения инициализатора `eventCentre`: `on` и `emit`. При асинхронном обмене сообщениями оба эти метода действуют по шаблону pub/sub. Метод `on` предназначен для получения сообщений из Центра мероприятий, тогда как метод `emit` предназначен для отправки сообщений в Центр мероприятий.

## Подписка

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

Метод `on` доступен для возвращаемого значения инициализатора `eventCentre`. Применяется он для оформления подписки на сообщения, отправляемые из Центра мероприятий. Поддерживаемые темы сообщений зависят от области имен `eventCentreUtils`, `eventCentreUtils.MessageTopics`, и подробно описаны ниже. С обратным вызовов поступает единственное значение, представляющее собой объект, содержащий в себе соответствующие поля для темы сообщений, на которую оформлена подписка.

## Генерирование

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

Метод `emit` доступен для возвращаемого значения инициализатора `eventCentre`. Применяется он для отправки сообщений в Центр мероприятий. Передаваться в Центр мероприятий будут только сообщения на поддерживаемые темы.

## Языки

Как видно из примеров, параметр «язык» задается как переменная. См.: [Доступные переводы на другие языки](/ufc-5.0/ufc-5.0-russian/language-translations-available.md)

## Тематика

Тематика центра мероприятий можно настроить путем передач значения параметра `theme`. `theme: "dark"` активирует отображение темной версии центра мероприятий. Обратите внимание на тот факт, что, если параметр `theme` вы не передадите, отображаться будет светлая версия центра мероприятий.

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

## **Параметры**

В поле `options` могут быть заданы некоторые дополнительные параметры.<br>

| Имя параметра          | Описание                                                      | По умолчанию | Пример          |
| ---------------------- | ------------------------------------------------------------- | ------------ | --------------- |
| `videoPlaybackEnabled` | Позволяет просматривать трансляции по мере их доступности     | false        | true либо false |
| `disablePeopleImages`  | Отключает изображения людей, показывая вместо них заполнители | false        | true либо false |
| `userId`               | Используется для отслеживания средствами Google Analytics     | undefined    | "123e4567"      |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.sportradar.com/ufc-5.0/ufc-5.0-russian/readme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
