Onboarding Component

The Onboarding component is a versatile React component designed for creating interactive onboarding experiences. It allows you to guide users through a series of screens, collect their responses.

Component Visuals

To unlock early access to the component Get Access

Installation

To use the OnBoarding component, you need to install the Quest Labs React SDK:

  • Open your terminal/command prompt.

  • Navigate to your project's root directory using the cd command if you're not already there.

  • Run the following command to install the quest-sdk package using npm:

npm install @questlabs/react-sdk

This command will download and install the package and its dependencies into your project.

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

OnBoarding Component Features

  1. Interactive Onboarding: The component guides users through a sequence of screens, collects their responses, and provides customization options for a dynamic onboarding experience.

  2. Customization Options: You can customize various aspects of the onboarding process, including colors, input styles, button sizes, font sizes, and more.

  3. Data Collection: The component collects user responses, allowing you to set and update answers as users progress through the onboarding flow.

  4. Dynamic Content: Customize the content and appearance of onboarding screens based on the design and headingScreen props.

  5. Integration with API: The component integrates with your API to retrieve onboarding criteria and eligibility data, enhancing the user experience.

OnBoarding Component Props

The OnBoarding component accepts a variety of props to configure and customize the onboarding process:

Prop NameTypeRequiredDetails

userId

string

required

The unique identifier for the user participating in the onboarding process.

token

string

required

An authentication token used for authorization.

questId

string

required

The unique identifier for the onboarding quest that defines the sequence of screens and questions.

uniqueUserId

string

optional

Unique user identifier.

uniqueEmailId

string

optional

Unique email identifier.

design

array of arrays

optional

Specifies the layout of screens within the onboarding process.

headingScreen

array of objects

optional

Defines the headings and descriptions for each screen in the onboarding process.

singleChoice

string

optional

Defines the type of single-choice input to be used.

multiChoice

string

optional

Defines the type of multi-choice input to be used.

getAnswers

function

optional

A callback function to retrieve user answers during the onboarding process.

answers

object

optional

An object representing user responses to onboarding questions.

setAnswer

function

optional

A function to update the answer object when the user responds.

customComponents

array

optional

An array of custom components to be included within the onboarding screens.

customComponentPositions

number

optional

Defines the positions within the onboarding process where custom components can be inserted.

progress

array of string

optional

The headings of progress bar for each tab.

loadingTracker

boolean

optional

Boolean indicating whether the loading tracker is active.

setLoading

function

optional

Function to set loading state.

nextBtnText

string

optional

Text for the next button.

progressBarMultiLine

boolean

optional

Indicates whether the progress bar is displayed in multiple lines.

controlBtnType

string

optional

Type of control buttons "Arrow" or "Buttons".

template

string

optional

Template types : "multi-question" or "single-question".

styleConfig

object

optional

An object containing CSS properties for styling various components within the onboarding process, including form, headings, descriptions, inputs, labels, buttons, single-choice options, multi-choice options, and progress bar.

You can customize the UI with type of styleConfig would be

 styleConfig?: {
        Form?: CSSProperties,
        Topbar?: CSSProperties,
        Heading?: CSSProperties,
        Description?: CSSProperties,
        Input?: CSSProperties,
        Label?: CSSProperties,
        TextArea?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        SingleChoice?: {
            style?: CSSProperties,
            selectedStyle?: CSSProperties
        },
        MultiChoice?: {
            style?: CSSProperties,
            selectedStyle?: CSSProperties
        },
        ProgressBar?: {
            completeTabColor?: string,
            currentTabColor?: string,
            pendingTabColor?: string
        }
        Footer? : CSSProperties
    }

OnBoarding Component Usage

To use the OnBoarding component in your React application, follow these steps:

Import the necessary components and dependencies:

import { OnBoarding } from '@questLabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

Include the OnBoarding component within your application, passing the required and optional props:

