👨‍💻Widget integration: frontend

Actions to be taken by the frontend team

The widget consists of a container that is loaded by a JavaScript call. Follow this checklist to integrate the frontend:

• If you were not the person in charge of registering Wealth Reader, make sure that the person in charge received the email confirming the registration. In this previous step, you selected some of the widget's operating options, such as the callback URL to which the widget will send the data, among other options.

• Insert this code where you want the entity selector to appear:

<script>
   //operation_id: is an id generated by you that will be returned in the callback response
   //entities_to_display: array of entities to display. If it is an empty array, all entities will be displayed. To get all entity codes: 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"],
        "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" referrerpolicy="origin"></iframe>
<script src="https://widget.wealthreader.com/js/load.js"></script>

Parameter	Description	Required
operation_id	Assigned operation id generated by the client. This id will be sent together with the response to the previously agreed callback URL.
entities_to_display	Entities to display in the widget. If no value is specified, all are shown. You can get the complete list of entities at: https://api.wealthreader.com/entities/ This method and the rest are described in the OpenAPI definition, at the end of the document.
wait_full_response	If true, it sends the complete information: assets and their transactions. Otherwise the widget will only send the list of products, but not the transactions. The reason to disable this option is to give the user the feeling of immediacy, but we do not recommend disabling it because the waiting time to retrieve the complete information is also short, in the order of seconds. The default value is true.
default_login	If it has a valid entity_code value, the consent collection form for that entity will open directly. The complete list of entities can be obtained at https://api.wealthreader.com/entities/.
date_from	Start date for retrieving transactions in YYYY-MM-DD format. Example: 2024-01-15. This parameter only applies when wait_full_response is enabled. Important: For date ranges exceeding 89 days with European banks, the bank may request additional authentication (two-factor) that the user must complete directly within the widget. In these cases, the process may take several minutes due to the increased number of queries required to retrieve the complete transaction history.
product_types	Allows filtering the type of products to retrieve. Accepts a comma-separated list of product types from the following options: accounts: current accounts portfolios: investment portfolios cards: cards receipts: receipts loans: loans factoring: factoring confirming: confirming properties: properties invoices: invoices files: files (Norm 43, 19...) Example: accounts,cards,loans If not specified, all types associated with your api_key will be retrieved.

• Open your application. If everything is correct, you will see the Bank Selector. If not, use one of the three forms of support we offer.