Loan Indication Widget

Call POST /v1/quotes/cost/preview with a quote total to get indicative monthly payments and widget URLs. See the API reference for the full request and response schema. Every successful response includes links.loanIndicationWidget with two ready-to-use URLs: Example response: acme represents your organisation slug.

{
  "links": {
    "loanIndicationWidget": {
      "png": "https://acme.app.prets.io/widgets/financing-snapshot/png?amount=12500",
      "url": "https://acme.app.prets.io/widgets/financing-snapshot?amount=12500"
    }
  }
}

Both URLs have the amount query parameter set to the totalInclTax from the request — the exact total the customer is financing. They are ready to use as-is. Do not hardcode a fixed amount; always use the value returned by the API. The links use the 15-year default. Append preferred-loan-term to show the customer’s chosen term — see Loan term. When you render representative examples from data.representativeExamples (in custom UI or alongside a widget), display the mandatory text_warning from data.content prominently — for example “Let op! Geld lenen kost geld”.

Option	What it is	Best for
Screenshot	Static PNG image rendered on-demand by Prets	Email quotes, PDF attachments, CMS pages
Financing Snapshot	Live embedded widget showing 3 financing cards at a fixed amount	Web pages where you want to show financing options without interaction
Financing Explorer	Live embedded widget with interactive loan amount, down payment, and duration controls	Web pages where customers should explore different financing scenarios before clicking through to onboarding
Offer Comparison	Live table of three indicative offers (two market options plus SVn when a postal code is known)	Product pages and quote flows that should compare lenders at a fixed amount
Warmtefonds loan banner	Strip for the non-zero Nationaal Warmtefonds offer. Amount from `data-amount` (defaults to € 10.000). Term defaults to 15 years. The info icon does nothing	A fixed financing line on a page. Open your own dialog on click
Credit table	The table for that dialog: same non-zero Warmtefonds offer. Amount from `data-amount` (defaults to € 10.000). Term defaults to 15 years	Inside a dialog you build yourself

Screenshot

Use links.loanIndicationWidget.png directly in an <img> tag: Example: Replace the src with the URL returned for your quote.

<img
  src="https://acme.app.prets.io/widgets/financing-snapshot/png?amount=12500"
  alt="Indicatieve financieringskosten"
  width="600"
/>

The image is rendered on-demand by Prets. You do not need to generate or host it yourself.

Financing Snapshot

Drop a single <script> tag where you want the widget to appear. Set src to your Prets domain — no CDN setup needed. Use the amount from links.loanIndicationWidget.url. Example: Replace acme with your organisation slug and 12500 with the financed total.

<script
  src="https://acme.app.prets.io/embed/widgets/financing-snapshot.js"
  data-amount="12500">
</script>

The script injects an iframe that displays 3 financing cards for the given amount. The iframe resizes automatically to fit its content. Set data-amount to the totalInclTax from the quote.

Financing Explorer

The Financing Explorer adds interactive controls so customers can adjust the loan amount, down payment, and loan duration before clicking through to onboarding. Example: Replace acme with your organisation slug and set data-amount to the financed total.

<script
  src="https://acme.app.prets.io/embed/widgets/financing-explorer.js"
  data-amount="12500">
</script>

Set data-amount to the totalInclTax from the quote.

Loan term

Widgets open on 15 years by default. To show the term the customer chose, set data-preferred-loan-term in months:

<script
  src="https://acme.app.prets.io/embed/widgets/financing-explorer.js"
  data-amount="12500"
  data-preferred-loan-term="120">
</script>

On a widget or screenshot URL, use preferred-loan-term: https://acme.app.prets.io/widgets/financing-snapshot/png?amount=12500&preferred-loan-term=120.

Widget	Accepted values	Sets
Screenshot and Financing Snapshot	`84`, `120`, `180`, `240`	The term of all three cards
Financing Explorer	`84`, `120`, `180`, `240`	The preselected term
Offer Comparison	`84`, `120`, `180`	The preselected term
Warmtefonds loan banner and Credit table	`84`, `120`, `180`, `240`	The term of the non-zero Nationaal Warmtefonds offer. Default `180`

If a lender does not offer that term for the amount, its card shows the lender’s longest shorter term, never a longer one — Lender & Spender, for example, offers at most 10 years below € 10.000. Other values are ignored.

Offer Comparison

Offer Comparison shows three indicative rows at a fixed amount: the two lowest-rate market offers, plus a local SVn row. Pass a Dutch postal code to get a real SVn offer where one exists — without it, the third row states that SVn is always checked locally. Example: Replace acme with your organisation slug and supply values from your quote.

<script
  src="https://acme.app.prets.io/embed/widgets/offer-comparison.js"
  data-amount="12500"
  data-product-label="Warmtepomp"
  data-postal-code="3811LM">
</script>

Attribute	Query parameter	What it sets
`data-amount`	`amount`	Financed total the rows are calculated from
`data-product-label`	`product_label`	Heading above the rows
`data-postal-code`	`postal_code`	Postcode used to look up a real SVn offer
`data-line-items`	`line_items`	Encoded quote line items — overrides `amount` and `product_label`
`data-preferred-loan-term`	`preferred-loan-term`	Preselected loan term in months — see Loan term

