# Introducción

Esta guía explica cómo integrar Wealth Reader: el usuario elige su banco, se autentica, y tu sistema recibe los datos normalizados.

Ejemplo del resultado final: <https://widget.wealthreader.com/demo-all/>

## Antes de empezar

Necesitas:

- Haber completado el alta y disponer de una `api_key`.
- Una sesión de onboarding con el equipo técnico. Reserva la tuya desde [Soporte](soporte.md).
- Decidir el tipo de integración (abajo).
- Una URL HTTPS que reciba el callback, si integras por iframe.

## Elige el tipo de integración

| Criterio | Iframe (widget) | OAuth |
| --- | --- | --- |
| **Cuándo** | Aplicación web que puede embeber un iframe | App nativa, o no puedes embeber un iframe |
| **Frontend** | Insertas el widget en tu página | Rediriges al usuario a `oauth.wealthreader.com` |
| **Datos** | Llegan por `POST` a tu URL de callback | Los obtienes al completar el desafío en `/token/` |
| **Empieza por** | [Iframe: frontend](integracion-via-iframe-1-de-2-frontend.md) | [OAuth: backend](integracion-via-oauth-backend.md) |

La mayoría de los clientes web usan iframe.

{% hint style="info" %}
¿Programas con un asistente de IA? Instala la [skill de Wealth Reader](asistentes-ia.md) en Claude Code, Codex, Cursor, Copilot o Gemini CLI y genera la integración siguiendo esta guía.
{% endhint %}

## Cómo funciona (iframe)

1. Tu página carga el widget con un `operation_id` que generas tú.
2. El usuario elige la entidad, da consentimiento y resuelve el doble factor si hace falta. El widget gestiona esos pasos.
3. Wealth Reader obtiene los datos y hace dos cosas, **en este orden**:
   - En el **backend**, envía el JSON completo a la URL de callback que configuraste. El `operation_id` viaja en esa respuesta para que puedas asociarla a la operación de tu front.
   - En el **frontend**, el iframe avisa a tu página con `postMessage` (`flow completed`) solo si el callback respondió bien. Úsalo para cerrar el selector o mostrar una pantalla de éxito.

El `operation_id` es el puente entre front y back. Sin él no puedes cruzar lo que ocurrió en el navegador con los datos que llegan a tu servidor.

{% hint style="info" %}
El mensaje `flow completed` no contiene los datos del banco. Los datos viajan al callback. Si el callback no responde HTTP `200` con `{"status":"ok"}`, el front no recibe `flow completed`.
{% endhint %}