> 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/user-assistance/survey-component.md).

# Survey Component

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

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

{% tab title="Visual 4" %}

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

{% tab title="Visual 5" %}

<figure><img src="/files/1SezuBeByfsDxVw9BP82" alt="" width="563"><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:

```jsx
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 %}

***

The `Tutorial`component accepts the following props

## Usage

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

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Surveyl`, 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 TutorialComponent**: Import the `Survey`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

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

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

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

## Code & Steps

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

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

export default App;
```

{% endtab %}

{% tab title="Survey" %}

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

{% endtab %}

{% tab title="Header" %}

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

{% endtab %}

{% tab title="Footer" %}

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

{% endtab %}

{% tab title="Preview" %}

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

{% endtab %}
{% endtabs %}

***

## **Example Usage**

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

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

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

export default App;
```

{% endtab %}

{% tab title="SurveyWrapper" %}

```jsx
import { QuestProvider, SurveyWrapper } 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 
            >
                <SurveyWrapper
                    userId=""
                    questId=""
                    token=""
                    showFooter={true}
                    ratingType="number"
                    itemsPerPage={3}
                    singleChoiceModal="modal2"
                    multiChoiceModal="modal2"
                    uniqueUserId="sdsddfakmfdddcrt"
                    design={[[1, 2], [3, 4, 5]]}
                    Headers={[
                        {
                            heading: "",
                            subHeading: ""
                        }
                    ]}
                    bgColor=""
                    btnColor=""
                    btnTextColor=""
                    crossLogoForInput={false}
                    delay={ }
                    expiryDate={ }
                    font=""
                    heading=""
                    iconColor=""
                    onCancel={ }
                    onSubmit={ }
                    sections={ }
                    styleConfig={{
                        Description: {},
                        Form: {},
                        Heading: {},
                        Input: {},
                        Label: {},
                        PrimaryButton: {},
                        SecondaryButton: {},
                        TextArea: {},
                        EmailError: {},
                        Footer: {},
                        Modal: {},
                        MultiChoice: {},
                        Rating: {},
                        SingleChoice: {},
                        TopBar: {}
                    }}
                    subHeading=""
                    supportUrl=""
                    textColor=""
                    uniqueEmailId=""
                    variation=""
                />
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}
{% endtabs %}

## Props of Survey Component

The **`Survey`**  component accepts the following props

<table><thead><tr><th width="202">Prop Name</th><th width="95">Type</th><th width="128">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>userId</strong></td><td>string</td><td>required </td><td>The unique identifier of the user.</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing Survey or quest data.</td></tr><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>The unique identifier for the Survey or quest</td></tr><tr><td><strong>heading</strong></td><td>string</td><td>required</td><td>The title or heading of the Survey</td></tr><tr><td><strong>subHeading</strong></td><td>string</td><td>required</td><td>A brief description  for the Survey</td></tr><tr><td><strong>font</strong></td><td>string</td><td>optional</td><td>This helps to change Font-Family as per requirements</td></tr><tr><td><strong>supportUrl</strong></td><td>string</td><td>optional</td><td>give you url location for support</td></tr><tr><td><strong>isInline</strong></td><td>boolean</td><td>optional</td><td>true: behave inline feedback<br>false: behave as feedback component</td></tr><tr><td><strong>color</strong></td><td>string</td><td>optional</td><td>The text color of other UI elements in the component.</td></tr><tr><td><strong>bgColor</strong></td><td>string</td><td>optional</td><td>The background color of the entire component.</td></tr><tr><td><strong>btnColor</strong></td><td>string</td><td>optional</td><td>The background color of continue and Submit button</td></tr><tr><td><strong>ratingType</strong></td><td>string</td><td>optional</td><td>This helps in Change the rating icons</td></tr><tr><td><strong>textColor</strong></td><td>string</td><td>optional</td><td>give you color to text</td></tr><tr><td><strong>btnTextColor</strong></td><td>boolean</td><td>optional</td><td>The Text color of continue and Submit button</td></tr><tr><td><strong>itemsPerPage</strong></td><td>number</td><td>optional</td><td>To set number of questions per page</td></tr><tr><td><strong>iconColor</strong></td><td>string</td><td>optional</td><td>The quest logo icon color</td></tr><tr><td><strong>onSubmit</strong></td><td>function</td><td>optional</td><td>Callback function triggered on form submission.</td></tr><tr><td><strong>onCancel</strong></td><td>function</td><td>optional</td><td>Callback function triggered on form cancelation.</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>Unique user identifier.</td></tr><tr><td><strong>showFooter</strong></td><td>boolean</td><td>optional</td><td>true: show footer<br>false: hide footer</td></tr><tr><td><strong>enableVariation</strong></td><td>boolean</td><td>optinal</td><td>true: for enable multiple variation <br>false no multiple variation</td></tr><tr><td><strong>styleConfig</strong></td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the survey process, including form, headings, descriptions, inputs, labels,  text area, buttons, modal, and footer .</td></tr></tbody></table>

## Features

* **Versatile Survey Components:** Integrate diverse survey elements into your app, allowing for comprehensive data collection tailored to various use cases.
* **Seamless Integration:** Enable easy incorporation of the survey solution into your customer's application, ensuring a smooth and hassle-free user experience.
* **Dedicated Surveys Category:** Provide a centralized hub within the app, featuring a range of templates for streamlined management and efficient access to different survey types.
* **Customizable Templates:** Tailor surveys to specific needs with customizable templates, empowering users to adapt and optimize data collection for their unique requirements.

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

```
styleConfig = {{
    Description: { },
    Form: { },
    Heading: { },
    Input: { },
    Label: { },
    PrimaryButton: { },
    SecondaryButton: { },
    TextArea: { },
    EmailError: { },
    Footer: { },
    Modal: { },
    MultiChoice: { },
    Rating: { },
    SingleChoice: { },
    TopBar: { }
}}
```