> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prets.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Loan Indication Widget

> Show indicative financing costs inline — as a screenshot or an embedded live widget

Call [`POST /v1/quotes/cost/preview`](/api/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:

```json theme={null}
{
  "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.

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 |

## Screenshot

Use `links.loanIndicationWidget.png` directly in an `<img>` tag:

```html theme={null}
<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`.

```html theme={null}
<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.

```html theme={null}
<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.

## Keeping the amount in sync

The `amount` query parameter is what drives the monthly cost displayed in the widget. It must always match the total the customer is actually financing.

* Use the `amount` from `links.loanIndicationWidget.url` or `links.loanIndicationWidget.png` directly — both are already correct.
* If the quote total changes — for example, the customer adjusts line items — call `POST /v1/quotes/cost/preview` again and use the new links from the updated response.
* Do not hardcode an amount. A fixed value will show costs that do not match the customer's actual quote.