Калькуляторы Calcup можно встраивать на свои сайты

Зачем калькулятору жить за пределами Calcup

У калькулятора часто есть аудитория за пределами нашего домена. Финансовый блог обсуждает ставки и платежи, риелтор объясняет клиенту схему ежемесячных выплат, преподаватель собирает материал для курса, владелец небольшого сайта помогает посетителям прикинуть собственный сценарий. Каждый раз мы видели один и тот же сценарий: человек хочет показать живой расчёт прямо на своей странице, а не давать ссылку и надеяться, что читатель кликнет.

Поэтому первой задачей встраивания мы поставили простую вещь. Партнёр должен суметь добавить полностью рабочий калькулятор Calcup на свою страницу за пару кликов и без серверной части. Никаких ключей, никакой регистрации, никаких отдельных админок. Только обычный фрагмент HTML, который вставляется в любую CMS или статический сайт.

Решение получилось намеренно скучным

Мы перебирали разные варианты. Свой web-component с кастомным элементом смотрится красиво, но требует поддержки версионирования, конфликтует с CSS на чужой странице и тащит лишний рантайм. JS-сниппет добавляет ещё одну точку отказа и зависит от того, какой бандлер у партнёра. Любой backend усложняет приватность и заставляет калькулятор зависеть от чужой инфраструктуры.

В итоге первый шаг сделали самым простым из возможных: режим встраивания включается обычным query-параметром у того же URL, который мы уже умеем рендерить. Страница `/finance/credit?embed=1` отдаёт чистый калькулятор без шапки, футера, поиска и блоков статей. Партнёр получает iframe со ссылкой на этот URL и вставляет его на сайт.

Такой подход упрощает обновления. Когда мы доводим формулу или меняем дизайн на основном сайте, встроенный калькулятор обновляется одновременно. Никаких отдельных версий и сборок виджета не существует.

Состояние формы переносится той же ссылкой, что и шеринг

Раньше у Calcup появилась общая механика «поделиться расчётом» через параметр `state` с закодированным input. Для встраивания мы переиспользовали ту же механику. Если в модалке встраивания включить опцию «передать текущие значения», в код виджета добавится payload, и партнёр сможет вставить калькулятор сразу с предзаполненными вводами.

Это решает реальные сценарии. Финансовый автор показывает пример с конкретной суммой и сроком. Сервис подбора ипотеки встраивает виджет с предложенной ставкой. Клиент открывает страницу и видит уже знакомый сценарий, а не пустую форму. При этом ссылка остаётся честной: payload несёт только введённые значения, результат всегда пересчитывается актуальной формулой на стороне калькулятора.

Высоту iframe умеет подстроить отдельный маленький скрипт

Самая неприятная техническая деталь iframe — высота. У встроенного калькулятора она зависит от введённых данных, открытой таблицы графика, ширины контейнера. Если жёстко задать `height`, появляется или пустое пространство, или внутренний скролл.

Мы решили это так. По умолчанию виджет встаёт в фиксированную высоту, и этого хватает для обычной формы и блока результата. Если партнёру важно, чтобы виджет «жил» вместе с контентом, в сниппет можно добавить небольшой опциональный скрипт `embed-resize.js`. Он слушает сообщения от калькулятора и подстраивает высоту iframe автоматически. Скрипт никак не общается обратно: команды от родительской страницы виджету не проходят, чтобы держать поверхность атаки минимальной.

Пилот сделали на кредитном калькуляторе

Кредит выбран не случайно. Это сложная форма с суммой, ставкой, сроком, датами и режимом досрочного погашения, есть таблица графика и заметный блок результата. Если встраивание уверенно работает на нём, остальные финансовые и бытовые калькуляторы переживут шаблонную миграцию.

В режиме встраивания у кредитного калькулятора результат поднимается наверх. Человек, попавший на партнёрский сайт, сразу видит платёж и переплату, а уже под ними может крутить параметры и смотреть, как меняется график. Это другой акцент по сравнению с основной страницей Calcup, где сначала идут условия и сценарии, а сводка живёт сбоку. На странице `/finance/credit` мы оставили привычный layout, в эмбеде сделали более лаконичный.

Шапку Calcup, футер, FAQ, статью методологии и связанные калькуляторы из эмбеда убрали целиком. Они полезны на основном сайте для контекста и SEO, но в чужом окружении только шумят и мешают читать партнёрскую страницу.

Что планируется дальше

Сейчас встраивание включено только для кредитного калькулятора. Дальнейший план — постепенно прокатить ту же кнопку «встроить на сайт» по остальным финансовым калькуляторам, потом по строительным, конвертерам и бытовым. У большинства калькуляторов уже есть готовая прослойка шеринга, поэтому их подключение к встраиванию — это узкая, повторяемая работа, а не отдельная архитектура.

В долгосрочном плане появится автоматическое встраивание для всех калькуляторов на унифицированном view, чтобы кнопка «встроить» была везде по умолчанию. Кастомные страницы вроде ипотеки или зарплатного калькулятора подключатся вручную, как и кредит. Когда волна закончится, любой калькулятор Calcup можно будет поставить на свой сайт за пару кликов в одной общей модалке.

Если вы уже попробовали встроить калькулятор и нашли ошибку, неудобное поведение или просто хотите предложить сценарий для следующей волны, оставьте сообщение через форму обратной связи. Для нас особенно полезны ссылка на страницу, куда вставлен виджет, и короткое описание того, что пошло не так или чего не хватает.