> For the complete documentation index, see [llms.txt](https://instantor.gitbook.io/instantor-api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://instantor.gitbook.io/instantor-api-docs/javascript-api/.attacheventlistener.md).

# Listen to Widget events

The **attachEventListener** method is an **optional** method for attaching callback functions to specific Widget events.

```javascript
instantor.attachEventListener(eventName, callbackFunction(payload))
```

This method attaches an event listener with a specified callback function to the specified event, **eventName**. When triggered, the callback function is called with an event **payload.** 

| Event Name        | Payload Example                                                                                                              | Description                                                                                                                                                                                                                                                                                           |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **load**          | <p>{</p><p>   status: true</p><p>}                                 </p>                                                      | <p>Triggered when the Widget has loaded.</p><p>The payload contains status <strong>true</strong> if loading was successful.</p>                                                                                                                                                                       |
| **processEnd**    | <p>{</p><p>   "process-finished" </p><p>}</p>                                                                                | <p>Triggered when the process has ended, i.e. the user completed the last login step.</p><p>The payload contains a representation of the result:</p><p>    <strong>"process-finished"</strong></p><p>    <strong>"invalid-login"</strong></p><p>    <strong>"process-error"</strong></p>              |
| **chooseBank**    | <p>{</p><p>   bankAbbreviation: "se-swedbank",</p><p></p><p>   bankID: "uuid",</p><p></p><p>   sessionID: "uuid"</p><p>}</p> | <p>Triggered when the user selects a bank.</p><p>The payload contains a representation of the bank and session data:</p><p>    <strong>bankAbbreviation</strong> (bank abbreviation)</p><p>    <strong>bankID</strong> (unique bank ID)</p><p>    <strong>sessionID</strong> (unique session ID).</p> |
| **error**         | <p>{ </p><p>   message: "error message"</p><p>}</p>                                                                          | <p>Triggered when an error occurs.</p><p>The payload contains a description of the error.</p>                                                                                                                                                                                                         |
| **displayChange** | <p>{</p><p>   display: </p><p>      "bankLogin"</p><p>}   </p>                                                               | <p>Triggered when the Widget changes content.</p><p>The payload contains a representation of what is displayed:</p><p>   <strong>"bankLogin"</strong> (the Widget renders a bank login form)</p><p>    <strong>"bankChooser"</strong> (the Widget renders the bank chooser)</p>                       |

### Example

An example of how to use attachEventListener

```javascript
const instantor = new Instantor('produktKey.example')
  
instantor.attachEventListener('chooseBank', function(payload) {
  console.log("The user selected this bank: " + payload.bankAbbreviation);
})
  
instantor.load('#instantor_div');
```