> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> HTML5 native events dispatched to the window object.

Widget events are implemented using the browser API [Custom Events <Icon icon="arrow-up-right-from-square" size={12} />](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) and are directly dispatched to the window object. Smart UI events will carry special data in the event object **detail** property. Keep reading to find more information about that data.

Listening for events:

```typescript theme={null}
window.addEventListener(EVENT_NAME, (e: CustomEvent) => {
  console.log(e.detail);
});
```

The events were extended on v4.2 to include all the current information contained in the Smart UI. All event objects will now contain at least the following information in the "detail" property.

| Property  | Content                                                                                                                            | Versioning |
| :-------- | :--------------------------------------------------------------------------------------------------------------------------------- | :--------- |
| applicant | Applicant instance (see below)                                                                                                     | v4.2       |
| documents | Array of Document instances (see below)                                                                                            | v4.2       |
| sessionId | String that identifies this session throughout all logs and events                                                                 | v3         |
| data      | Data stored in our database as logs. This includes details on your session and your Smart UI configuration for debugging purposes. | v3         |

This isn't a complete API description, but among other properties, Applicant and Document objects carry the following information:

```javascript JavaScript theme={null}
Applicant {
  name: { givernName, middleName, familyName },
  addresses: array of { country, postalCode, state, streetNumber, streetName, town, suburb, unitNumber  }
  dateOfBirth: "yyyy-mm-dd",
  profile: "checkProfile/recipe" string
	...
}
```

```javascript JavaScript theme={null}
Document {
	idType: string of DOCUMENT_TYPE, as defined in our documentation
  idNumber: string,
  idSubType: optional string,
  data: { extra information specific to this idType }
  ...
}
```

| Event Name                                                                                                                                                                                                                                                                                                                                                                                                   | Description/Content                                                                                                                                                                  | Versioning |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- |
| INIT                                                                                                                                                                                                                                                                                                                                                                                                         | When smart UI has finished parsing the configuration.                                                                                                                                | v3         |
| SCREEN:WELCOME <br />SCREEN:DOCUMENT\_TYPE\_SELECT <br />SCREEN:DRIVERS\_LICENCE\_INPUT <br />SCREEN:NATIONAL\_ID <br />SCREEN:MEDICARE\_INPUT <br />SCREEN:PASSPORT\_INPUT <br />SCREEN:NAME\_INPUT <br />SCREEN:DOB\_INPUT <br />SCREEN:ADDRESS\_INPUT <br />SCREEN:DETAILS\_SUMMARY <br />SCREEN:FAILURE <br />SCREEN:SUCCESS <br />SCREEN:NO\_MATCH <br />SCREEN:PENDING\_VERFICATION <br />SCREEN:ERROR | Most of these are self explanatory, but it's worth highlighting that <br />\* SCREEN:DETAILS\_SUMMARY will be emitted for the "Review" page                                          | v3         |
| DESTROY                                                                                                                                                                                                                                                                                                                                                                                                      | When Smart UI is removed from page. The Smart UI doesn't remove itself, so this would be triggered by an action on the host platform.                                                | v3         |
| FF\_SAVE\_RESULT                                                                                                                                                                                                                                                                                                                                                                                             | Emitted when save is successful. Only emitted when option "saveOnly" is true.                                                                                                        | v3         |
| FF\_CHECK\_RESULT                                                                                                                                                                                                                                                                                                                                                                                            | Emitted when retrieving a check result. This **won't occur** when "saveOnly" is true. <br /> <br />Includes details used to decide what view comes next. More info after this table. | v3         |
| FF\_SAVE\_ERROR <br />FF\_CHECK\_ERROR                                                                                                                                                                                                                                                                                                                                                                       | Emitted when one of the two results above fail due to a System error OR lack of permissions. The detail property will be the error object itself.                                    | v3         |
| FF\_EXTERNAL\_IDV\_CHECK\_COMPLETED                                                                                                                                                                                                                                                                                                                                                                          | Emitted after idScanVerification process is completed                                                                                                                                | v3         |

For `FF_CHECK_RESULT`, `e.detail` is

* `checkSummary`: object with check results and issues found,
* `resultSlug`: one of
  * `success` // final
  * `pending-success` // final
  * `too-many-tries` // final
  * `no-match` // will loop
  * `partial-match` // will loop
* `nextViewSlug`: might be the same values as "resultSlug", but also "external-idv" if widget is configured for it,
* `applicant`: applicant object with personal information, including the applicant's entity id which can be used with our API calls,
* `documents`: array with all documents and document checks for this applicant,
* `attemptCount`: how many times has the user attempted checks on this instance of the widget so far,
* `maxAttemptCount`: max attempt count configured,
* `externalIdv`: is external idv activated per configuration,
* `isCheckingAddress`: are addresses activated per configuration,
* `isCheckingIDs`: are documents activated per configuration,

For `FF_EXTERNAL_IDV_CHECK_COMPLETED`, `e.detail` is much simpler. It only includes:

* `applicant`: applicant object with personal information, including the applicant's entity id which can be used with our API calls,
* `documents`: array with all documents and document checks for this applicant,

<Callout icon="thumbtack" color="#1A6CFF" iconType="regular">
  ##### Note on Biometrics and Smart UI

  Our current biometrics offering is asynchronous and can take up to 5 mins, we do recommend the following:

  1. Have a warm offboard when the customer finishes biometrics, use the event FF\_EXTERNAL\_IDV\_CHECK\_COMPLETED which indicates that Biometrics has been submitted successfully; however, it does NOT indicate biometrics results are finished.
  2. Wait for notification via your webhook endpoint for the final outcome of this entity including biometrics results (this can take up to 5 mins)
  3. Notify the customer of the next step based on the result...
</Callout>
