Web UI

Please ensure that you have followed all steps as described under the Get Started section.

It is recommended that the web UI is set up after configuring and hosting the backend API as it is essential for the UI portion to function correctly.

The web UI is part of an onboarding module which can be referenced and consumed by any host site. Whether you make use of a provided demo application or use your own implementation, you will need to set your API key and configure the endpoint in order to connect to your instance of the backend API.

The onboarding module is contained within the sybrin.onboarding.js file. To make use of it, follow these steps:

Create or use an existing HTML file
Add an element where you wish to host the onboarding flow on the HTML page
Give the element a unique ID
Either:
- Create a new JavaScript file, or
- Use an existing JavaScript file, or
- Create a new script block in the HTML file
In JavaScript, do the following:
- Create a new instance of Sybrin.Onboarding.Options (see the configuration options section for details on what kind of configuration is made available from the UI). These are the important values to set:
  - Set the "id" parameter to match the unique ID of your UI element
  - Set the "apiKey" parameter to be your API key as provided by Sybrin
  - Set the "integrationApiBaseUrl" to point to the hosted backend API service. Please note that the URL must be appended with /api
- Create a new instance of Sybrin.Onboarding.Main
- Call the .start function on the new instance of Sybrin.Onboarding.Main and pass the instance of Sybrin.Onboarding.Options as a parameter

Please note that the above JavaScript code must be executed after the DOM has been loaded. If it runs too early, you may add a document event listener for DOMContentLoaded and execute the code inside.

index.html

<!DOCTYPE html>
<html class="" lang="en" id="html">

<head>
    <title>
        Sybrin Onboarding
    </title>

    <base href="./" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
    <script type="text/javascript" src="index.js"></script>
</head>

<body>
    <div id='viewport'>
        <div class='sybrin-demo-loading'>
            Please wait. Loading...
        </div>
    </div>
</body>

</html>

index.js

var onboarding;

document.addEventListener('DOMContentLoaded', async function (_) {
    const options = new Sybrin.Onboarding.Options({
        id: 'viewport',
        apiKey: 'your-api-key-here',
        integrationApiBaseUrl: 'your-backend-api-endpoint-here/api'
    });

    onboarding = new Sybrin.Onboarding.Main();
    onboarding.start(options);
});

Once initialized, the web UI will query the backend API for step configuration and run through the configured flow while using the backend API for state management.

The following steps are available as part of the onboarding flow:

Terms Acceptance
Submit Mobile Number
Mobile Verification
Passive Liveness
Liveness Result Acceptance
Country Select
Document Select
Document Scan
Data Extraction Acceptance
Finalize
Dynamic

UI Configuration Options

The following configuration options are available to set on Sybrin.Onboarding.Options:

id: The ID of the HTML element that the onboarding process must be hosted in.
apiKey: An API key value as provided by Sybrin.
integrationApiBaseUrl: The URL that points to the backend API (appended with /api).
authHeaders: Headers to pass through while running authentication.
apiHeaders: Header values that will always be included while doing a backend API call.
identityOptions: Exposes detailed configuration options for the identity module. Please see documentation for the Identity Web SDK for details.
biometricsOptions: Exposes detailed configuration options for the biometrics module. Please see documentation for the Biometrics Web SDK for details.
defaultCountry: ISO-3 country code for what the country selector of the mobile number input should default to.
webSocketReconnectInterval: The amount of milliseconds that the onboarding product should wait before retrying a reconnect attempt when a web socket connection to the backend API is lost.
webSocketReconnectLimit: The amount of times the onboarding product should try to re-establish a web socket connection to the backend API if a connection is lost.

Query Parameters

The onboarding product will recognize and make use of the following URL query parameters if provided:

Correlation ID: Can be provided using the correlationId query parameter. Sets the correlation ID that must be used for the onboarding case.
Country: Can be provided using the country query parameter. Sets the country that must be used for the onboarding case. This may be provided in Alpha-2, Alpha3, or Numeric-3 ISO 3166 standard format.

Window Events

The onboarding product emits the following window events:

On Completion: An event emitted once an onboarding instance completes fully. It is emitted with the following parameter: { type: 'sybrinonboardingcomplete' }
On Step Change: An event emitted on every step change (including initial screen entry). It is emitted with the following parameter: { type: 'sybrinonboardingstepchange', oldStep: 'the-old-step', newStep: 'the-new-step' }

Step Values

The following string values represent the onboarding steps that may be included in the On Step Change window event:

terms
submitMobile
mobileOtp
selectDocument
selectCountry
captureDocument
captureResult
liveness
livenessResult
address
addressResult
completed
dynamic
partialCompleted