Для использования виджета необходимо получить ключ парафии, который далее указывается в свойствах импортируемого компонента. В блоке head необходимо указать два скрипта, поддерживающих работу компонента с виджетом.
<!DOCTYPE html>
<html>
<head>
...
<script type="module" src="https://cdn.jsdelivr.net/npm/imshaby-schedule@latest/dist/imshaby-schedule/imshaby-schedule.esm.js"></script>
...
</head>
<body>
...
<imshaby-schedule parish-id="<insert_parish_key_here>"></imshaby-schedule>
...
</body>
</html>
При импорте виджета на страницу сайта кроме ключа парафии можно указать опцию автоматически развернутых карточек. По умолчанию все карточки с Имшами развернуты (expanded="true"), однако если требуется, чтобы они были свернуты по умолчанию, необходимо задать параметр expanded="false" в свойствах импортируемого кода:
...
<imshaby-schedule parish-id="<insert_parish_key_here>" expanded="false"></imshaby-schedule>
...
По умолчанию виджет занимает максимальный размер экрана. Ограничить его можно посредством помещения компонента в div с заданными параметрами ширины и высоты:
...
<div style="width: 400px; height: 500px;">
<imshaby-schedule parish-id="<insert_parish_key_here>"></imshaby-schedule>
</div>
...
Также виджет можно ограничить посредством применения стилей (в т.ч. без директивы !important):
...
<head>
...
<style>
.w-50 {width: 50%;}
.h-50 {height: 50%;}
.widgetDiv {border: 1px solid mediumaquamarine;}
</style>
</head>
<body>
...
<div class="w-50 h-50 widgetDiv">
<imshaby-schedule parish-id="<insert_parish_key_here>" expanded="false"></imshaby-schedule>
</div>
...
</body>