DOCS · UPDATED 7 SEPTEMBER 2026 · PREVIEW

Put a Valnivo widget on your site

Five pieces of the app, each one an iframe on your page: a projection, a what-if, a goal, a cross-border salary, an inflation table. Your visitor moves the sliders and sees the answer. No account, no key, and nothing about them reaches us.

Status: preview. All five work today at the addresses given, and Valnivo itself is still in testing and not yet intended for public use. Treat them as something to try and to tell us about rather than something to put in front of paying customers this week — and let us know before you rely on one, so we can warn you before anything about it changes.

§ Two lines, and you are done

<iframe
  src="https://valnivo.eu/embed/projection.html?currency=EUR&locale=fr-LU"
  title="Valnivo projection"
  loading="lazy"
  style="width:100%;border:0;height:420px"
></iframe>

Swap projection for any widget below. Each one is running further down this page, in exactly that iframe, with exactly the parameters shown beside it — so what you see is what you get when you copy the line.

§ Parameters every widget takes

Name	What it does	Default
`currency`	Any ISO 4217 code — the currency figures are shown in. It changes the labels, not the arithmetic: nothing is converted except where a widget says so.	`EUR`
`locale`	A BCP 47 tag (`fr-LU`, `de-CH`, `en-GB`…) deciding how numbers are grouped and where the currency symbol sits. An unusable tag falls back rather than failing.	`en-GB`

Unknown parameters are ignored, and a number outside a widget's range is clamped into it rather than breaking the page. A name added here later cannot break an embed that does not use it.

§ The five widgets

1 · Projection live

Two sliders — what you have today, what you put aside each month — and the total after 10, 20 and 30 years in both future and today's prices, with the return and inflation assumptions on screen and adjustable.

live · projection

Move the controls — it is the real widget, not a picture.

https://valnivo.eu/embed/projection.html?currency=EUR&locale=fr-LU

Message name: projection. No parameters beyond the two above.

2 · What if one thing changed? live

Two futures from one starting point: the one you are on, and the one where a single habit changes — put aside more, put aside less, or stop altogether. The difference is stated in both nominal and today's prices, over 10, 20 or 30 years.

live · scenario

Move the controls — it is the real widget, not a picture.

https://valnivo.eu/embed/scenario.html?currency=EUR&locale=fr-LU&have=20000&monthly=500&change=200&years=20

Name	What it does	Range	Default
`have`	Starting pot, in whole units.	0–200 000	20 000
`monthly`	What goes aside each month to begin with.	0–3 000	500
`change`	The size of the change being tried, per month.	0–1 000	200
`years`	Which of the three horizons opens selected.	10, 20 or 30	20

Message name: scenario.

3 · What would it take? live

A goal read backwards: an amount, a number of years, what you have towards it, and the monthly figure that gets there — plus how much of the total is what you put in and how much is growth. It says "nothing" when the pot already grows past the target on its own, which is the honest answer.

live · goal

Move the controls — it is the real widget, not a picture.

https://valnivo.eu/embed/goal.html?currency=EUR&locale=fr-LU&target=50000&have=5000&years=10

Name	What it does	Range	Default
`target`	The figure being aimed at, in whole units.	1 000–500 000	50 000
`have`	What is already there.	0–200 000	5 000
`years`	How long there is.	1–40	10

Message name: goal.

4 · Pay across a border live

A monthly salary in one country, in another country's money, and what each country's own inflation does to it over time. Thirty-seven countries, from Valnivo's bundled reference table.

live · crossborder

Move the controls — it is the real widget, not a picture.

https://valnivo.eu/embed/crossborder.html?locale=fr-LU&from=LU&to=PT&amount=4000&years=10

Name	What it does	Range	Default
`from`	Where the salary is paid — ISO 3166-1 alpha-2.	Any curated country	`LU`
`to`	Where it is being lived on.	Any curated country	`PT`
`amount`	Monthly pay, in the origin country's currency.	500–20 000	4 000
`years`	How far ahead to show the inflation effect.	1–30	10

Message name: crossborder. currency is ignored here — each side is shown in its own money.

What this one is not. It does not compare the cost of living, and it says so on screen. Rent, tax, childcare and groceries differ between two countries far more than the conversion does, and Valnivo holds no price-level or purchasing-power data to put a number on that. Please do not present it as a "should I move?" calculator.

5 · Inflation by country live

The inflation figures Valnivo actually projects with — the current rate and the long-run rate it glides to — for all thirty-seven curated countries, searchable, with what they do to a fixed sum over time.

live · inflation

Six countries here, so the preview stays short; leave countries off and you get all thirty-seven. Try the search.

