IframeStep 1 of 2

Configure the frontend

Embed the widget on your page, show the bank selector and listen to the iframe messages.

The widget is an iframe loaded with https://widget.wealthreader.com/js/load.js. This page covers the frontend only. The callback and bank data are configured in backend.

The domain that serves this page must be authorised in the client area before you open the widget. Otherwise the widget reports that the domain is not authorised.

Integration checklist

0 of 3

Confirm with whoever completed signup that you received the welcome email and that the domain is already authorised.
Where the institution selector should appear, insert the code below.
Open your app: you should see the bank selector. If it does not appear, check the browser console and contact support.

Minimum code

Generate a new operation_id for every operation. Leave entities_to_display empty to show every institution on your api_key. Keep wait_full_response set to true unless the technical team tells you otherwise.

<script>
    const wr_conf = {
        operation_id: crypto.randomUUID(),
        entities_to_display: [],
        wait_full_response: true
    };

    window.addEventListener("message", (event) => {
        if (event.origin !== "https://widget.wealthreader.com") {
            return;
        }

        if (event.data === "flow completed") {
            // The backend callback has already been sent successfully.
            // Close the selector or redirect to the success screen.
            return;
        }

        if (typeof event.data !== "string") {
            return;
        }

        try {
            const message = JSON.parse(event.data);
            if (message.error) {
                console.log(message.error.code, message.error.message);
                // OTP, wrong login, callback down, etc.
            }
        } catch (err) {
            // Ignore other iframe messages.
        }
    });
</script>

<iframe
    id="wr-iframe"
    title="Wealth Reader widget"
    width="100%"
    frameBorder="0"
    referrerpolicy="origin"
></iframe>
<script src="https://widget.wealthreader.com/js/load.js"></script>

load.js looks up the iframe with id="wr-iframe" and sets its height from the viewport. Give it vertical room; if you place it mid-page it may be clipped.

`postMessage` messages

The iframe talks to your page like this:

`event.data`	When	What to do
`"flow completed"`	The read finished successfully and your callback returned `200` + `{"status":"ok"}`	Close the widget or go to the success screen. Bank data does not travel in this message.
JSON with `error`	The flow is still going (2FA, contract, etc.) or it failed	Read `error.code` and `error.message`. The callback has not been sent.

Always check event.origin === "https://widget.wealthreader.com".

`wr_conf` parameters

Parameter	Required	Default	What it does
`operation_id`	Yes	—	Id you generate. It comes back in the callback so you can match frontend and backend.
`entities_to_display`	No	all	Array of institution codes. Empty or omitted = all. List: https://api.wealthreader.com/entities/
`wait_full_response`	No	`true`	`true`: products and transactions. `false`: product list only.
`date_from`	No	yesterday	Start of transactions, `YYYY-MM-DD`. Only applies when `wait_full_response` is `true`.
`product_types`	No	those on your `api_key`	Product filter. Array or comma-separated list.
`default_login`	No	—	Institution code. Opens that institution's form directly.
`default_login_entity_country`	No	`ES`	ISO country code (`ES`, `FR`, …). Used only when `default_login` is set.
`token`	No	—	Re-authentication: preselects the bank of a token that is no longer valid.
`psd2`	No	`true`	Show PSD2 institutions. Only if you do not filter with `entities_to_display`.
`nonpsd2`	No	`true`	Show institutions on the non-PSD2 channel (richer data). Same caveat as `psd2`.
`language`	No	the browser language	`"es"` or `"en"`.
`tokenize`	No	the client-area setting	`true` to receive a reusable `token` in the callback.
`business_account`	No	`true`	Include business institutions.
`personal_account`	No	`true`	Include personal institutions.

`wait_full_response`

Leave it true. Turning it off shortens the wait (seconds) at the cost of not receiving transactions. Do not disable it unless you have a clear UX reason, and then fetch transactions later with the API and the callback token.

`date_from`

If you omit it, the widget uses yesterday's date. That is not “the full history”.

For ranges longer than 89 days at European banks, the institution may ask for an extra two-factor step. The user completes it in the widget; the read can take several minutes.

`product_types`

Possible values:

accounts — current accounts
portfolios — investment portfolios
cards — cards
receipts — direct debits
loans — loans
deposits — deposits
leases — leasing / renting
insurances — insurance
factoring
confirming
properties — real estate
invoices — invoices
files — files (Norma 43, 19, …)

Example: ["accounts", "cards", "loans"] or "accounts,cards,loans".

Next step

When the selector looks right, continue with iframe backend.

Last updated 2026-08-15

Integration checklist

Minimum code

postMessage messages

wr_conf parameters

wait_full_response

date_from

product_types