Встраиваемые виджеты: калькулятор на любом сайте, который приводит клиентов и ссылки

Задача

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

Делать такие инструменты для каждой компании отдельно дорого, а поддерживать правила субсидий и региональные данные в актуальном виде на десятках сайтов нереально. Задумка была в том, чтобы сделать их один раз, держать на одном сервере и дать любой компании отрасли поставить их на свой сайт, скопировав и вставив фрагмент кода. Для Estimia, которая их размещает, каждая установка должна была возвращать что-то обратно: видимую индексируемую ссылку на её сайт.

В нашем кейсе Estimia эти виджеты упомянуты в нескольких строках; здесь - как они устроены.

Калькулятор дилера с его собственными ценами

Главный виджет - профессиональный оконный калькулятор, тот же, которым дилеры пользуются внутри CRM Estimia, упакованный в веб-компонент, который работает на любом сайте. Компания добавляет на страницу файл стилей, скрипт и один тег <pvc-master>, и посетители получают полный редактор: шаблоны окон, деление и открывание створок, профили, стеклопакеты, цвета, подоконники и отливы, рольставни, москитные сетки и цену, которая пересчитывается с каждым изменением.

Цена - собственная цена компании. В рабочем режиме виджет загружает с платформы каталог и маржу этой компании в уже готовом виде, так что калькулятор на сайте считает ровно столько же, сколько посчитал бы менеджер в офисе. Когда посетитель нажимает “Запросить расчёт”, открывается короткая форма контактов, и собранные окна приходят в CRM компании новым заказом на первой стадии воронки - с пометкой, что он пришёл из виджета, и с адресом страницы, с которой его отправили. Менеджер открывает заказ, в котором окна уже описаны.

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

Чтобы стили виджета и сайта не ломали друг друга, все стили пакета ограничены собственным контейнером виджета, тёмная тема включается только явным атрибутом, а фирменный цвет задаётся одной CSS-переменной: виджет перенимает цвет компании, ничего больше на странице не задевая. 3D-просмотр во встраиваемую версию намеренно не входит, чтобы она оставалась лёгкой.

Есть и демо-режим без лицензии. Он работает на образцовом каталоге “Ваша компания”, а кнопка “Далее” сразу формирует фирменную смету в PDF и открывает её. Ничего не сохраняется. Именно эту версию установщики пробуют на странице Estimia для установщиков.

Калькулятор субсидий и вычета IRPF

Второй виджет отвечает на вопрос, с которого многие владельцы жилья в Испании теперь начинают: сколько мне вернут? Посетитель задаёт бюджет, указывает, чем для него является жильё - основным домом, сдаваемой квартирой, вторым домом или помещением для бизнеса, - выбирает провинцию и отмечает, есть ли у него энергетический сертификат. Виджет выводит короткий “чек”: стоимость проекта, сертификат, если он нужен, прямую субсидию, вычет IRPF с суммы, оставшейся после субсидии, сколько придётся заплатить сразу и реальную итоговую стоимость.

Правила следуют тому, как льготы применяются к окнам. Вычет положен за основное жильё или сдаваемую квартиру, но не за второй дом и не за коммерческие помещения; у Страны Басков и Наварры свои вычеты; субсидия не предлагается для коммерческих помещений и для проектов меньше минимальной суммы. “Чек” подписан как ориентировочная оценка, а не налоговая консультация, а ставки и лимиты хранятся на стороне Estimia, поэтому все сайты с виджетом обновляются сразу, как только они меняются.

Компания, которая ставит виджет, сама решает, как он выглядит и куда ведёт:

• Язык - испанский, английский или русский.
• Тема - светлая, тёмная или автоматическая; её можно переключать на лету вслед за переключателем темы на самом сайте.
• Закреплённая провинция - компания, работающая в одном регионе, закрепляет калькулятор за ним, и выбор провинции становится только для чтения.
• Бюджет - начальное значение и собственный диапазон ползунка.
• Фирменный цвет - одно значение в шестнадцатеричном виде, и под него подстраиваются ползунок, акценты и итоги.
• Свои кнопки - ссылки, вложенные в контейнер, становятся кнопками под результатом: форма заявки компании, WhatsApp или что угодно ещё.
• Автовысота - виджет работает в iframe и сообщает свою высоту, поэтому растёт вместе с содержимым и никогда не показывает внутреннюю полосу прокрутки.

