Challenges Component

Component Visuals

Overview

Visual 1

Visual 2

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.

---

The Challengescomponent accepts the following props

Usage

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

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

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

• Import the TutorialComponent: Import the Challenges component from the @questlabs/react-sdk package.

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

import { QuestProvider }, Challenges 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 Challengescomponent are userId, questId, token

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.

Code & Steps

QuestProvider

import { QuestProvider, Challenges } 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 
      >
      <Challenges> </Challenges>
      </QuestProvider>
  );
}

export default App;

Challenges

  <Challenges
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // childrens
</Challenges>

Header

<Challenges.Header
    iconStyle={ }
    icon=""
    title=""
    heading='your-heading' 
    subHeading='your-subHeading' 
    style= {{ backgroundcolor : 'white' }} 
    headerStyle= {{ fontSize : '20px }} 
    descriptionStyle= {{ fontSize : '14px' }}
/>

Footer

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

Preview

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

Example Usage

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

Challenges

import { QuestProvider, Challenges } 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 
      >
       <Challenges
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
          <Challenges.Header />
          <Challenges.Content />
          <Challenges.Footer />
        </Challenges>
      </QuestProvider>
    </div>
  );
}

export default App;

ChallengesWrapper

import { QuestProvider, ChallengesWrapper } 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 
      >
       <ChallengesWrapper
          token=""
          userId=""
          questId=""
          enableVariation={true}
          styleConfig={{
            Form: {},
            MainHeading: {},
            Heading: {},
            Search: {},
            Description: {},
            PointsColor: {},
            ProgressBarColor: {},
            InnerBackground: {},
            IconStyle: {},
            Footer: {},
          }}
          isLoader={true}
          mainHeading=""
          showFooter={true}
          subHeading=""
          uniqueEmailId=""
          uniqueUserId=""
        />
      </QuestProvider>
    </div>
  );
}

export default App;

Challenges Component Props

The Challenges component accepts a variety of props to configure and customize the challenges process:

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.
title	string	required	set the title of your component
enableVariation	boolean	optional	To enable different type of variations
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.
isLoader	boolean	optional	Hides or Enables the loader.
mainHeading	string	optional	Sets the main heading.
subHeading	string	optional	Sets the sub heading.
showFooter	boolean	optional	Hides or enables the Footer
uniqueUserId	string	optional	UniqueUserid for external Login.
uniqueEmailId	string	optional	UniqueEmailId for external login.

The above example uses all the props.

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

You can customize the UI with type of styleConfig would be

styleConfig={{
    Form: {},
    MainHeading: {},
    Heading: {},
    Search: {},
    Description: {},
    PointsColor: {},
    ProgressBarColor: {},
    InnerBackground: {},
    IconStyle: {},
    Footer: {},
}}

Challenges Component Usage

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

Import the necessary components and dependencies:

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

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

2. Integrate the Challenges component with your API to retrieve relevant challenges data and users ranking data.

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