IframePasso 1 di 2

Configura il frontend

Incorpora il widget nella tua pagina, visualizza il selezionatore bancario e ascolta i messaggi dell'iframe.

Il widget è un iframe che carica con https://widget.wealthreader.com/js/load.js. Questa pagina copre solo la parte frontale. I dati callback e bancari sono impostati su Backend.

Il dominio da cui servi questa pagina deve essere autorizzato L'area clienti prima di aprire il widget. Se non lo è, il widget risponde che il dominio non è autorizzato.

Checklist di integrazione

0 di 3

Conferma con il registrar dell'account che hai ricevuto l'email di benvenuto e che il dominio è già autorizzato.
Dove dovrebbe comparire il selettore di entità, inserisci il codice qui sotto.
Apri la tua app: dovresti vedere il selettore della banca. Se non appare, controlla la console del browser e Contatta il supporto.

Codice minimo

Genera un nuovo operation_id per ogni operazione. Lascia entities_to_display vuoto per mostrare tutte le entità nel tuo api_key. Tieni wait_full_response in true a meno che il team tecnico non venga indicato diversamente.

<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") {
            // El callback de backend ya se envió con éxito.
            // Cierra el selector o redirige a la pantalla de éxito.
            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, login incorrecto, callback caído, etc.
            }
        } catch (err) {
            // Ignora otros mensajes del iframe.
        }
    });
</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 trova l'iframe con id="wr-iframe" e gli assegna l'altezza in base alla finestra. Posizionalo in modo che abbia spazio verticale; se lo inserisci al centro della pagina, può essere ritagliato.

Messaggi `postMessage`

L'iframe parla alla tua pagina così:

`event.data`	Quando	Cosa fare
`"flow completed"`	La lettura è finita bene e il tuo callback ha risposto `200` + `{"status":"ok"}`	Chiudi il widget o vai alla schermata di successo. I dati della banca non vengono inviati in questo messaggio.
JSON con `error`	Il flusso continua (2FA, contratto, ecc.) o si è guasto	Leggi `error.code` e `error.message`. Il callback non è stato inviato.

Controlla sempre event.origin === "https://widget.wealthreader.com".

`wr_conf` Parametri

Parametro	Richiesto	Predefinito	Cosa fa
`operation_id`	Sì	—	Identificatore che generi tu. Ritorna nel callback per collegare frontend e backend.
`entities_to_display`	No	Tutti	Array di codici di entità. Vuoto o assente = tutti. Elenco: https://api.wealthreader.com/entities/
`wait_full_response`	No	`true`	`true`- Prodotti e transazioni. `false`- Solo l'elenco dei prodotti.
`date_from`	No	ieri	Inizio delle transazioni, `AAAA-MM-DD`. Si applica solo se `wait_full_response` è `true`.
`product_types`	No	Quelli del tuo `api_key`	Filtro prodotto. Array o lista separata da virgole.
`default_login`	No	—	Codice dell'entità. Apre direttamente il modulo per quell'entità.
`default_login_entity_country`	No	`ES`	Codice paese ISO (`ES`, `FR`, ...). Usato solo se c'è `default_login`.
`token`	No	—	Riautenticazione: Preseleziona la banca di un token che non è più valido.
`psd2`	No	`true`	Visualizza le entità PSD2. Solo se non filtri con `entities_to_display`.
`nonpsd2`	No	`true`	Mostra entità per canale, non PSD2 (informazioni più complete). Stessa sfumatura di `psd2`.
`language`	No	Il browser	`"es"` o `"en"`.
`tokenize`	No	Quello nell'area clienti	`true` di prendere un `token` riutilizzabile nel callback.
`business_account`	No	`true`	Include entità aziendali.
`personal_account`	No	`true`	Include entità di individui.

`wait_full_response`

Lascialo a true. Disattivarlo accorcia l'attesa (secondi) a costo di non ricevere transazioni. Non disabilitarlo a meno che non ci sia una chiara ragione UX, e poi recuperare le transazioni successivamente con il API e token del callback.

`date_from`

Se non lo invii, il widget usa la data di ieri. Non è "tutta la storia."

Per intervalli superiori a 89 giorni nelle banche europee, l'entità può richiedere un fattore doppio aggiuntivo. L'utente lo completa nel widget; la lettura può richiedere diversi minuti.

`product_types`

Valori possibili:

accounts — Conti
portfolios — portafogli di investimento
cards — carte
receipts — ricevute
loans — prestiti
deposits — Depositi
leases — leasing / noleggio
insurances — Assicurazioni
factoring
confirming
properties — immobiliare
invoices — fatture
files — fascicoli (Regola 43, 19, ...)

Esempio: ["accounts", "cards", "loans"] o "accounts,cards,loans".

Passo successivo

Quando il selettore sembra a posto, segui con Backend iframe.

Ultimo aggiornamento 2026-09-10

Checklist di integrazione

Codice minimo

Messaggi postMessage

wr_conf Parametri

wait_full_response

date_from

product_types