Карта значений U и ориентировочных цен

Третий виджет - карта Испании, на которой можно нажать любую провинцию. В одном режиме провинции окрашены по максимальному значению U окна, которое там требует строительный кодекс; в другом - по климатической зоне CTE. По нажатию на провинцию открывается панель: зона, требуемое значение U, тип стеклопакета, который ему соответствует, и ориентировочная стоимость окна около 100×100 см с установкой - в энергоэффективном ПВХ, в типичном варианте и в алюминии с терморазрывом.

Эти цены условные, и виджет пишет об этом на каждой панели: они выведены из требования к значению U для зоны и не являются рыночным предложением. Кнопки на панели ведут посетителя на страницы самой компании.

Раздел “для разработчиков” как источник ссылок

У каждого виджета есть своя страница в разделе Estimia для разработчиков: фрагмент кода для быстрого старта, таблица всех параметров, полный живой пример со всеми включёнными параметрами, описание того, как всё устроено внутри, и условия использования. У бесплатных виджетов одно условие: видимая ссылка-атрибуция “Calculator provided by Estimia” остаётся на месте.

Загрузчик это проверяет. Перед запуском калькулятора он смотрит, есть ли ссылка на Estimia, видна ли она и не помечена ли nofollow; если ссылки нет или она скрыта, вместо калькулятора появляется короткое уведомление со ссылкой на инструкцию. В рекомендуемом фрагменте атрибуция идёт обычной ссылкой в HTML страницы, а не вставляется скриптом, чтобы поисковики видели её как настоящую ссылку. Виджет не ставит cookie на домене сайта и не собирает персональных данных, поэтому ничего не добавляет в баннер согласия.

Для компании, которая ставит виджет, это бесплатный и поддерживаемый инструмент. Для Estimia каждая установка - индексируемая ссылка с сайта той же отрасли. В разделе также анонсирован следующий виджет - встраиваемый 3D-калькулятор цены; он помечен как “скоро”.

Работает на сайте Ventanas Fraktal

Ventanas Fraktal - оконная компания со своим сайтом - использует калькулятор субсидий на своей странице о льготах. Калькулятор приходит от Estimia, а кнопки под результатом - свои: связаться, WhatsApp и ссылка на руководство компании по субсидиям на окна; строка атрибуции стоит под ним обычной ссылкой. Ниже Fraktal публикует собственную пошаговую статью о том, как оформить субсидию и вычет. Посетитель получает ответ, не уходя с сайта Fraktal.

Технологии

- Калькулятор дилера: веб-компонент на React 19 (light DOM, изолированные стили), сборка Vite
- API платформы: Laravel (конфигурация каталога, лицензии с привязкой к домену, заявки в CRM)
- PDF: демо-смета формируется платформой мгновенно, без сохранения
- Публичные виджеты: компоненты Svelte 5 на сайте Astro, встраиваются через iframe
- Загрузчик: небольшой асинхронный скрипт с проверкой атрибуции и автовысотой через postMessage
- Данные: провинции, климатические зоны CTE и предельные значения U, правила субсидий и IRPF
- Хостинг: Cloudflare Pages (estimia.es), приложение платформы - для пакета дилера
- Языки: испанский, английский, русский

Результат

Оконная компания может за несколько минут поставить на свой сайт работающий калькулятор: собственный конфигуратор с ценами, лицензированный на её домен и отправляющий готовые заказы в её CRM, или бесплатные инструменты для самых частых вопросов посетителей - субсидий, вычетов и требований норм в их провинции. Инструменты делаются и поддерживаются один раз и одинаково работают на всех сайтах, а каждая бесплатная установка даёт Estimia ссылку с сайта той же отрасли.