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