Embeds & white-label

Any newspaper, NGO, or government microsite can carry a real, cited Futuros figure — value plus a source chip that deep-links to the primary source — with a single <iframe>. The honesty contract travels with the embed: an embed never shows a number without its provenance.

Three widget routes plus a builder:

Route	Renders
/embed/stat	One cited stat — big value + unit, signed delta chip, source chip, wordmark
/embed/chart	The same indicator as a small line chart (latest point labeled)
/embed/board	A responsive grid of several stat/chart panels — a whole dashboard in one iframe
/incrustar	The ES builder UI — pick options, preview live, copy the snippet

All embed routes are frameable cross-origin: vercel.json sets Content-Security-Policy: frame-ancestors * on /embed/(.*) (the rest of the site is X-Frame-Options: SAMEORIGIN). App chrome (nav, onboarding) no-ops under /embed, so the widget paints only itself.

/embed/stat and /embed/chart

Shared query parameters:

Param	Values	Default	Notes
param	pillar slug (salud, educacion, …)	salud	which pillar
iso	ISO3 (MEX, BRA, …)	MEX	uppercased automatically
indicator	indicator id	first indicator of the cell	pick a specific metric
theme	light | dark	dark
lang	es | en	es	embeds are ES/EN only (not PT)
accent	hex color #RGB–#RRGGBBAA	brand green	white-label accent (must match /^#[0-9a-fA-F]{3,8}$/)

The value, delta (vs. the 3-year mean), unit and source chip come from the same static cell payload the app uses; the source chip links to the indicator's primary source and the wordmark links back to the live atlas cell.

Minimal stat embed:

<iframe
  src="https://futuros.xyz/embed/stat?param=salud&iso=MEX&theme=light"
  width="320" height="180" style="border:0" loading="lazy"
  title="Futuros — Salud, México"></iframe>

White-labeled chart embed (custom accent, English, specific indicator):

<iframe
  src="https://futuros.xyz/embed/chart?param=educacion&iso=BRA&indicator=se_xpd_totl_gd_zs&theme=dark&lang=en&accent=%23004b87"
  width="360" height="240" style="border:0" loading="lazy"
  title="Futuros — Education spending, Brazil"></iframe>

Note the URL-encoded # (%23). Suggested sizes match the /incrustar builder: stat 320×180, chart 360×240.

/embed/board — multi-panel dashboard

One iframe renders a themed, responsive grid of stat/chart panels. A partner (IDB / CAF / CELAC) drops a single iframe and gets a whole dashboard, white-labeled with no code change.

Parameters:

Param	Values	Default	Notes
panels	comma-separated kind:param:iso[:indicator]	—	kind = stat | chart; up to 12 panels
theme	light | dark	dark	themes the shell and every panel
accent	hex color	—	passes through to every panel
brand	free text	Futuros	replaces the wordmark; footer reads "powered by Futuros ↗"
lang	es | en	es

Each panel spec is kind:param:iso[:indicator] — e.g. stat:salud:MEX or chart:educacion:BRA:se_xpd_totl_gd_zs. The board mounts each panel as a same-origin /embed/stat or /embed/chart iframe, forwarding theme, lang and accent.

A white-labeled country dashboard:

<iframe
  src="https://futuros.xyz/embed/board?panels=stat:salud:MEX,chart:educacion:MEX,stat:seguridad:MEX,chart:trabajo-economia:MEX&theme=light&accent=%23004b87&brand=IDB&lang=en"
  width="100%" height="640" style="border:0" loading="lazy"
  title="Futuros dashboard — México"></iframe>

If panels is empty the board shows a hint (?panels=stat:salud:MEX,chart:educacion:BRA) rather than a blank frame.

/incrustar — the builder

https://futuros.xyz/incrustar is the no-code builder for the single-widget embeds. Pick pillar, country, indicator, type (stat/chart) and theme; it shows a live iframe preview of the real cited value and gives you a copy-paste one-line snippet. The indicator dropdown is populated from the selected cell's actual indicators, so you only ever embed a metric that exists.

Framing & security

• Embed routes send Content-Security-Policy: frame-ancestors * — embeddable in any host page.
• All other routes send X-Frame-Options: SAMEORIGIN — the main app is not frameable off-origin.
• Embeds are pure GETs of static data; there is no auth and nothing to submit.
• Widgets are self-contained: theme is applied via inline CSS-variable overrides on the embed root (not a global class), so the same number reads correctly inside any host page.

The figures behind every embed are the same cited observations exposed by the Public API v1 — the embed is just a rendered, linkable view of one cell.