# Widget integration: frontend

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:

```javascript
<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>
```

<table><thead><tr><th>Parameter</th><th>Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td>operation_id</td><td>Assigned operation id generated by the client. This id will be sent together with the response to the previously agreed callback URL.</td><td>true</td></tr><tr><td>entities_to_display</td><td><p>Entities to display in the widget. If no value is specified, all are shown.</p><p>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.</p></td><td>false</td></tr><tr><td>wait_full_response</td><td><p>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.</p><p>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.</p><p>The default value is true.</p></td><td>false</td></tr><tr><td>default_login</td><td>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/.</td><td>false</td></tr><tr><td>date_from</td><td><p>Start date for retrieving transactions in YYYY-MM-DD format.</p><p></p><p>Example: 2024-01-15.</p><p></p><p>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.</p></td><td>false</td></tr><tr><td>product_types</td><td><p>Allows filtering the type of products to retrieve.</p><p></p><p>Accepts a comma-separated list of product types from the following options:</p><ul><li>accounts: current accounts</li><li>portfolios: investment portfolios</li><li>cards: cards</li><li>receipts: receipts</li><li>loans: loans</li><li>factoring: factoring</li><li>confirming: confirming</li><li>properties: properties</li><li>invoices: invoices</li><li>files: files (Norm 43, 19...)</li></ul><p></p><p>Example: accounts,cards,loans</p><p></p><p>If not specified, all types associated with your api_key will be retrieved.</p></td><td>false</td></tr></tbody></table>

* [ ] 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-en.wealthreader.com/widget-integration-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.