Every widget also accepts these as a query string on the iframe URL directly: /widgets/offer-comparison?amount=12500&product_label=Warmtepomp&postal_code=3811LM. A fixed strip for the non-zero Nationaal Warmtefonds offer. The monthly figure and the rate come from the catalog. Amount defaults to € 10.000 and the term defaults to 15 years. The info icon does nothing — open your own dialog and embed the credit table inside it. Example: Replace acme with your organisation slug. data-amount defaults to € 10.000 when you omit it.

<script
  src="https://acme.app.prets.io/embed/widgets/warmtefonds-loan-banner.js"
  data-amount="4049"
  data-preferred-loan-term="120">
</script>

The same URL works as an iframe: /widgets/warmtefonds-loan-banner?amount=4049&preferred-loan-term=120. It shows Nationaal Warmtefonds only.

Credit table

The credit table is the content for the dialog you open from the banner. Prets does not build the click or the dialog. It shows the same non-zero Nationaal Warmtefonds offer: Kosten verduurzaming, Financierder, Looptijd, Rente, Totaal leenbedrag, and Maandbedrag. The rate is the catalog rate, not a fixed percentage. Looptijd is the resolved term. Example: Replace acme with your organisation slug. data-amount defaults to € 10.000 when you omit it.

<script
  src="https://acme.app.prets.io/embed/widgets/credit-table.js"
  data-amount="4049"
  data-preferred-loan-term="120">
</script>

The same URL works as an iframe: /widgets/credit-table?amount=4049&preferred-loan-term=120.

Line items

When you already hold quote line items, send those instead of a flat amount and label: the widget derives both from the items, so your heading and total cannot drift apart. Use the same array you would post to POST /v1/quotes, encoded as one base64url JSON token. Example encoding: Replace items with the line items from your quote.

const items = [{ type: 'heat_pump', totalInclTax: 4049 }]

const token = btoa(JSON.stringify(items))
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=+$/, '')

Example embed: Replace acme with your organisation slug and data-line-items with your encoded token.

<script
  src="https://acme.app.prets.io/embed/widgets/offer-comparison.js"
  data-line-items="W3sidHlwZSI6ImhlYXRfcHVtcCIsInRvdGFsSW5jbFRheCI6NDA0OX1d">
</script>

That token renders Warmtepomp and € 4.049 — the amount is the sum of totalInclTax, the heading comes from the work-item types. Each item needs a type and a totalInclTax. Work types are heat_pump, pv, battery, wall_insulation, sloped_roof_insulation, flat_roof_insulation, floor_insulation and windows. A subsidy item takes a negative totalInclTax plus at least one incentiveCodes value; subsidies lower the total but stay out of the heading. A valid line_items overrides data-amount and data-product-label, so do not expect a leftover flat amount to win. If the token is malformed, or the items total zero or less, the widget falls back to those flat fields. The financing snapshot, financing explorer, offer comparison, and the snapshot PNG include the mandatory Let op! Geld lenen kost geld warning by default. The Warmtefonds loan banner and the credit table always include the warning and have no toggle. Turn the banner off only when the host page already shows the warning itself (snapshot, explorer, offer comparison, and snapshot PNG only): Example: Replace acme with your organisation slug and set the financed total.

<script
  src="https://acme.app.prets.io/embed/widgets/financing-snapshot.js"
  data-amount="12500"
  data-show-afm="false">
</script>

data-show-afm defaults to on. ?show_afm=false is the equivalent on the widget URL for the snapshot, explorer, offer comparison, and the snapshot image.

Keeping the amount and term in sync

The financed total and the loan term drive every monthly figure the widget shows, so both have to match what the customer chose.

Use data-line-items when you have quote line items, and the amount from links.loanIndicationWidget otherwise. Never hardcode either.
When the quote total changes, re-encode the token or call POST /v1/quotes/cost/preview again and use the new links.
Pass the customer’s chosen term as preferred-loan-term, including on the screenshot URL in the quote.
Pass the same data-amount (or amount query param) on the Warmtefonds banner and the credit table so the strip and the dialog stay in sync.
Pass preferred-loan-term on the banner or the credit table when the customer chose a term.

Getting Started

Integration

Using the Portal

Compliance & Trust

Changelog

Screenshot

Financing Snapshot

Financing Explorer

Loan term

Offer Comparison

Warmtefonds loan banner

Credit table

Line items

AFM banner

Keeping the amount and term in sync

​Screenshot

​Financing Snapshot

​Financing Explorer

​Loan term

​Offer Comparison

​Warmtefonds loan banner

​Credit table

​Line items

​AFM banner

​Keeping the amount and term in sync

Screenshot

Financing Snapshot

Financing Explorer

Loan term

Offer Comparison

Warmtefonds loan banner

Credit table

Line items

AFM banner

Keeping the amount and term in sync