User Onboarding

Web Application

Example using React:

import React from 'react';
import ZeroHashSDK, { AppIdentifier } from 'zh-web-sdk';

const App = () => {
  const sdk = new ZeroHashSDK({
    zeroHashAppsURL: "https://web-sdk.cert.zerohash.com",
    userOnboardingJWT: "<JWT_TOKEN_HERE>" 
  });

  sdk.openModal({appIdentifier: AppIdentifier.ONBOARDING})
  return <></>;
}

export default App;

Note: There is another way to get a token for the onboarding module. Please refer to Acquire an onboarding access token

Mobile Application (WebView)

To use our SDK on mobile apps, you don't need to install or include zh-web-sdk as a dependency in your project. We use a proxy server that calls the SDK internally to make it work for mobile applications.

Events

We forward events from the UI to the native app using the postMessage API. You can handle these events from the WebView component. Currently, these are the events we have:

MessageMeaning
SDK_MOBILE_READYThe SDK is ready to receive postMessage events (e.g OPEN_MODAL)
ONBOARDING_APP_LOADEDThe SDK is loadedSDK loaded and is visible to the customer.
ONBOARDING_CLOSE_BUTTON_CLICKEDThe close (X) button was clicked in the top right corner of the UI. This action hides the modal while preserving the UI state. When reopened in the same instance, the UI will display with the state it had when it was closed.
ONBOARDING_PENDING_APPROVALKYC submission requires manual review by the Zero Hash compliance team. There is a corresponding participant status webhook to this message.
ONBOARDING_COMPLETEDThe flow was completed and internal calls were made successfully. Note: “completed” does not equate to “approved” or “success”. The flow can be successfully completed, but the participant status could be “rejected”, for example.
ONBOARDING_FAILEDThe customer encountered an error that cannot be rectified in their current session.

Messages

To control the WebView, you can also send messages using the postMessage API after receiving SDK_MOBILE_READY from WebView. Currently, the accepted messages are:

Open Modal

Opens the modal with the JWT provided for identifier provided.

{type: "OPEN_MODAL", payload: {jwt: "<JWT_HERE>", appIdentifier: "onboarding"}}
Payload attributeDescription
appIdentifier (required)Identifies that you're opening the "onboarding" flow, use appIdentifier: "onboarding"
jwt (optional)The JWT requested for the onboarding flow. This is optional because you might have already provided a JWT when instantiating the SDK.
navigate (optional)Navigates the user directly to an specific page, currently the only accepted value is{to: "edit-address"}

Opens the modal directly in the edit-address page:

{type: "OPEN_MODAL",
  payload: {
    jwt: "<JWT_HERE>",
    appIdentifier: "onboarding",
    navigate: {to: "edit-address"}
  }
}

Close Modal

Hides the modal while preserving its current state. When the modal is reopened in the same instance, the state will be maintained.

{type: "CLOSE_MODAL", payload:{appIdentifier: "onboarding"}}

📘

Opening/closing the modal can be interpreted as pausing/resuming, since the UI will retain the state it had when it was closed. To restart the UI flow, a new modal instance must be created.

For more details on how to use our SDK with WebViews, please refer to Integration with Mobile Apps