Embed the Window Cost & Savings Map on your website

A free widget for window, door and renovation websites in Spain. Your visitors click their province and see the U-value the building code demands there, the glazing that meets it and an illustrative installed cost — the samemap that runs on Estimia, kept up to date by us, served from our infrastructure.

Quick start

Paste this where the map should appear. That's the whole integration — no API key, no build step, no cookies on your domain.

<!-- Estimia — Window Cost & Savings Map -->
<div class="estimia-widget-container">
  <div data-estimia-widget="savings-map" data-lang="es"></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/es/herramientas/mapa-ahorro/" 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>

Options

Attribute	Values	What it does
`data-lang`	"es" (default) · "en" · "ru"	Language of the map UI and of the attribution line.
`data-theme`	"light" (default) · "dark" · "auto"	"auto" follows the visitor’s OS preference. Pick the value that matches your site — the widget has no chrome of its own, so it blends in.
`data-province`	province slug, e.g. "madrid"	Preselects the province whose detail panel opens first — visitors can still click any other province. Slugs are the lowercase, accent-stripped province names. Unknown slugs are ignored. All supported values 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`	on child <a> links (up to 4)	Your own action buttons in the province panel — they replace the widget’s default “Price your windows” and “Installers in …” pair. Put links marked data-estimia-cta inside the container (not on the container itself); the first renders as the solid primary button, the rest outlined. Relative URLs resolve against your page and clicks open in the top window on your site; only http/https targets are accepted.

Full example — live

Every option in one snippet: a Valencia company whose site follows the visitor's theme, opens on its own province and puts its own two buttons in the province panel. The widget below is rendered from exactly this markup — resize the window or click provinces; the iframe height adjusts itself via postMessage, so it never shows scrollbars.

<!-- A Valencia company: theme-following site, its own province opened first, own buttons -->
<div class="estimia-widget-container">
  <div
    data-estimia-widget="savings-map"
    data-lang="en"
    data-theme="auto"
    data-province="valencia"
  >
    <a data-estimia-cta href="/get-a-quote/">Get my free quote</a>
    <a data-estimia-cta href="/contact/">Talk to an advisor</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/en/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>

Get my free quote Talk to an advisor

Map provided by Estimia

How it works under the hood

The loader (/widget/savings-map.js, ~2 KB) finds every container withdata-estimia-widget="savings-map" and replaces its content with a lazy, borderless iframe pointing atestimia.es/embed/savings-map/.
The embed page reports its rendered height to your page on every layout change; the loader sizes the iframe accordingly (origin-checked postMessage).
A built-in spinner overlays the frame until the map reports it has rendered, so visitors never stare at a blank rectangle on slow connections.
Your own buttons (the CTA slot) and the map's links open in the top window — your page never navigates inside the frame.
The credit line is a plain static<a> in the snippet, a sibling of the widget div inside estimia-widget-container. The loader never touches it, so it stays in the HTML for crawlers and no-JS visitors and passes real link weight. Only when that wrapper is absent does the loader inject its own fallback credit.
Dynamic pages: if you inject containers after load (SPA routing), callwindow.EstimiaWidgets.scan() to initialise them.
Sites with their own light/dark toggle: callwindow.EstimiaWidgets.setTheme('dark' | 'light' | 'auto')from your toggle handler and every widget on the page follows instantly —data-theme only sets the initial state. The demo above does exactly this.

Terms of use

This widget is free — no traffic limits, no account — for any website related to windows, doors, renovation or real estate. In return, every embed keeps the small visible credit — “Map provided by Estimia” — as the static, followable link shipped in the snippet. That backlink is what keeps the widget free, so it is enforced: the loader checks for a visible, followed link to Estimia before it loads the map, and if the credit is missing, hidden or set to nofollow, the map doesn't launch — a short notice appears in its place instead. Terms are per widget: some future Estimia widgets will be paid, and each states its own terms on its page.

Embedding — quick answers

Will the widget slow my site down or hurt Core Web Vitals?

No. Your page ships only the ~2 KB loader, loaded async so it never blocks rendering. The map itself — its JavaScript, CSS, fonts and data — runs inside a lazy iframe served from estimia.es, so it competes with none of your assets. The loader sizes the frame from the height the map reports, so it adds no layout shift (CLS).

Does the widget use cookies or need a GDPR consent banner?

No. The widget sets no cookies on your domain and collects no personal data from your visitors, so it adds no consent requirement on your side and never pops a cookie dialog on someone else’s site. The only measurement is Estimia’s cookieless, aggregate page-view analytics, used to count how often the widget loads per host.

Do the U-value limits and cost figures stay up to date?

Yes, automatically. The per-province climate zones, U-value limits and illustrative costs live on Estimia’s side, and every embed reflects the latest figures the moment they are published. The snippet you pasted never changes, so there is nothing to maintain when the building code or the market does.

Where do the U-values and costs come from — are they official?

The climate zones and the maximum window U-value per province are the Spanish building code’s own tables — CTE DB-HE1, the transposition of the EU’s EPBD rules (Directive (EU) 2024/1275). The costs are illustrative installed prices per ~100×100 cm unit that Estimia derives from what a window meeting each zone’s U-value requirement typically costs — clearly labelled as code-derived estimates, not market quotes.

How do I embed it in WordPress, Wix, Squarespace or Webflow?

Paste the snippet into any block that accepts raw HTML — a Custom HTML block in WordPress/Gutenberg, an Embed element in Wix, a Code block in Squarespace or an Embed in Webflow. No plugin is required. If your platform injects content after load (SPA routing), call window.EstimiaWidgets.scan() to initialise any containers added later.

My site sends a Content-Security-Policy — what do I allow?

Allow estimia.es in two directives: script-src (or script-src-elem) for the ~2 KB loader, and frame-src for the iframe it inserts. Nothing else is loaded on your origin, so those two entries are all the widget needs.