Get Started Component
The GetStarted component is a part of the Quest Labs React SDK. It provides a quick start guide for users to explore and engage with Application.
Component Visuals

Installation
To use the GetStarted
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.
Usage
To integrate the GetStarted
component into your React application, follow these steps
Import the CSS: In your JavaScript or TypeScript file where you're using the
GetStarted
, 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 TutorialComponent: Import the
GetStarted
component from the@questlabs/react-sdk
package.Import the QuestProvider Component: Import the
QuestProvider
component from the@questlabs/react-sdk
package.
import { QuestProvider, GetStarted } from '@questlabs/react-sdk';
Pass the Required Props: Pass the required props to the
QuestProvider
. The required props areapiKey
, andentityId
. and required props for theGetStarted
component areuserId, questId, token
Code & Steps
import { QuestProvider, GetStarted } 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
>
<GetStarted> </GetStarted>
</QuestProvider>
);
}
export default App;
Example Usage
Here's an example of how to use the GetStarted
component within your React application
import { QuestProvider, GetStarted } 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
>
<GetStarted
userId=""
questId=""
token=""
uniqueUserId="your-unique-user-id"
>
<GetStarted.Header />
<GetStarted.Progress />
<GetStarted.Content />
<GetStarted.Footer />
</GetStarted>
</QuestProvider>
</div>
);
}
export default App;
Component Props
The GetStarted
component accepts the following props:
userId
string
required
User ID for authentication.
token
string
required
Authentication token.
questId
string
required
ID of the Quest.
onCompleteAllStatus
function
optional
Callback function for handling completion status.
iconUrls
array of strings
required
Array of strings representing icon of urls.
uniqueUserId
string
optional
Unique user identifier.
uniqueEmailId
string
optional
Unique email identifier.
headingText
string
optional
Text for heading.
descriptionText
string
optional
Text for description.
autoHide
boolean
optional
Boolean to control auto hide behavior.
showProgressBar
boolean
optional
Boolean to control progress bar display.
arrowColor
string
optional
Color for arrows.
showLoadingIndicator
boolean
optional
Boolean to control loading indicator display.
showAnnouncement
boolean
optional
Boolean to control announcement display.
allowMultiClick
boolean
optional
Boolean to allow multi-click.
questIconColor
string
optional
Color for quest icons.
showFooter
boolean
optional
Helps remove or add footer in component.
onLinkTrigger
function
optional
Callback function for handling link triggers.
template
number
optional
Template types : 1 or 2.
ButtunType
string
optional
ButtonType: Arrow or Button
onLoad
function
optional
Runs after page loads
variation
string
optional
used to create different-2 variations
isImageOpen
boolean
optional
Boolean to control image
styleConfig
object
optional
An object containing CSS properties for styling various components within the get started process, including form, topbar, headings, descriptions, and buttons.
Headers
Headers= [{
heading: 'Your Heading'
subHeading : 'Your SubHeading'
}]
You can customize the UI with type of styleConfig would be
styleConfig = {{
Arrow: {
Background: "red",
CompletedBackground: "yellow",
CompletedIconColor: "red",
IconColor: "blue",
},
Card: { },
Description: { },
Footer: { },
Form: { },
Heading: { },
Icon: { },
PrimaryButton: { },
ProgressBar: {
barColor: "",
barParentColor: "",
ProgressText: { },
},
SecondaryButton: { },
Topbar: { },
CardContainer: { },
IsImageOpen: {
ContainerDiv: { },
ImageContainer: {
ImageContainerProperties: { },
Image: { },
},
},
}}
You can customize the UI with the type of styleConfig would be
Demo
Last updated