Introduction
Create Your First Onboarding J...

Creating Pages/Screens

22min

Here we are discussing how to create the basic pages required for an onboarding journey.

Step 1: Getting the User's Personal Information

  • We will be using Forms V2 widget. It is used to create a page with various customizable input fields. It can be used to collect the personal information of the customer with the help of custom widgets and elements.
Forms V2 widget
Forms V2 widget

  • There are multiple Elements which can be used to configure a page, here we have used the element "Textbox" to collect information like Name, Mobile number, D.O.B, etc.
  • We can edit Textbox element to configure as per requirement.
Configuring personal info page using elements
Configuring personal info page using elements


Frontend View During the Onboarding Journey

Collecting personal information
Collecting personal information



Step 2: Create a Page to Verify the Contact Number and Email ID

  • We will create a page using OTP Verification V2 widget to verify mobile number and email ID.
  • OTP verification is used to verify the mobile number and/or email ID of the user; it ensures that the mobile number and/or email ID provided by the onboarding customer belongs to them.
OTP Verification V2 widget
OTP Verification V2 widget

  • We can customize the OTP Verification V2 widget using multiple toggle buttons that are present.
Toggle buttons to customize OTP Verification V2
Toggle buttons to customize OTP Verification V2

Configuring page to verify contact number and email
Configuring page to verify contact number and email


Frontend View During the Onboarding Journey

Onboarding user enter e-mail ID and contact number
Onboarding user enter e-mail ID and contact number

Onboarding user enter the OTP sent to the entered mobile number and email ID
Onboarding user enter the OTP sent to the entered mobile number and email ID



Step 3: Creating a Page for Identity Verification

  • We will create a page for Identity verification with the help of pre-built Identity APIs using Data and Documents widget.
  • Using this widget we can create a page integrating APIs and configure the page. This is useful in fetching data from the documents uploaded by the onboarding customer.
Data and Documents widget
Data and Documents widget

  • Select all the Identity APIs you want as an option for the user to provide as proof of identity.
  • Then, the selected identity APIs can be configured, as to whether to keep it as Extraction Screen or Manual Data Entry form. (Extraction Screen is widely used and it is convenient for onboarding customers.)
Selecting the required identity API's
Selecting the required identity API's

  • Then we can configure each Identity API as per requirement by clicking on the "Edit" icon beside the text box.

Frontend View During the Onboarding Journey

Digilocker authorization for Proof of Identity
Digilocker authorization for Proof of Identity

Data is fetched from the uploaded document
Data is fetched from the uploaded document



Step 4: Creating a Page for Liveliness Check (Video verification)

  • We will create a page for liveliness check using the Video Verification widget.
  • Video verification is a one-way video recording that is used to check the liveliness of the person. It ensures that the person who has been onboarded is a living person and not a bot.
Video Verification widget
Video Verification widget

  • We can configure the video verification page by selecting the required options that appear on the screen for customization.
  Configuring video verification page
Configuring video verification page


Frontend View During the Onboarding Journey

Start recording page for Video Verification
Start recording page for Video Verification

Option to submit or retake the video
Option to submit or retake the video

Video recorded successfully
Video recorded successfully



Step 5: Creating a Page to Generate a Contract

  • We will create a page to generate a contract for the user to sign by using the Contract SDK widget.
  • These contracts are usually presented in the form of checkboxes or electronic signatures and are legally binding.
  • It can be configured using the options that are present for customization.
Overview of Contract SDK configuration
Overview of Contract SDK configuration


Frontend View During the Onboarding Journey

Contract generated for the user
Contract generated for the user

Adding signers to the contract
Adding signers to the contract



Step 6: Application Summary

  • The Application Summary page appears after all the steps required for the onboarding are completed.
  • This page is hard-coded and the names of the pages used in the journey are used to specify the pages.
  • Here, the user can review the information that they have provided during the journey and can edit the data in case of any error.

Frontend View During the Onboarding Journey

Application summary
Application summary



Step 7: Thank You Page

  • The Thank You page is a hard-coded page and appears after all the information has been reviewed and successfully submitted by the user.
  • If we want to customize the thank you page, we can do so by going to the Themes tab in the Admin Portal.

Frontend View During the Onboarding Journey

Thank you page on successful submission
Thank you page on successful submission


Getting help

Please feel free to contact us if you have any questions, require clarification, or have ideas for how to make the documents or any of our services better.

You can reach out to us at [email protected].