phase 3 · embedding

Встраивайте каталог в свои сервисы

Два способа — выбирай по ситуации. JS-сниппет интегрируется с дизайном страницы, iframe абсолютно изолирован.

JS-сниппет

Drop-in. Один тег <script> + любое количество <div data-service-hub> на странице. Виджеты подхватят тему родителя.

пример · row · с поиском

открыть в /widget ↗

live

code

html

<div data-service-hub
     data-layout="row"
     data-title="Все сервисы"
     data-search="1"></div>
<script src="HUB_URL/static/js/embed.js" async></script>

пример · grid · фильтр по тегу

открыть в /widget ↗

live

code

html

<div data-service-hub
     data-layout="grid"
     data-tags="прогноз"
     data-title="Прогнозы"
     data-limit="4"></div>

пример · list · идеально для сайдбара

открыть в /widget ↗

live

code

html

<div data-service-hub
     data-layout="list"
     data-title="Другие сервисы"
     data-limit="5"></div>

iframe

Полностью изолированные стили и скрипты. Удобно когда родительская страница может конфликтовать (legacy-проекты, чужие CSS-фреймворки).

пример · row

открыть в /widget ↗

live

code

html

<iframe
  src="HUB_URL/widget?layout=row&title=Сервисы&search=1"
  style="border:0;width:100%;height:160px">
</iframe>

Параметры

Одинаковые для обоих способов. В JS-сниппете — через data-* атрибуты. В iframe — query-параметры.

Параметр	Значения	По умолчанию	Описание
`layout`	`grid` · `row` · `list`	grid	сетка / горизонтальный скролл / вертикальный список
`theme`	`auto` · `dark` · `light`	auto	auto = следует за `prefers-color-scheme`
`tags`	slug,slug,…	—	фильтр по тегам (OR), без фильтра — все сервисы
`title`	текст	—	заголовок над сеткой
`search`	`0` · `1`	0	показать поле поиска
`limit`	число	все	максимум карточек
`bg` (iframe)	`transparent` · `themed`	transparent	прозрачный или тёмный фон iframe