Встройте Карту стоимости и экономии на окнах на свой сайт

Бесплатный виджет для сайтов об окнах, дверях и ремонте в Испании. Ваши посетители нажимают свою провинцию и видят U-значение, которого там требует строительный код, остекление, которое ему соответствует, и ориентировочную стоимость установки — та жекарта, что работает на Estimia, обновляемая нами и отдаваемая с нашей инфраструктуры.

Быстрый старт

Вставьте это туда, где должна появиться карта. Это вся интеграция — без ключа API, без шага сборки, без cookies на вашем домене.

<!-- Estimia — Карта стоимости и экономии на окнах -->
<div class="estimia-widget-container">
  <div data-estimia-widget="savings-map" data-lang="ru"></div>
  <script async src="https://estimia.es/widget/savings-map.js"></script>
  <div style="font-family:sans-serif;font-size:12px;text-align:right;margin-top:6px;">
    <a href="https://estimia.es/ru/tools/savings-map/" target="_blank"
       style="display:inline-flex;align-items:center;gap:5px;color:inherit;font-weight:600;text-decoration:none;">
      <img src="https://estimia.es/assets/images/favicons/favicon.svg" alt="Estimia" width="14" height="14" />
      Map provided by Estimia
    </a>
  </div>
</div>

Опции

АтрибутЗначенияЧто делает
data-lang"es" (по умолчанию) · "en" · "ru"Язык интерфейса карты и строки атрибуции.
data-theme"light" (по умолчанию) · "dark" · "auto""auto" следует настройке ОС посетителя. Выберите значение под свой сайт — у виджета нет собственного оформления, поэтому он вписывается.
data-provinceslug провинции, напр. "madrid"Предвыбирает провинцию, панель которой открывается первой — посетители по-прежнему могут нажать любую другую. Slug — это названия провинций в нижнем регистре без диакритики. Неизвестные slug игнорируются.
Все поддерживаемые значения

Andalucía: almeria cadiz cordoba granada huelva jaen malaga sevilla

Aragón: huesca teruel zaragoza

Principado de Asturias: asturias

Illes Balears: baleares

Canarias: las-palmas santa-cruz-de-tenerife

Cantabria: cantabria

Castilla-La Mancha: albacete ciudad-real cuenca guadalajara toledo

Castilla y León: avila burgos leon palencia salamanca segovia soria valladolid zamora

Cataluña: barcelona girona lleida tarragona

Comunitat Valenciana: alicante castellon valencia

Extremadura: badajoz caceres

Galicia: a-coruna lugo ourense pontevedra

Comunidad de Madrid: madrid

Región de Murcia: murcia

Comunidad Foral de Navarra: navarra

País Vasco: araba bizkaia gipuzkoa

La Rioja: la-rioja

Ceuta: ceuta

Melilla: melilla

data-estimia-ctaна дочерних ссылках <a> (до 4)Ваши собственные кнопки действия в панели провинции — они заменяют пару кнопок виджета по умолчанию («Рассчитать окна» и «Установщики в …»). Поместите ссылки с data-estimia-cta внутрь контейнера (не на сам контейнер); первая отрисуется как сплошная основная кнопка, остальные — с контуром. Относительные URL разрешаются относительно вашей страницы, а клики открываются в верхнем окне на вашем сайте; принимаются только http/https-адреса.

Полный пример — вживую

Все опции в одном фрагменте: компания из Валенсии, чей сайт следует теме посетителя, открывает свою провинцию и ставит свои две кнопки в панель провинции. Виджет ниже отрисован ровно из этого markup — измените размер окна или нажимайте провинции; высота iframe подстраивается сама через postMessage, поэтому полос прокрутки не появляется.

<!-- Компания из Валенсии: сайт следует теме посетителя, своя провинция открыта первой, свои кнопки -->
<div class="estimia-widget-container">
  <div
    data-estimia-widget="savings-map"
    data-lang="ru"
    data-theme="auto"
    data-province="valencia"
  >
    <a data-estimia-cta href="/quote/">Получить бесплатный расчёт</a>
    <a data-estimia-cta href="/contact/">Связаться с консультантом</a>
  </div>
  <script async src="https://estimia.es/widget/savings-map.js"></script>
  <div style="font-family:sans-serif;font-size:12px;text-align:right;margin-top:6px;">
    <a href="https://estimia.es/ru/tools/savings-map/" target="_blank"
       style="display:inline-flex;align-items:center;gap:5px;color:inherit;font-weight:600;text-decoration:none;">
      <img src="https://estimia.es/assets/images/favicons/favicon.svg" alt="Estimia" width="14" height="14" />
      Map provided by Estimia
    </a>
  </div>
</div>

