Живой пример
Виджеты загружают актуальные регионы и карточки с сервера Finarmy.ru.
Калькулятор (форма)
Карточки расчётов
Код для встраивания
Вставьте перед закрывающим </body>. Список регионов подгружается автоматически.
1. Виджет калькулятора компенсации
<div id="finarmy-compensation-widget"></div>
<script src="https://www.finarmy.ru/embed/compensation-calculator-widget.js" async></script>2. Карточки сохранённых расчётов
<div id="finarmy-compensation-cards" data-count="3"></div>
<script src="https://www.finarmy.ru/embed/compensation-cards-widget.js" async></script>Справка по параметрам
Атрибуты data-* задаются в открывающем теге <div> виджета. Несколько атрибутов перечисляют через пробел. Необязательные можно не писать — тогда действует значение по умолчанию.
Калькулятор компенсации
| Атрибут | Значения | По умолчанию | Зачем нужен |
|---|---|---|---|
| data-theme | light или dark | light | Тёмная тема для сайтов с тёмным фоном. |
| data-target | _blank или _self | _blank | _self — открыть калькулятор в той же вкладке (удобно внутри iframe). |
| data-base-url | URL без слэша в конце | https://www.finarmy.ru | Если тестируете копию сайта — укажите её адрес. |
Карточки расчётов
| Атрибут | Значения | По умолчанию | Зачем нужен |
|---|---|---|---|
| data-count | от 1 до 12 | 3 | Сколько карточек показать. |
| data-columns | 1, 2, 3 или 4 | авто* | Число колонок сетки на широком экране; на узком экране сетка сама схлопывается. |
| data-theme | light или dark | light | Оформление карточек под светлый или тёмный сайт. |
| data-order | recent или popular | recent | recent — последние по дате; popular — чаще всего открываемые расчёты. |
| data-target | _blank или _self | _blank | Как открывать подробный расчёт по клику на карточку. |
| data-base-url | URL сайта Finarmy | https://www.finarmy.ru | База для ссылок и запроса списка регионов/карточек. |
* Если data-columns не задан: при data-count ≥ 3 обычно 3 колонки, иначе по числу карточек.
Готовые примеры (скопируйте целиком)
Только тёмная тема у калькулятора:
<div id="finarmy-compensation-widget" class="finarmy-compensation-widget"
data-theme="dark"></div>
<script src="https://www.finarmy.ru/embed/compensation-calculator-widget.js" async></script>Карточки: тёмная тема, 4 штуки, сортировка по популярности, 2 колонки:
<div class="finarmy-compensation-cards"
data-count="4"
data-theme="dark"
data-order="popular"
data-columns="2"></div>
<script src="https://www.finarmy.ru/embed/compensation-cards-widget.js" async></script>Регионы РФ
Ставки за кв. метр подтягиваются из актуальной базы сайта.
Без backend
Статический HTML и два скрипта — готово к работе на любом хостинге.
Прозрачные ссылки
Пользователь завершает расчёт на Finarmy.ru — удобно и привычно.
Техническое демо всех embed-виджетов: finarmy.ru/embed/demo.html