IframePasso 1 de 2

Configurar o frontend

Incorpore o widget na sua página, exiba o seletor de banco e ouça as mensagens do iframe.

O widget é um iframe que carrega com https://widget.wealthreader.com/js/load.js. Esta página cobre apenas a frente. Os dados callback e bancários são configurados para Backend.

O domínio do qual você atende esta página deve ser autorizado em A área de atendimento ao cliente antes de abrir o widget. Se não estiver, o widget responde que o domínio não está autorizado.

Checklist de integração

0 de 3

Confirme com a pessoa que realizou o cadastro que você recebeu o e-mail de boas-vindas e que o domínio já está autorizado.
Onde o seletor de entidade deve aparecer, insira o código abaixo.
Abra seu app: Você deve ver o seletor do banco. Se ele não aparecer, verifique o console do navegador e Contate o Suporte.

Código mínimo

Gerar um novo operation_id para cada operação. Deixe entities_to_display vazio para mostrar todas as entidades do seu api_key. Mantenha wait_full_response true a menos que a equipe técnica instrua o contrário.

<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 encontra o iframe com id="wr-iframe" e atribui a altura de acordo com a janela. Posicione-o de modo que tenha espaço vertical; se você inserir no meio da página, ele pode ser cortado.

Mensagens `postMessage`

O iframe fala para sua página assim:

`event.data`	Quando	O que fazer
`"flow completed"`	A leitura terminou bem e seu callback respondeu `200` + `{"status":"ok"}`	Feche o widget ou vá para a tela de sucesso. Os dados do banco não circulam nesta mensagem.
JSON com `error`	O fluxo continua (2FA, contrato, etc.) ou falhou	Leia `error.code` e `error.message`. O callback não foi enviado.

Sempre verifique event.origin === "https://widget.wealthreader.com".

`wr_conf` Parâmetros

Parâmetro	Obrigatório	Padrão	O que ele faz
`operation_id`	Sim	—	Identificador gerado por você. Retorna no callback para relacionar a operação do frontend aos dados recebidos pelo backend.
`entities_to_display`	Não	Todos	Array de códigos de entidade. Vazios ou ausentes = todos. Lista: https://api.wealthreader.com/entities/
`wait_full_response`	Não	`true`	`true`- Produtos e transações. `false`- Apenas a lista de produtos.
`date_from`	Não	ontem	Data inicial do período de transações a consultar, `AAAA-MM-DD`. Só se aplica se `wait_full_response` for `true`.
`product_types`	Não	Os da sua `api_key`	Filtro de produto. Array ou lista separada por vírgulas.
`default_login`	Não	—	Código da entidade. Abre o formulário diretamente para essa entidade.
`default_login_entity_country`	Não	`ES`	Código ISO de país (`ES`, `FR`, ...). Usado apenas se houver `default_login`.
`token`	Não	—	Reautenticação: Pré-selecione o banco de um token que não é mais válido.
`psd2`	Não	`true`	Exibe entidades PSD2. Somente se você não filtrar com `entities_to_display`.
`nonpsd2`	Não	`true`	Mostra entidades por canal, não PSD2 (informação mais completa). Mesma nuance que `psd2`.
`language`	Não	O navegador	`"es"` ou `"en"`.
`tokenize`	Não	A que está na área de atendimento	`true` conseguir um `token` reutilizável no callback.
`business_account`	Não	`true`	Inclui entidades empresariais.
`personal_account`	Não	`true`	Inclui entidades de indivíduos.

`wait_full_response`

Deixe no true. Desligar isso reduz a espera (segundos) ao custo de não receber transações. Não desative a menos que haja um motivo claro de UX, e então recupere as transações depois com o API e token do callback.

`date_from`

Se você não enviar, o widget usa a data de ontem. Não é "todo o histórico."

Para intervalos superiores a 89 dias em bancos europeus, a entidade pode solicitar um fator duplo extra. O usuário completa o processo no widget; a leitura pode levar vários minutos.

`product_types`

Valores possíveis:

accounts — Contas
portfolios — portfólios de investimentos
cards — cartões
receipts — débitos diretos
loans — empréstimos
deposits — Depósitos
leases — leasing / locação
insurances — Seguro
factoring
confirming
properties — imóveis
invoices — faturas
files — arquivos (Norma 43, 19, ...)

Exemplo: ["accounts", "cards", "loans"] ou "accounts,cards,loans".

Próximo passo

Quando o seletor estiver bom, siga com Backend iframe.

Última atualização 2026-09-10

Checklist de integração

Código mínimo

Mensagens postMessage

wr_conf Parâmetros

wait_full_response

date_from

product_types