<OnBoarding
  userId={"/* User ID */"}
  token={"/* Authentication token */"}
  questId={"/* Onboarding quest ID */"}
  uniqueUserId={"/* Unique User Id  */"}
  uniqueEmailId={"/* Unique Email Id */"} 
  design={"/* Specify the layout of screens */"}
  headingScreen={"/* Define screen headings and descriptions */"}
  singleChoice={"/* Define single-choice input type */"}
  multiChoice={"/* Define multi-choice input type */"}
  getAnswers={"/*() => "Callback to retrieve answers" */"}
  answer={"/* User responses */"}
  setAnswer={"/* Function to update user responses */"}
  customComponents={"/* Custom components */"}
  customComponentPositions={"/* Define component positions */"}
  progress={"/* Specify headings of progress bar for each tab */"}
  loadingTracker={"/* Define status for loading tracker */"}
  setLoading={"/* Function to set loading state */"}
  nextBtnText={"/* Text for next button */"}
  progressBarMultiLine={"/* Boolean indicating whether progress bar should be displayed in multiple lines */"}
  controlBtnType={"/* Type of control buttons */"}
  template={"/* Template type */"}
  styleConfig?: {{
        Form?: CSSProperties,
        Topbar?: CSSProperties,
        Heading?: CSSProperties,
        Description?: CSSProperties,
        Input?: CSSProperties,
        Label?: CSSProperties,
        TextArea?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        SingleChoice?: {
            style?: CSSProperties,
            selectedStyle?: CSSProperties
        },
        MultiChoice?: {
            style?: CSSProperties,
            selectedStyle?: CSSProperties
        },
        ProgressBar?: {
            completeTabColor?: string,
            currentTabColor?: string,
            pendingTabColor?: string
        }
        Footer? : CSSProperties
    }}

/>

  1. Customize the onboarding experience by adjusting the props to meet your application's requirements.

  2. Utilize the getAnswers and setAnswer functions to manage user responses and data collection.

  3. Integrate the OnBoarding component with your API to retrieve relevant onboarding criteria and eligibility data.

By following these steps, you can seamlessly integrate and customize the OnBoarding component within your React application to create dynamic and interactive user onboarding experiences.

Example Usage

import React, { useState } from 'react';
import {OnBoarding} from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'
import answerData from './path-to-answer-data'; // Import or create the answer data object.

function YourApp() {
    const [answer, setAnswer] = useState([]) // State to manage user responses

    return (
        <div className="App">
            {/* Render your application content here */}

            {/* Include the OnBoarding component */}
            <QuestProvider 
              apiKey={"your api key"} 
              entityId={"your entity Id"}
              apiType ={"STAGING" OR "PRODUCTION"}
              featureFlags={{}}
              >
                <OnBoarding
                    userId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
                    token="xxxxxzI1NiIsZiNmZkMGJxxxxxxxxOCIsImlhdCI6MTY5Mzg4MDUxxxxxxxxx3SHKDjJ6NQ7OPuzAL6jCzI"
                    questId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
  
                    design={[[1, 2], [3, 4, 5], [6, 7]]}
                     headingScreen={[{name: "Tell about your self", desc: ""}, {
                        name: "Tell us more about your company",
                        desc: ""
                    }, {name: "A little more will help us guide you the best", desc: ""}]}
                    singleChoose={"/* Define single-choice input type */"}
                    multiChoice="modal1"
                    getAnswers={"/*() => "Callback to retrieve answers" */"}
                    answer={answer}
                    setAnswer={setAnswer}
                    progress={['heading1','heading2']}
                    nextBtnText={"/* Text for next button */"}
                    progressBarMultiLine={"/* Boolean indicating whether progress bar should be displayed in multiple lines */"}
                    controlBtnType={"/* Type of control buttons */"}
                    template={"/* Template type */"}
                    styleConfig={{
                           Form: {},
                           Topbar: {},
                           Heading: {},
                           Description: {},
                           Input: {},
                           Label: {},
                           TextArea: {},
                           PrimaryButton: {},
                           SecondaryButton: {},
                           SingleChoice: {
                                 style: {},
                                 selectedStyle: {}
                           },
                           MultiChoice: {
                                style: {},
                                selectedStyle: {}
                           },
                           ProgressBar: {
                                completeTabColor: 'green',
                                currentTabColor:  '',
                                pendingTabColor:  ''
                           }
                    }}
                />
            </QuestProvider>
        </div>
);
}

export default YourApp;

Demo

Last updated