Challenges Component

Component Visuals

Overview

Visual 1

Visual 2

To unlock early access to the component Get Access

Installation

To use the Challenges Component 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.

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

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.

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.

You can customize the UI with type of styleConfig would be

 styleConfig?: {
        Form?: CSSProperties,
        MainHeading?: CSSProperties,
        Heading?: CSSProperties,
        Search?: {
            background?: string,
            color?: string
        },
        Description?: CSSProperties,
        PointsColor?: CSSProperties,
        ProgressBarColor?: CSSProperties,
        InnerBackground?: CSSProperties,
        IconStyle?: {
            color?: string,
        }
        Footer? : {
            FooterIcon?: CSSProperties,
            FooterStyle?: CSSProperties,
            FooterText?: CSSProperties,        
    }

Challenges Component Usage

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

Import the necessary components and dependencies:

Online

import { Challenges } from '@questLabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

Offline

import { Challenges } from '@questLabs/react-sdk/offline';

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

Online

<Challenges
  userId={"/* User ID */"}
  token={"/* Authentication token */"}
  questId={"/* Onboarding quest ID */"}
  enableVariation={"/* Boolean value to show variation */"}
   styleConfig?: {{
        Form?: CSSProperties,
        MainHeading?: CSSProperties,
        Heading?: CSSProperties,
        Search?: {
            background?: string,
            color?: string
        },
        Description?: CSSProperties,
        PointsColor?: CSSProperties,
        ProgressBarColor?: CSSProperties,
        InnerBackground?: CSSProperties,
        IconStyle?: {
            color?: string,
        }
        Footer? : {
            FooterIcon?: CSSProperties,
            FooterStyle?: CSSProperties,
            FooterText?: CSSProperties,        
    }}
/>

Offline

<Challenges
  enableVariation={"/* Boolean value to show variation */"}
   offlineFormData={"/* Action fields */"}
   styleConfig?: {{
        Form?: CSSProperties,
        MainHeading?: CSSProperties,
        Heading?: CSSProperties,
        Search?: {
            background?: string,
            color?: string
        },
        Description?: CSSProperties,
        PointsColor?: CSSProperties,
        ProgressBarColor?: CSSProperties,
        InnerBackground?: CSSProperties,
        IconStyle?: {
            color?: string,
        }
        Footer? : {
            FooterIcon?: CSSProperties,
            FooterStyle?: CSSProperties,
            FooterText?: CSSProperties,    
        }    
    }}
/>

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.

Example Usage

Online

import React, { useState } from 'react';
import {Challenges} from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function YourApp() {

    return (
        <div className="App">
            {/* Render your application content here */}

            {/* Include the Challenges component */}
            <QuestProvider 
              apiKey={"your api key"} 
              entityId={"your entity Id"}
              apiType ={"STAGING" OR "PRODUCTION"}
              featureFlags={{}}
              >
                <Challenges
                    userId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
                    token="xxxxxzI1NiIsZiNmZkMGJxxxxxxxxOCIsImlhdCI6MTY5Mzg4MDUxxxxxxxxx3SHKDjJ6NQ7OPuzAL6jCzI"
                    questId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
                    enableVariation={true}
                    
                    styleConfig={{

                           Form: {},
                           MainHeading: {},
                           Heading: {},
                           Search: {
                               background:"",
                               color:""
                           },
                           Description: {},
                           PointsColor: {},
                           ProgressBarColor: {},
                           InnerBackground: {},
                           IconStyle: {
                                 color: "",
                           },
                           MultiChoice: {
                                style: {},
                                selectedStyle: {}
                           },
                           Footer: {
                                FooterIcon: {},
                                FooterStyle:  {},
                                FooterText:  {}
                           }
                    }}
                />
            </QuestProvider>
        </div>
);
}

export default YourApp;

Offline

import React, { useState } from 'react';
import {Challenges} from '@questlabs/react-sdk/offline';

function YourApp() {
    return (
        <div className="App">
            {/* Render your application content here */}

            {/* Include the OnBoarding component */}
            <QuestProvider apiKey={"your api key"} entityId={"e-cbd0cc-3fcb-4085-a95e-71274fa7ac"}
                           featureFlags={{}}>
                   <Challenges
                        enableVariation={true}
                        offlineFormData={[
                          {
                            "type": "USER_INPUT_TEXT",
                            "title": "First name",
                            "metricCount": "50",
                            "criteriaId": "ec-2733e056-350c-40d9-acfd-833882e99117",
                            "isLocked": true,
                            "progressCount": 50,
                            "progressData": 10,
                          }]}
                        styleConfig={{
                           Form: {},
                           MainHeading: {},
                           Heading: {},
                           Search: {
                               background:"",
                               color:""
                           },
                           Description: {},
                           PointsColor: {},
                           ProgressBarColor: {},
                           InnerBackground: {},
                           IconStyle: {
                                 color: "",
                           },
                           MultiChoice: {
                                style: {},
                                selectedStyle: {}
                           },
                           Footer: {
                                FooterIcon: {},
                                FooterStyle:  {},
                                FooterText:  {}
                           }
                        }}
                />
            </QuestProvider>
        </div>
);
}

export default YourApp;