DOCS · CONFIGURATOR

Build your embed code

Pick the calculators you want, arrange them into a page, set a currency, a language and your own accent — then copy the code for the site you already have, or share the link so somebody else can look at it first. Nothing is saved and nothing is uploaded: the whole arrangement lives in the link.

In a hurry? The guide has five ready-made arrangements — buying a home, paying off what you owe, retirement, moving country, starting something. Open one, then bring it back here to change it.

1Choose
2Arrange

The width is of the row, in twelfths. Anything narrower than a full width sits beside its neighbours on a wide screen and stacks on a phone.

Tick a calculator above and it appears here to be placed.

    3How it should look and read

    The page

    One frame holding the whole page, which is exactly what the code below produces — four calculators composed like this cost 346 KB of JavaScript against 1,242 KB as four separate embeds, because four frames is four copies of React.

    Copy the code

    One container and one script. The whole page is a single widget, so it is a single frame. 

     

    The figures come from the preview. Move a slider up there and it appears here as its own attribute — data-mortgage.price="600000" — with the calculator's name in front, which is what says which one you mean when several share a parameter. Until you move something the code carries none, so a page you have not tuned stays short. You can write them by hand too: any parameter from a calculator's own section works, and the guide explains why a bare name reaches nobody here.

    Want your own headings between the calculators? Then they have to be separate frames, which costs a copy of React each — this is the same page that way, and you size the frames yourself (how). 

     

    Or share it

    The link opens the page itself — the calculators you chose, in your order, at your widths, in your currency, language, theme and colour. It is the same address the preview above is showing and the same one your embed code frames, so what you send somebody is the thing, not the form that made it. Nothing is stored on our side: the whole arrangement is in the address. Your licence is deliberately left out, because a link is a thing people forward.

    It carries the figures the preview is showing. Tune the calculators above to the case you want somebody to see, and the link opens on exactly that — the whole point of sending one rather than saying "go and put your own numbers in". Each widget in the preview has its own Share these figures link too, for the same address.

    Want to carry on changing it later, or hand the settings to a colleague to change? That link reopens this form with the same arrangement — the arrangement and the settings, not the figures, because those belong to the preview.

    What comes with it

    • Nothing your visitors type reaches us: the figures stay in their browser, and no cookie or storage is set. The frame is loaded from valnivo.eu, so our host sees that request as any server does, as our privacy notice describes — your own notice may need to mention it.
    • The line saying a figure is an illustration and not advice stays inside the frame, on every tier. No parameter removes it.
    • No product, fund, account or provider may be placed beside a calculator as if it were the answer — the conditions of use in full.
    • Valnivo is an early-stage service: features may change or be withdrawn, and it is provided as it is.