--- title: Creating Pages/Screens slug: generic-onboarding/creating-pagesscreens description: Learn how to create the essential pages for an effective onboarding journey with our step-by-step guide. From collecting personal information to verifying contacts and implementing identity checks, this document covers it all. Discover how to conduct vide docTags: createdAt: 2023-07-07T10:16:22.750Z --- 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](docId\:aduszKLKUhQ-3W-jtPmgF) 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. ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/A5SN4rGhcKOz6waSI8p1F_export-collection-47.png "Forms V2 widget") - There are multiple [Elements](docId\:uvnj3qMnwZLFwKK0KCbw9) 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](docId\:l-2PuiQmrKb4l_w2-_7dT) element to configure as per requirement. ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/Kl29OLMRwiisMZIOS89Z0_personal-information1.gif "Configuring personal info page using elements") ### Frontend View During the Onboarding Journey ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/IydrEwR4g1VN3v4s1XXUU_pi.png "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](docId\:YwDUW18-cwiMM-_koxESA) 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. ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/ZFZ4C4CGPUKdat3tnn11c_export-collection-48.png "OTP Verification V2 widget") - We can customize the OTP Verification V2 widget using multiple toggle buttons that are present. ::Image[]{src="https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/tBZI0lFUhA3lMH1Xime8__screenshot-2023-02-22-at-61629-pm.png" size="40" width="628" height="370" caption="Toggle buttons to customize OTP Verification V2" position="center" showCaption="true"} ::Image[]{src="https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/eDEJZd8nFLx4fCFICzApc_otp-verification.gif" size="94" width="2872" height="1632" caption="Configuring page to verify contact number and email" position="center" showCaption="true"} ### Frontend View During the Onboarding Journey ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/xJB5pVdOTE_P2WHnp5obv_export-collection-49.png "Onboarding user enter e-mail ID and contact number") ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/XO9uVjsCCaqrr57v2s60o_export-collection-50.png "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](docId\:kkDsFAsoLtJypqxz-YKAT) 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. ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/c5rWDTjyEODLOnouL9jqh_export-collection-53.png "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.) ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/GR3V9M9XPRcCC6305CFrP_identity-verifi.gif "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 ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/1jhP_mR2M1WMpUWH-Zem1_p.png "Digilocker authorization for Proof of Identity") ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/NSXSZaTb195OGwD4IGrJM_export-collection-52.png "Data is fetched from the uploaded document") *** ### Step 4: Creating a Page for Liveliness Check - We will create a page for liveliness check using the [Liveliness Secure](https://docs.signzy.com/generic-onboarding/liveliness-secure) widget. - Liveliness Secure 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. ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/aHr4ZDLmKfBzKDXINMQqi-20260326-181458.jpg "Video Verification widget") ### Frontend View During the Onboarding Journey ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/XnWt2c2n2J0s91xl4-nDP-20260326-190232.jpg "Option to submit or retake the video ") *** ### 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 360](https://docs.signzy.com/generic-onboarding/contract-360) widget. - These contracts are usually presented in the form of check boxes or electronic signatures and are legally binding. - It can be configured using the options that are present for customization. ### Frontend View During the Onboarding Journey ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/wRV7uMXQwbrMY-pG2IH_U_12.png "Contract generated for the user") ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/6PMUxx4xiFXtBkD-ESGsv_13.png "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 ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/ct_4V_MOumq1hr1iSkbN8_14.png "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](docId\:SFpdL9btJvmXAq8uJG8iM) tab in the Admin Portal. ### Frontend View During the Onboarding Journey ![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/IBHdlqBadLF34KWab6eUj_15.png "Thank you page on successful submission ") :::hint{type="info"} ### 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 [help@signzy.com](#). :::