👨💻

Integración del widget: frontend

Acciones a realizar por el equipo de frontend
El widget consiste en un contenedor que se carga mediante una llamada a un JavaScript. Realiza este checklist para integrar la parte de front:
  • Si tú no has sido la persona encargada de realizar el alta en Wealth Reader, asegúrate con el responsable de que ha recibido el email confirmando el alta. En este paso previo habréis elegido alguna de las opciones de funcionamiento del widget, como la URL de callback a la que el widget enviará los datos, entre otras opciones.
  • En el lugar donde quieres que aparezca el selector de entidades inserta este código:
<script>
//operation_id: es un id generado por vosotros que os volverá en la respuesta al callback
//entities_to_display: array de entidades a mostrar. Si es array vacío se muestran todas las entidades. Para recuperar todos los códigos de entidades: https://api.wealthreader.com/entities/
const wr_conf = {
"operation_id": "5f5b5c5c-5f5b-5c5c-5f5b-5c5c5f5b5c5c",
"entities_to_display": ["andbank", "bancamarch", "bankinter", "bbva", "caixabank", "degiro", "ing", "santander_emp", "triodos"],
"callback_url": "",
"redirect_url_ok": "",
"redirect_url_ko": "",
"wait_full_response": true
}
window.addEventListener("message", (e) => {
var data = e.data;
​
if (data === "flow completed") {
console.log("El widget ha notificado que el flujo ha finalizado");
//Aquí puedes escribir el código con lo que debe suceder cuando el flujo ha finalizado
}
});
</script>
​
<iframe id="wr-iframe" title="Wealth Reader widget" width="100%" frameBorder="0"></iframe>
<script src="https://widget.wealthreader.com/js/load.js"></script>
Parámetro
Requerido
Descripción
operation_id
Id de operación asignado generado por el cliente. Este id se enviará junto con la respuesta a la URL de callback previamente acordada.
entities_to_display
Entidades a mostrar en el widget. Si no se especifica ningún valor se muestran todas. Puedes obtener el listado completo de entidades en: https://api.wealthreader.com/entities/ Este método y el resto están descritos en la definición OpenAPI, al final del documento.
callback_url
Este parámetro existe con propósito de ayudar a la integración, y solamente está habilitado durante la fase de integración. Permite cambiar la URL de callback configurada por defecto y la de un servicio externo.
redirect_url_ok
Si está espeficado, redirigirá al usuario a esta url tras finalizar la lectura. Es un parámetro opcional, ya que el valor también:
  • puede estar asociado a la api_key, siendo en ese caso un valor constante, o
  • puede no estar definido, dejando así que el control de lo que sucede cuando finaliza la lectura la realice el front tras recibir la página padre la notificación en el evento de finalización
redirect_url_ko
Igual que redirect_url_ok
wait_full_response
Si es true, envía la información completa: activos y sus transacciones. En caso contrario el widget solamente enviará el listado de productos, pero no las transacciones.
​
La razón para querer desactivar esta opción es dar al usuario la sensación de inmediatez, pero no recomendamos desactivarlo porque el tiempo de espera de recuperar la información completa también es corto, del orden de segundos.
​
El valor por defecto es true.
  • Abre tu aplicación. Si todo es correcto verás el selector de bancos. En caso contrario, utiliza cualquiera de las tres formas de soporte que ofrecemos.