Модульные виджеты

Модульные виджеты для своей работы в блоке контейнера размещают <iframe/> (фрейм), в котором загружается необходимый компонент системы Gamification Lab. Модульные виджеты, в отличии от информационных, полностью автономны и не требуют jQuery, при этом они полностью изолированы от внешнего сайта, т.к. работают внутри фрейма. Размер фрейма задается параметрами width и height (по умолчанию их значения 1200 и 600, соответственно)

SCRIPT_URL виджета формируется следующим образом:

https://domain/api/widgets/iframe?auth&name=name&container=id&params

Где:

- https://domain - URL установки платформы

- name - имя виджета

- auth - строка авторизации

- id - уникальный id контейнера

- params - необязательный набор параметров для виджета

Список всех доступных виджетов можно найти тут: https://api.labgame.ru/w5.php

Растягивание фрейма.

Для модульных виджетов можно обеспечить возможность растягивания фрейма на высоту содержимого. Для этого встроена js библиотека iframe-resizer

Для использования данной возможности, нужно выполнить следующие шаги:

1. Подключить клиентскую часть (iframeResizer.js)

https://github.com/davidjbradshaw/iframe-resizer

https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js"></script>

2. добавить код, запускающий его через скрипт:

<script async>

document.addEventListener('DOMContentLoaded', function () {

iFrameResize({

offsetSize: 0,

waitForLoad: true,

}, '#shop-iframe')

})

</script>

Здесь #shop-iframe это идентификатор iframe-виджета, которого выводим

3. Дополнительно рекомендуется добавить стили для iframe

<style>

iframe {

width: 100%;

}

</style>

Информационные виджеты