Как это устроено внутри

  • Loader (/widget/savings-map.js, ~2 КБ) находит каждый контейнер сdata-estimia-widget="savings-map" и заменяет его содержимое отложенным iframe без рамок, указывающим наestimia.es/embed/savings-map/.
  • Страница embed сообщает вашей странице свою отрисованную высоту при каждом изменении макета; loader задаёт размер iframe соответственно (postMessage с проверкой источника).
  • Встроенный спиннер перекрывает iframe, пока карта не сообщит, что отрисовалась, поэтому на медленных соединениях посетители никогда не смотрят на пустой прямоугольник.
  • Ваши собственные кнопки (слот CTA) и ссылки внутри карты открываются в верхнем окне — ваша страница никогда не переходит внутри iframe.
  • Строка кредита — это простой статический<a> во фрагменте, сосед div виджета внутриestimia-widget-container. Loader его никогда не трогает, поэтому он остаётся в HTML для краулеров и посетителей без JS и передаёт реальный вес ссылки. Только когда этой обёртки нет, loader вставляет собственный резервный кредит.
  • Динамические страницы: если вы вставляете контейнеры после загрузки (SPA-роутинг), вызовитеwindow.EstimiaWidgets.scan(), чтобы их инициализировать.
  • Сайты со своим переключателем светлой/тёмной темы: вызовитеwindow.EstimiaWidgets.setTheme('dark' | 'light' | 'auto')из обработчика вашего переключателя, и каждый виджет на странице мгновенно последует за ним —data-theme задаёт только начальное состояние. Демо выше делает именно это.

Условия использования

Этот виджет бесплатен — без лимитов трафика, без аккаунта — для любого сайта, связанного с окнами, дверями, ремонтом или недвижимостью. Взамен каждое встраивание сохраняет небольшой видимый кредит — «Map provided by Estimia» — как статическую, индексируемую ссылку, поставляемую во фрагменте. Этот бэклинк и делает виджет бесплатным, поэтому он обязателен: loader проверяет наличие видимой, индексируемой ссылки на Estimia перед загрузкой карты, и если кредит отсутствует, скрыт или помечен nofollow, карта не запускается — вместо неё появляется краткое уведомление. Условия — для каждого виджета: некоторые будущие виджеты Estimia будут платными, и каждый указывает свои условия на своей странице.

Встраивание — быстрые ответы

Замедлит ли виджет мой сайт или ухудшит Core Web Vitals?

Нет. Ваша страница подгружает только loader ~2 КБ, асинхронно, так что он никогда не блокирует отрисовку. Сама карта — её JavaScript, CSS, шрифты и данные — работает внутри отложенного iframe, отдаваемого с estimia.es, поэтому не конкурирует ни с одним из ваших ресурсов. Loader задаёт размер iframe по высоте, которую сообщает карта, поэтому не добавляет сдвига макета (CLS).

Использует ли виджет cookies и нужен ли баннер согласия GDPR?

Нет. Виджет не ставит cookies на вашем домене и не собирает персональные данные ваших посетителей, поэтому не добавляет требования о согласии с вашей стороны и никогда не показывает диалог cookies на чужом сайте. Единственное измерение — агрегированная аналитика просмотров Estimia без cookies, используемая для подсчёта, как часто виджет загружается по каждому хосту.

Остаются ли лимиты U-значения и цифры стоимости актуальными?

Да, автоматически. Климатические зоны по провинциям, лимиты U-значения и ориентировочные стоимости хранятся на стороне Estimia, и каждое встраивание отражает последние опубликованные цифры в тот же момент. Вставленный вами фрагмент никогда не меняется, поэтому при изменении строительного кода или рынка обслуживать нечего.

Откуда берутся U-значения и стоимости — они официальные?

Климатические зоны и максимальное U-значение окна по провинциям — это собственные таблицы испанского строительного кода — CTE DB-HE1, транспозиция правил EPBD ЕС (Директива (ЕС) 2024/1275). Стоимости — это ориентировочные цены установки за единицу ~100×100 см, которые Estimia выводит из того, сколько обычно стоит окно, отвечающее требованию U-значения каждой зоны — они явно помечены как оценки на основе норм, а не рыночные предложения.

Как встроить его в WordPress, Wix, Squarespace или Webflow?

Вставьте фрагмент в любой блок, принимающий необработанный HTML — блок Custom HTML в WordPress/Gutenberg, элемент Embed в Wix, блок кода в Squarespace или Embed в Webflow. Плагин не нужен. Если ваша платформа вставляет контент после загрузки (SPA-роутинг), вызовите window.EstimiaWidgets.scan(), чтобы инициализировать добавленные позже контейнеры.

Мой сайт отправляет Content-Security-Policy — что разрешить?

Разрешите estimia.es в двух директивах: script-src (или script-src-elem) для loader ~2 КБ и frame-src для вставляемого им iframe. Больше на вашем источнике ничего не загружается, поэтому этих двух записей виджету достаточно.