Challenges Component

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:

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.

import '@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

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;

Example Usage

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

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;

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.

PreviousGamificationNextDailyStreak Component

Last updated