Walk Through Component

The WalkThrough component is used to guide users through a series of steps in a quest or tutorial. It provides a visual overlay with step-by-step instructions and can be customized to fit the specific

Component Visuals

To unlock early access to the component Get Access

Demo

Installation

To integrate the WalkThrough component into your project, follow these steps:

  1. Open your terminal/command prompt.

  2. Navigate to your project's root directory using the cd command if you're not already there.

  3. Run the following command to install the @questlabs/react-sdk package using npm:

    npm install @questlabs/react-sdk

    This command will download and install the package and its dependencies into your project.

    Note: 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

Here's an example of how to use the WalkThrough component in your React application:

import React from 'react';
import {WalkThrough,QuestProvider} from '@questlabs/react-sdk/WalkThrough';

function App() {
  return (
    <QuestProvider apiKey={"your api key"} entityId={"your entityId"}>
      {/* Other components or content in your app */}
      <WalkThrough
        onFinish={() => {
          // Handle finish logic here
        }}
        actions={{
              2: () => {
                   // this is invoked before user goes to 2nd step           
                  }
          }}
        isOpen={true} // Set to true to initially show the walkthrough
        questId="your-quest-id"
        userId="your-user-id"
        token="your-token"
        // backgroundColor="black"
        // color=""
        // btnBackGroundColor="white"
        // btnColor="black"
      />
    </QuestProvider>
  );
}

export default App;

Props

Prop NameTypeRequiredDescription

onFinish

function

optional

A function to be executed when the walkthrough is finished.

onClose

function

optional

A function to be executed when the walkthrough is closed. If not provided, the walkthrough will be invisible by default.

isOpen

boolean

optional

If true, the walkthrough is visible; if false, it is hidden.

questId

string

required

The ID of the quest for which the walkthrough is being displayed.

token

string

required

An authentication token for accessing the quest data.

userId

string

required

The ID of the user for whom the walkthrough is being displayed.

backgroundColor

string

optional

Sets background color of component.

btnBackGroundColor

string

optional

Sets background color of next button.

btnColor

string

optional

Sets colour of next button.

Color

string

optional

Sets color of component.

actions

object of function

optional

it is an Object which contains functions where you can trigger any action when user triggers the next button ex: actions={{ 2: () => { } }} means when user clicks on next button at step 1 this function will be triggered you can perform any actions inside callback.

Component Behavior

  • The WalkThrough component displays a series of steps to guide users through a quest.

  • It can be shown or hidden based on the isOpen prop.

  • Automatically scrolls to the next target element if autoScroll is on

  • When the walkthrough is finished (onFinish is called), the component becomes invisible.

Customization

You can customize the behavior of the WalkThrough component by providing the onClose function. If onClose is not provided, the walkthrough will be invisible by default.

Feel free to adjust the wording or add more details as needed! If you have specific requirements or if there's anything else you'd like to include, let me know.

Last updated