IframePas 1 de 2

Configurar la interfície

Incrusta el widget a la teva pàgina, mostra el selector del banc i escolta els missatges de l'iframe.

El widget és un iframe que es carrega amb https://widget.wealthreader.com/js/load.js. Aquesta pàgina només cobreix la part frontal. La callback i les dades bancàries estan configurades com a Backend.

El domini des del qual serveixes aquesta pàgina ha d'estar autoritzat a La zona de clients abans d'obrir el widget. Si no ho està, el widget respon que el domini no està autoritzat.

Checklist d'integració

0 de 3

Confirma amb el registrador del compte que has rebut el correu de benvinguda i que el domini ja està autoritzat.
On hauria d'aparèixer el selector d'entitats, inseriu el codi a continuació.
Obre la teva aplicació: Hauries de veure el selector bancari. Si no apareix, comprova la consola del navegador i Contacta amb el suport.

Codi mínim

Genera una nova operation_id per a cada operació. Deixa entities_to_display buida per mostrar totes les entitats del teu api_key. Deixa wait_full_response a true tret que l'equip tècnic indiqui el contrari.

<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 troba l'iframe amb id="wr-iframe" i li assigna l'alçada segons la finestra. Col·loca'l de manera que tingui espai vertical; si l'insereixes al mig de la pàgina, es pot retallar.

Missatges `postMessage`

L'iframe parla a la teva pàgina així:

`event.data`	Quan	Què fer
`"flow completed"`	La lectura va acabar bé i el teu callback va respondre `200` + `{"status":"ok"}`	Tanca el widget o ves a la pantalla d'èxit. Les dades del banc no apareixen en aquest missatge.
JSON amb `error`	El flux continua (2FA, contracte, etc.) o ha fallat	Llegeix `error.code` i `error.message`. El callback no s'ha enviat.

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

`wr_conf` Paràmetres

Paràmetre	Obligatori	Valor per defecte	Què fa
`operation_id`	Sí	—	Identificador que genereu i que torna al callback per relacionar el frontend amb el backend.
`entities_to_display`	No	Tots	Matriu de codis d'entitat. Buit o absent = tots. Llista: https://api.wealthreader.com/entities/
`wait_full_response`	No	`true`	`true`- Productes i transaccions. `false`- Només la llista de productes.
`date_from`	No	Ahir	Inici de transaccions, `AAAA-MM-DD`. Només s'aplica si `wait_full_response` és `true`.
`product_types`	No	els del teu `api_key`	Filtre de producte. Array o llista separada per comes.
`default_login`	No	—	Codi d'entitat. Obre el formulari directament per a aquesta entitat.
`default_login_entity_country`	No	`ES`	Codi de país ISO (`ES`, `FR`, ...). Només s'utilitza si hi ha `default_login`.
`token`	No	—	Reautenticació: Preselecciona el banc d'un token que ja no és vàlid.
`psd2`	No	`true`	Mostra les entitats PSD2. Només si no filtres amb `entities_to_display`.
`nonpsd2`	No	`true`	Mostra entitats per canal, no PSD2 (informació més completa). Mateixa matisació que `psd2`.
`language`	No	El navegador	`"es"` o `"en"`.
`tokenize`	No	El que hi ha a la zona de clients	`true` aconseguir un `token` reutilitzable al callback.
`business_account`	No	`true`	Inclou entitats empresarials.
`personal_account`	No	`true`	Inclou entitats d'individus.

`wait_full_response`

Deixa-ho a true. Desactivar-lo escurça l'espera (segons) a costa de no rebre transaccions. No el desactivis tret que hi hagi una raó clara d'experiència d'usuari, i després recupera les transaccions més endavant amb el API i token de la callback.

`date_from`

Si no l'envies, el widget utilitza la data d'ahir. No és "tota la història."

Per a intervals de més de 89 dies als bancs europeus, l'entitat pot demanar un factor doble extra. L'usuari ho completa al widget; la lectura pot durar diversos minuts.

`product_types`

Valors possibles:

accounts — Comptes
portfolios — carteres d'inversió
cards — targetes
receipts — rebuts
loans — préstecs
deposits — Dipòsits
leases — lloguer / lloguer
insurances — Assegurances
factoring
confirming
properties — béns immobles
invoices — factures
files — arxius (Regla 43, 19, ...)

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

Següent pas

Quan el selector estigui bé, segueix amb Backend iframe.

Última actualització 2026-09-10

Checklist d'integració

Codi mínim

Missatges postMessage

wr_conf Paràmetres

wait_full_response

date_from

product_types