> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/onboarding-component.md).

# Onboarding Component

## Component Visuals

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/wlZKaDXIIPlP71qVYIXe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/K6kr2L2wq9jB09XsThkZ" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/tF5XzdvRFTP7PCYOBRBc" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="/files/ZntzRUyGsBntAXhdzCH7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

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

```bash
npm install @questlabs/react-sdk
```

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

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

## Usage

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

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

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the OnboardingComponent**: Import the `Onboarding` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, Onboarding }  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 `Onboarding`component are `userId, questId, token`

## Steps

{% tabs %}
{% tab title="QuestProvider" %}

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

export default App;
```

{% endtab %}

{% tab title="Onboarding" %}

```
 <Onboarding
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // children
</Onboarding>
```

{% endtab %}

{% tab title="Header" %}

```
<Onboarding.Header
    heading='your-heading' 
    subHeading='your-subHeading' 
    style= {{ backgroundcolor : 'white' }} 
    headingStyle= {{ fontSize : '20px }} 
    descriptionStyle= {{ fontSize : '14px' }}
/>
```

{% endtab %}

{% tab title="Footer" %}

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

{% endtab %}

{% tab title="OnboardingPreview" %}

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

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Replace `"your-api-key"` and `"your-entity-id"` with your actual Quest API credentials
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`, `"your-user-id", "your-questId"` with your actual configuration details.
{% endhint %}

## Example Usage

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

{% tabs %}
{% tab title="Onboarding" %}

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

export default App;
```

{% endtab %}

{% tab title="OnboardingWrapper" %}

```jsx
import { QuestProvider, OnboardingWrapper } 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 
      >
       <OnboardingWrapper
          userId=""
          questId=""
          token=""
          controlBtnType="Buttons"
          design={[[1, 2, 3], [4, 5, 6], [7, 8]]}
          Headers={[
              {
                heading: "",
                subHeading: "",
              }
          ]}
          loadingTracker={true}
          multiChoice="modal2"
          nextBtnText=""
          onPageChange={}
          progress={["", ""]}
          progressBarMultiLine={true}
          setLoading={}
          showFooter={true}
          singleChoose="modal1"
          styleConfig={{
              Description: {},
              EmailError: {
                errorStyle: {},
                text: ""
              },
              Footer: {
                FooterIcon: {},
                FooterLink: "",
                FooterStyle: {},
                FooterText: "",
                FooterTextStyle: {}
              },
              Form: {},
              Heading: {},
              Input: {},
              Label: {},
              MultiChoice: {
                 isLabel: false,
                 selectedStyle: {},
                 style: {}
              },
              NumberError: {
                  errorStyle: {},
                  text: ""
              },
              PrimaryButton: {},
              ProgressBar: {
                  completeTabColor: "",
                  currentTabColor: "",
                  pendingTabColor: ""
              },
              SecondaryButton: {},
              SingleChoice: {
                  hoverBackground: "",
                  selectedStyle: {},
                  style: {}
              },
              TextArea: {},
              TextAreaError: {
                  errorStyle: {},
                  text: ""
              },
              TextError: {
                  errorStyle: {},
                  text: ""
              },
              Topbar: {}
          }}
          template="single-page"
          token=""
          uniqueEmailId=""
          uniqueUserId=""
          userId={userId}
          variation=""
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

<table><thead><tr><th width="256">Prop Name</th><th width="95">Type</th><th width="99">Required</th><th>Details</th></tr></thead><tbody><tr><td>userId</td><td>string</td><td>required</td><td>The unique identifier for the user participating in the onboarding process.</td></tr><tr><td>token</td><td>string</td><td>required</td><td>An authentication token used for authorization.</td></tr><tr><td>questId</td><td>string</td><td>required</td><td>The unique identifier for the onboarding quest that defines the sequence of screens and questions.</td></tr><tr><td>uniqueUserId</td><td>string </td><td>optional</td><td>Unique user identifier.</td></tr><tr><td>uniqueEmailId</td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td>design</td><td>array of arrays</td><td>optional</td><td>Specifies the layout of screens within the onboarding process.</td></tr><tr><td>Headers</td><td>array of objects</td><td>optional</td><td>Defines the headings and descriptions for each screen in the onboarding process.</td></tr><tr><td>singleChoice</td><td>string</td><td>optional</td><td>Defines the type of single-choice input to be used.</td></tr><tr><td>multiChoice</td><td>string </td><td>optional</td><td>Defines the type of multi-choice input to be used. </td></tr><tr><td>getAnswers</td><td>function</td><td>optional</td><td>A callback function to retrieve user answers during the onboarding process.</td></tr><tr><td>answers</td><td>object</td><td>optional</td><td>An object representing user responses to onboarding questions.</td></tr><tr><td>setAnswer</td><td>function</td><td>optional</td><td>A function to update the answer object when the user responds.</td></tr><tr><td>customComponents</td><td>array</td><td>optional</td><td>An array of custom components to be included within the onboarding screens.</td></tr><tr><td>customComponentPositions</td><td>number</td><td>optional</td><td>Defines the positions within the onboarding process where custom components can be inserted.</td></tr><tr><td>progress</td><td>array of string</td><td>optional</td><td>The headings of progress bar for each tab.</td></tr><tr><td>loadingTracker</td><td>boolean</td><td>optional</td><td>Boolean indicating whether the loading tracker is active.</td></tr><tr><td>setLoading</td><td>function</td><td>optional</td><td> Function to set loading state.</td></tr><tr><td>nextBtnText</td><td>string</td><td>optional</td><td>Text for the next button.</td></tr><tr><td>progressBarMultiLine</td><td>boolean</td><td>optional</td><td> Indicates whether the progress bar is displayed in multiple lines.</td></tr><tr><td>controlBtnType</td><td>string</td><td>optional</td><td>Type of control buttons "Arrow" or "Buttons".</td></tr><tr><td>template</td><td>string</td><td>optional</td><td>Template types : "multi-question" or "single-question".</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>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.</td></tr></tbody></table>

**Headers**

<pre><code><strong>Headers= [{
</strong>  heading: 'Your Heading' 
  subHeading : 'Your SubHeading'
}]
</code></pre>

**You can customize the UI with type of styleConfig would be**

```
styleConfig={{
    Description: {},
    EmailError: {
        errorStyle: {},
        text: ""
    },
    Footer: {
        FooterIcon: {},
        FooterLink: "",
        FooterStyle: {},
        FooterText: "",
        FooterTextStyle: {}
    },
    Form: {},
    Heading: {},
    Input: {},
    Label: {},
    MultiChoice: {
        isLabel: false,
        selectedStyle: {},
        style: {}
    },
    NumberError: {
        errorStyle: {},
        text: ""
    },
    PrimaryButton: {},
    ProgressBar: {
        completeTabColor: "",
        currentTabColor: "",
        pendingTabColor: ""
    },
    SecondaryButton: {},
    SingleChoice: {
        hoverBackground: "",
        selectedStyle: {},
        style: {}
    },
    TextArea: {},
    TextAreaError: {
        errorStyle: {},
        text: ""
    },
    TextError: {
        errorStyle: {},
        text: ""
    },
    Topbar: {}
}}
```

#### OnBoarding 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 `Headers` props.
5. **Integration with API**: The component integrates with your API to retrieve onboarding criteria and eligibility data, enhancing the user experience.

#### Other Props Customization

1. Customize the onboarding experience by adjusting the props to meet your application's requirements.
2. Utilize the `getAnswers` and `setAnswer` functions to manage user responses and data collection.
3. Integrate the `OnBoarding` component with your API to retrieve relevant onboarding criteria and eligibility data.

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

## Demo

{% embed url="<https://drive.google.com/file/d/1rpOwtHSJF-ZN9U1DsTwaWOq3kuYkvIRz/view>" %}