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

Overview

Visual 1

Visual 2

Visual 3

To unlock early access to the component Get Access

Installation

To install the Quest react-sdk into your project, follow these steps:

• 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.

Usage

To integrate the Onboarding component into your React application, follow these steps

• Import the CSS: In your JavaScript or TypeScript file where you're using the Onboarding, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

import '@questlabs/react-sdk/dist/style.css'

• Import the OnboardingComponent: Import the Onboarding component from the @questlabs/react-sdk package.

• Import the QuestProvider Component: Import the QuestProvider component from the @questlabs/react-sdk package.

import { QuestProvider, Onboarding }  from '@questlabs/react-sdk';

• Pass the Required Props: Pass the required props to the QuestProvider. The required props are apiKey, and entityId. and required props for the Onboardingcomponent are userId, questId, token

Steps

QuestProvider

import { QuestProvider, Onboarding} from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <Onboarding> </Onboarding>
      </QuestProvider>
  );
}

export default App;

Onboarding

 <Onboarding
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // children
</Onboarding>

Header

<Onboarding.Header
    heading='your-heading' 
    subHeading='your-subHeading' 
    style= {{ backgroundcolor : 'white' }} 
    headingStyle= {{ fontSize : '20px }} 
    descriptionStyle= {{ fontSize : '14px' }}
/>

Footer

<Onboarding.Footer
    text='your-company-name' 
    link='redirect-link'
    style={{ background : 'white' }}
/>

OnboardingPreview

<QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
       <Onboarding
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
          <Onboarding.Header />
          <Onboarding.Content />
          <Onboarding.Footer />
        </Onboarding>
 </QuestProvider> 

Replace "your-api-key" and "your-entity-id" with your actual Quest API credentials

Replace "your-token", "your-user-id", "your-questId" with your actual configuration details.

Example Usage

Here's an example of how to use the Onboardingcomponent within your React application

Onboarding

import { QuestProvider, Onboarding} from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
       <Onboarding
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
        <Onboarding.Header />
        <Onboarding.Content />
        <Onboarding.Footer />
        </Onboarding>
      </QuestProvider>
    </div>
  );
}

export default App;

OnboardingWrapper

import { QuestProvider, OnboardingWrapper } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id"
        apiType= "PRODUCTION" // STAGING 
      >
       <OnboardingWrapper
          userId=""
          questId=""
          token=""
          controlBtnType="Buttons"
          design={[[1, 2, 3], [4, 5, 6], [7, 8]]}
          Headers={[
              {
                heading: "",
                subHeading: "",
              }
          ]}
          loadingTracker={true}
          multiChoice="modal2"
          nextBtnText=""
          onPageChange={}
          progress={["", ""]}
          progressBarMultiLine={true}
          setLoading={}
          showFooter={true}
          singleChoose="modal1"
          styleConfig={{
              Description: {},
              EmailError: {
                errorStyle: {},
                text: ""
              },
              Footer: {
                FooterIcon: {},
                FooterLink: "",
                FooterStyle: {},
                FooterText: "",
                FooterTextStyle: {}
              },
              Form: {},
              Heading: {},
              Input: {},
              Label: {},
              MultiChoice: {
                 isLabel: false,
                 selectedStyle: {},
                 style: {}
              },
              NumberError: {
                  errorStyle: {},
                  text: ""
              },
              PrimaryButton: {},
              ProgressBar: {
                  completeTabColor: "",
                  currentTabColor: "",
                  pendingTabColor: ""
              },
              SecondaryButton: {},
              SingleChoice: {
                  hoverBackground: "",
                  selectedStyle: {},
                  style: {}
              },
              TextArea: {},
              TextAreaError: {
                  errorStyle: {},
                  text: ""
              },
              TextError: {
                  errorStyle: {},
                  text: ""
              },
              Topbar: {}
          }}
          template="single-page"
          token=""
          uniqueEmailId=""
          uniqueUserId=""
          userId={userId}
          variation=""
        />
      </QuestProvider>
    </div>
  );
}

export default App;

The above example uses all the props.

Prop Name	Type	Required	Details
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.
Headers	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.

Headers

Headers= [{
  heading: 'Your Heading' 
  subHeading : 'Your SubHeading'
}]

You can customize the UI with type of styleConfig would be

styleConfig={{
    Description: {},
    EmailError: {
        errorStyle: {},
        text: ""
    },
    Footer: {
        FooterIcon: {},
        FooterLink: "",
        FooterStyle: {},
        FooterText: "",
        FooterTextStyle: {}
    },
    Form: {},
    Heading: {},
    Input: {},
    Label: {},
    MultiChoice: {
        isLabel: false,
        selectedStyle: {},
        style: {}
    },
    NumberError: {
        errorStyle: {},
        text: ""
    },
    PrimaryButton: {},
    ProgressBar: {
        completeTabColor: "",
        currentTabColor: "",
        pendingTabColor: ""
    },
    SecondaryButton: {},
    SingleChoice: {
        hoverBackground: "",
        selectedStyle: {},
        style: {}
    },
    TextArea: {},
    TextAreaError: {
        errorStyle: {},
        text: ""
    },
    TextError: {
        errorStyle: {},
        text: ""
    },
    Topbar: {}
}}

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 Headers props.

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

Other Props Customization

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.

Demo