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 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:
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 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.
Pass the Required Props: Pass the required props to the
QuestProvider
. The required props areapiKey
, andentityId
. and required props for theOnboarding
component areuserId, questId, token
Steps
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 Onboarding
component within your React application
The above example uses all the props.
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
You can customize the UI with type of styleConfig would be
OnBoarding Component Features
Interactive Onboarding: The component guides users through a sequence of screens, collects their responses, and provides customization options for a dynamic onboarding experience.
Customization Options: You can customize various aspects of the onboarding process, including colors, input styles, button sizes, font sizes, and more.
Data Collection: The component collects user responses, allowing you to set and update answers as users progress through the onboarding flow.
Dynamic Content: Customize the content and appearance of onboarding screens based on the
design
andHeaders
props.Integration with API: The component integrates with your API to retrieve onboarding criteria and eligibility data, enhancing the user experience.
Other Props Customization
Customize the onboarding experience by adjusting the props to meet your application's requirements.
Utilize the
getAnswers
andsetAnswer
functions to manage user responses and data collection.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
Last updated