Универсальная инструкция по интеграции Areels

Загрузка и управление видео

Загрузка видео

Видео можно загрузить несколькими способами:

С локального компьютера — прямая загрузка файлов
Импорт с веб-сервисов — из файловых хостингов (Яндекс Диск, Google Drive, Dropbox и т.д.)
По прямой ссылке — указав URL видеофайла

Работа с кампаниями

Кампании — это коллекции видео для упрощения каталогизации и управления контентом.

Создание кампании:

Перейдите в раздел кампаний в панели Areels
Создайте новую кампанию с описательным названием
Назначайте видео в кампании при загрузке или редактировании

Преимущества кампаний:

Группировка видео по тематике/категориям
Упрощение массового управления видео
Автоматическое назначение последней использованной кампании новым видео

Интеграция в карточки товаров

Bitrix

1. Создание дополнительного поля:

Перейдите: Рабочий стол → Магазин → Каталог товаров → Свойства товаров
Создайте новое поле типа "Строка" для видео URL

2. Настройка формы редактирования:

В настройках формы редактирования добавьте созданное поле
Сделайте поле доступным для редактирования

3. Интеграция в шаблон:

Найдите шаблон карточки товара: bitrix/templates/[ваш_шаблон]/components/bitrix/catalog.element/

Добавьте код отображения видео:

<?if(!empty($arResult['PROPERTIES']['VIDEO_FIELD']['VALUE'])):?>
    <!-- Areels video player -->
    <iframe 
        frameborder="0"
        scrolling="no"
        crossorigin="anonymous"
        allow="autoplay; fullscreen"
        src="<?=str_replace(
            '//video.areels.ru/v/',
            '//player.areels.ru/embed/',
            $arResult['PROPERTIES']['VIDEO_FIELD']['VALUE']
        )?>?autoplay=1&muted=1&loop=1&noplatform=1&controls=none&fit=cover"
        style="width: 100%; height: auto; aspect-ratio: 4 / 5; pointer-events: none;"
    ></iframe>
<?endif?>

Moguta CMS

1. Установка плагина:

Скачайте плагин Areels для Moguta CMS
Установите через панель управления плагинами

2. Настройка дополнительных полей:

Создайте дополнительное поле для товара или вариации
Укажите тип поля как "Строка" для URL видео

3. Добавление шорткода:

В нужном месте шаблона добавьте шорткод плагина
Рекомендуется размещать видео первым элементом для максимальной вовлеченности

Если необходима помощь с правильной установкой шорткода — обращайтесь, поможем.

InSales

1. Добавление видео через админку:

В разделе редактирования товара нажмите "Добавить видео"
Вставьте URL видео из Areels (игнорируйте ограничения по платформам)

2. HTML код (в блок {% capture videos %}):

{% elsif link.url contains "https://video.areels.ru" %}
    <div class="img-ratio img-fit product__photo" data-alt="" data-type="video">
        <div class="img-ratio__inner">
            <div style="width: 100%; height: 100%; pointer-events: none;" class="areels-video-embed">
                <iframe frameborder="0" scrolling="no" crossorigin="anonymous" 
                        allow="autoplay; fullscreen" width="100%" height="100%" 
                        data-src="{{ link.url | replace: 'video.', 'player.' | replace: '/v/', '/embed/' }}?autoplay=1&muted=1&loop=1&fit=cover&controls=none" 
                        style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>
    </div>

3. JavaScript код (в функцию initProductGallerySlider):

$videoSpot = $(el).find('iframe[data-src*="areels"]');
$videoSpot.attr("src", $videoSpot.attr("data-src"));

Другие CMS

1. Общий принцип интеграции:

Создайте дополнительное поле для URL видео в товаре
Добавьте в шаблон карточки товара код iframe с видео
Используйте условие для показа видео только при наличии URL

2. Базовый код iframe:

<iframe 
    frameborder="0"
    scrolling="no"
    crossorigin="anonymous"
    allow="autoplay; fullscreen"
    src="[URL_ВИДЕО]?autoplay=1&muted=1&loop=1&fit=cover&controls=none"
    style="width: 100%; height: auto; aspect-ratio: 4 / 5;"
></iframe>

3. Преобразование URL:

Замените в URL видео:

//video.areels.ru/v/ → //player.areels.ru/embed/

Нужна помощь с интеграцией в вашу CMS? Обращайтесь к нашей поддержке — поможем с любой платформой.

