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

Overview

Visual 1

To unlock early access to the component Get Access

Demo

https://drive.google.com/file/d/1iKnGhYJUfwxGobCAVT-OM-glJC_KZ0Ub/view?usp=sharingdrive.google.com

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 { QuestProvider, WalkThrough } from '@questlabs/react-sdk';

function App() {
  return (
    <QuestProvider apiKey={"your api key"} entityId={"your entityId"}>
      {/* Other components or content in your app */}
      <WalkThrough
        onFinish={() => {
          // Handle finish logic here
        }}
        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"
        onComplete={() => { alert('Welcome to the page'); setIsOpen(false) }}
        onRequestClose={() => setIsOpen(false)}
        onAfterOpen={() => document.documentElement.style.overflow = 'hidden'}
        onBeforeClose={() => document.documentElement.style.overflow = ''}
        tooltip={true}
      />
    </QuestProvider>
  );
}

export default App;

Props

Prop Name	Type	Required	Description
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.
tooltip	boolean	optional	if true tooltip will show else not
hideArrow	boolean	optional	if true arrow icon will show else not
onComplete	function	optional	Function to be executed when the walk through is completed
firstButtonText	string	optional	what should be your first button text
lastButtonText	string	optional	what should be your last button text
handleFirstButtonClick	function	optional	this functional is for handle your first action
handleLastButtonClick	function	optional	this functional is for handle your last action
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.