https://valnivo.eu/embed/inflation.html?currency=EUR&locale=fr-LU&countries=LU,BE,FR,DE&sum=1000&years=10

Name	What it does	Range	Default
`countries`	A comma-separated list of alpha-2 codes, in your order. Omit it for all of them.	Any curated codes	all
`sum`	The sum whose purchasing power is shown.	1–1 000 000	1 000
`years`	Over how many years.	1–30	10

Message name: inflation. The figures are the bundled reference table with its date shown; a widget never fetches a live figure, so a table on your page cannot change under you. All thirty-seven rows come to roughly 2 000px, so pass countries= unless you want the full list.

§ Letting a widget size itself

An iframe cannot grow to fit its contents, and these get taller as panels open. Each posts its height to your page whenever it changes; apply it and the frame follows, up or down:

<iframe id="valnivo" src="https://valnivo.eu/embed/scenario.html?currency=EUR&locale=fr-LU"
        title="Valnivo what-if" loading="lazy" style="width:100%;border:0;height:420px"></iframe>
<script>
  addEventListener('message', function (e) {
    if (e.origin !== 'https://valnivo.eu') return
    if (!e.data || e.data.source !== 'valnivo' || e.data.widget !== 'scenario') return
    document.getElementById('valnivo').style.height = e.data.height + 'px'
  })
</script>

The message is { source: 'valnivo', widget: '<name>', height: <pixels> } and carries nothing else — no figures, no identifiers. The widget name is given with each widget above, so a page can embed several and tell them apart.

Check e.origin. Any page in any frame can post a message to yours. That one line is what stops you resizing on a stranger's word. The previews on this page do the same thing, except that they compare against location.origin, because here the page and the widgets share an origin and on your site they will not.

§ Fitting your design

A widget's background is transparent, so it takes the colour of whatever you put behind it. Everything else — type, spacing, the accent on projected figures — is Valnivo's, and it stays Valnivo's for now.
They are responsive from about 320px wide. Give one the width you have; it will lay itself out.
Set an initial height of roughly 420px so there is no jump before the first message arrives. It does not have to be right — the widget reports its real height as soon as it has painted.
The widgets are dark, as the app is. On a light page they read as a panel; that is how the previews above sit on this one.
A light theme and an accent colour you can set are on the list below, not built.

§ What it does with your visitor's data

Nothing at all, and that is a design rule rather than a coincidence. A widget:

keeps no account and asks for nothing;
writes no cookie and no localStorage, so it needs no consent banner from you on our behalf;
makes no request of its own once loaded — the numbers are computed in the browser;
runs no analytics and no advertising, ever.

Your visitor's browser does fetch the widget from valnivo.eu, which — like any request to any server — means our host sees an IP address and the usual request details. That is the whole extent of it. Our privacy notice says what happens to those. If a future widget ever stores or sends something about a visitor, this page will say so plainly and there will be an agreement to sign before you can use it; it will not change quietly under an existing embed.

§ Conditions of use

A projection is an illustration built on assumptions, and every widget says so inside the frame. Please leave that visible — do not overlay it, clip it out, or place a widget so that the line reads as your own recommendation. Two things follow from the same rule:

No product beside it as if it were the answer. A widget shows a visitor's own figures under their own assumptions. It never names, ranks or compares a fund, account, policy or provider, and it must not be framed as advice, a recommendation or a suitability assessment — yours or ours. Valnivo is a planning tool, not a regulated financial service; see the terms of use.
Do not present it as your own calculation. Say it comes from Valnivo if the context could suggest otherwise. You are welcome to link to valnivo.eu.

§ Changes, and what will not break

Parameters and messages are additive. New ones may appear; the ones documented here keep working with the same meaning.
A breaking change gets a new address (/embed/v2/projection.html), and the old one keeps working. Your page will not be changed underneath you.
Widgets are served from our origin, so improvements and fixes reach every embed without you doing anything. That is the trade for not shipping you a file to host.
Embedding is free while Valnivo is in beta, as the app is. If that ever changes, this page says so first.

§ Still to come

Not built yet. Tell us which is worth doing first.

A loader script planned so one line replaces the iframe and the resize listener.
A light theme and an accent colour planned you can set, so a widget matches your page rather than only sitting on it.
An npm package planned for React and Vue projects that would rather import a component than frame a page.
A shared read-only plan later: a link that opens a widget on figures somebody already entered. The first one where a visitor's numbers would leave their browser, so it will not ship before the agreement and notice that go with it.
Per-site keys with an allowed-origins list later, only once a widget needs one.

§ If something is wrong

Write to kabiljbeli011@gmail.com with the page you embedded it on and what you saw, or open an issue in the public feedback repository — that one is public, so keep anything private for the email.