Интеграция в каталог товаров

Создание видеоблоков

1. В панели Areels:

Перейдите в раздел "Блоки" для вашего сайта
Создайте новый блок для нужной страницы/категории
Настройте параметры отображения

2. Интеграция в каталог:

Найдите шаблон раздела каталога и добавьте код видеоблока в цикл товаров:

<? // Настройки видео Areels
  $videoUnits = [
    // ПОЗИЦИЯ => ID_БЛОКА
    2 => 123456789,
  ];
  $videoCategories = ['category1', 'category2']; // коды категорий
?>

<?foreach($arResult["ITEMS"] as $itemIndex => $arItem){?>
  <!-- Areels video block -->
  <?if(!empty($videoUnits[$itemIndex]) && in_array($arResult["CODE"], $videoCategories)){?>
    <div class="item_block">
      <iframe src="https://player.areels.ru/player/<?echo $videoUnits[$itemIndex];?>?autoplay=1&muted=1&loop=1&fit=cover&controls=none&player=overlay&keywords=<?echo $arResult["CODE"];?>" 
              width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay; fullscreen"></iframe>
    </div>
  <?endif?>
  <!-- Обычные товары -->
<?}?>

Настройка ротации видео

1. Создание плейлистов:

В блоке выберите несколько видео для ротации
Настройте автоматическую смену видео

2. Использование кампаний:

Создайте кампании для разных разделов сайта
В блоках выберите нужную кампанию для автоматического показа всех видео

Общие настройки

Установка кода отслеживания

1. Получение кода:
В панели Areels скопируйте код отслеживания для вашего сайта

2. Размещение кода:

Добавьте код в секцию <head> всех страниц
Для CMS: используйте раздел "Счетчики и коды" или аналогичный

3. Проверка установки:
Вернитесь в панель Areels и нажмите "Проверить код"

Параметры плеера

Основные параметры URL для настройки воспроизведения:

Параметр	Описание
`autoplay=1`	Автовоспроизведение (отключает звук)
`muted=1`	Отключение звука по умолчанию
`loop=1`	Зацикленное воспроизведение
`fit=cover`	Заполнение блока без черных полос
`controls=none`	Отключение элементов управления
`player=overlay`	Режим наложения плеера
`noclose=1`	Отключение кнопки закрытия
`novolume=1`	Отключение регулятора громкости
`notimeline=1`	Отключение временной шкалы
`nocta=1`	Отключение призыва к действию
`nodomain=1`	Скрытие домена

Добавление интерактивности

Настройка призыва к действию:

В разделе редактирования видео включите блок "Призыв к действию"
Добавьте ссылку на страницу товара или категории
Настройте текст кнопки (опционально)
Поддерживаются UTM-метки для аналитики

Безопасность

Настройка антивируса для Bitrix::

Добавьте домен "areels.ru" в исключения антивирусного ПО
Убедитесь, что iframe-элементы не блокируются
Oбязательно добавьте исключения в модуле "Веб-безопасность" — наш iframe может блокироваться встроенным антивирусом системы, т.к по умолчанию блокируются любые ифреймы.

Рабочий процесс

Пошаговый алгоритм работы:

1. Подготовка:

Создайте кампании для категоризации видео
Настройте дополнительные поля в CMS

2. Загрузка контента:

Загрузите видео в панель Areels
Назначьте видео в соответствующие кампании

3. Интеграция:

Скопируйте URL видео из панели Areels
Добавьте URL в карточку товара через дополнительное поле

4. Проверка:

Убедитесь в корректном отображении на сайте
Протестируйте воспроизведение и интерактивность

Поддержка

При возникновении вопросов по интеграции или настройке обращайтесь в техническую поддержку Areels. Мы поможем с:

Правильной установкой кода
Настройкой шаблонов
Оптимизацией производительности
Решением технических проблем

Контакты поддержки:
Обращайтесь через панель управления Areels или по указанным в вашем аккаунте контактам.

Универсальная инструкция по интеграции Areels

Загрузка и управление видео

Загрузка видео

Работа с кампаниями

Интеграция в карточки товаров

Bitrix

Moguta CMS

InSales

Другие CMS

Интеграция в каталог товаров

Создание видеоблоков

Настройка ротации видео

Общие настройки

Установка кода отслеживания

Параметры плеера

Добавление интерактивности

Безопасность

Рабочий процесс

Пошаговый алгоритм работы:

Рекомендации по размещению:

Поддержка