# User Experience Feedback Survey

## Component Visuals

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FGxca7Z5pJfKhj4c0Xu4g%2FSurveys%20genaral%20Temp%201.png?alt=media&#x26;token=64658385-2373-45ea-9ba6-b65a4bcab758" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FDz6zmLSTi9L7YIxaxg46%2Fsurvey%20Temp%201%20v1.png?alt=media&#x26;token=dee0d9f3-fcce-4df1-98d9-c9162e928616" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FgTsWHvJOXPFvBAYwgZ8D%2Fsurvey%20Temp%201%20v2.png?alt=media&#x26;token=4c5f8e99-0e95-4b76-a052-222ebbb87ff0" 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:

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

## Features

* **Versatile User Experience Feedback 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.

## Props of Survey Component

The **`User Experience Feedback 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>bgColor</strong></td><td>string</td><td>optional</td><td>This helps to change Background color as per requirements. Works only for liner-gradient and radial-gradient.</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>btnTextColor</strong></td><td>string</td><td>optional</td><td>The Text color of continue and Submit button</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>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>questionsPerSections</td><td>array of arrays</td><td>optional</td><td>Specify the number of questions in a section.</td></tr><tr><td>entityAuthenticationToken</td><td>string</td><td>optional</td><td>Authentication token for login.</td></tr><tr><td>variation</td><td>string</td><td>optional</td><td>To specify variation</td></tr><tr><td><strong>showFooter</strong></td><td>boolean</td><td>optional</td><td>To show or hide the component footer</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>

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

```
  styleConfig?: {
      Description: React.CSSProperties,
      EmailError: {
        errorStyle: React.CSSProperties,
        text: string,
      },
      Footer: {
        FooterIcon: React.CSSProperties,
        FooterStyle: React.CSSProperties,
        FooterText: React.CSSProperties,
      },
      Form?: React.CSSProperties,
      Heading?: React.CSSProperties,
      Modal?: React.CSSProperties,
      Input?: React.CSSProperties,
      Label?: React.CSSProperties,
      MultiChoice?: {
        selectedStyle: React.CSSProperties,
        style: React.CSSProperties,
      },
      PrimaryButton: React.CSSProperties,
      Rating: {
        Hover: React.CSSProperties,
        LeftRatingText: string,
        RatingContainer: React.CSSProperties,
        RatingText: React.CSSProperties,
        RightRatingText: string,
        SingleRating: React.CSSProperties,
      },
      SecondaryButton: React.CSSProperties,
      TextArea: React.CSSProperties,
      TopBar: React.CSSProperties,
  }
```

## Usage

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

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `User Experience Feedback Survey`, 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 Survey Component**: Import the `User Experience Feedback 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`, `apiSecret`, and `entityId`. and required props for the `User Experience Feedback Survey` component are `userId, questId, token`.&#x20;

<pre class="language-jsx"><code class="lang-jsx">&#x3C;QuestProvider
  apiKey="your-api-key"
  entityId="your-entity-id"
>
  &#x3C;Survey
    userId="your user-id"
    token="your-token"
    questId="your quest-Id"
    heading="Heading"
    subHeading="SubHeading"
    bgColor="gradient or radial backgroung color"
    ratingType="emoji"
    iconColor="Any color"
    onSubmit={() => { }}
    uniqueEmailId="your unique user emailid"
    uniqueUserId="your unique user emailid"
    questionSections={[[1, 2], [3, 4, 5], [6, 7, 8]]}
    entityAuthenticationToken="your Entity Authentication Token"
    variation="variation string"
    showFooter={true}
    styleConfig?:{{
        Description?: CSSProperties,
        EmailError?: {
          errorStyle?: CSSProperties,
          text?: string,
        },
        Footer?: {
          FooterIcon?: CSSProperties,
          FooterStyle?: CSSProperties,
          FooterText?: CSSProperties,
        },
        Form?: CSSProperties,
        Heading?: CSSProperties,
        Input?: CSSProperties,
        Label?: CSSProperties,
        Modal?: CSSProperties,
        MultiChoice?: {
          selectedStyle?: CSSProperties,
          style?: CSSProperties,
        },
        PrimaryButton?: CSSProperties,
          Rating?: {
            Hover?: CSSProperties,
            LeftRatingText?: string,
            RatingContainer?: CSSProperties,
              RatingText?: CSSProperties,
              RightRatingText?: CSSProperties,
              SingleRating?: CSSProperties,
            },
            SecondaryButton?: CSSProperties,
            TextArea?: CSSProperties,
            TopBar?: CSSProperties,
      }}
  />
<strong>&#x3C;/QuestProvider>
</strong></code></pre>

{% 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 userId`", "your-questId"` with your actual configuration details.
{% endhint %}

## Example Usage

Here's an example of how to use the `User Experience Feedback Survey`  component within your React application

```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 entityId"
        apiType = {/* mention type "STAGING" or "PRODUCTION" */} 
      >
       <Survey
          userId="your user-id"
          token="your-token"
          questId="your quest-Id"
          heading="Heading"
          subHeading="SubHeading"
          bgColor="gradient or radial backgroung color"
          ratingType="emoji"
          iconColor="Any color"
          onSubmit={() => { }}
          uniqueEmailId="your unique user emailid"
          uniqueUserId="your unique user emailid"
          questionSections={[[1, 2], [3, 4, 5], [6, 7, 8]]}
          entityAuthenticationToken="your Entity Authentication Token"
          variation="variation string"
          showFooter={true}
          styleConfig?:{{
              Description?: CSSProperties,
              EmailError?: {
                errorStyle?: CSSProperties,
                text?: string,
              },
              Footer?: {
                FooterIcon?: CSSProperties,
                FooterStyle?: CSSProperties,
                FooterText?: CSSProperties,
              },
              Form?: CSSProperties,
              Heading?: CSSProperties,
              Input?: CSSProperties,
              Label?: CSSProperties,
              Modal?: CSSProperties,
              MultiChoice?: {
                selectedStyle?: CSSProperties,
                style?: CSSProperties,
              },
              PrimaryButton?: CSSProperties,
                Rating?: {
                  Hover?: CSSProperties,
                  LeftRatingText?: string,
                  RatingContainer?: CSSProperties,
                    RatingText?: CSSProperties,
                    RightRatingText?: CSSProperties,
                    SingleRating?: CSSProperties,
                  },
                  SecondaryButton?: CSSProperties,
                  TextArea?: CSSProperties,
                  TopBar?: CSSProperties,
            }}
  />
      </QuestProvider>
    </div>
  );
}

export default App;
```

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

## Demo

{% embed url="<https://drive.google.com/file/d/1oCDRj6ocyHJc999Ky0VmCAovGM4qPXoV/view?usp=sharing>" %}