> 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/feedback-workflow-component.md).

# Feedback Workflow Component

## Component Visuals

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

<figure><img src="/files/7Or4SgGusP1t2ZE2IPXu" 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 %}

***

## Usage

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

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

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

### Code & Stpeps

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

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

export default App;


```

{% endtab %}

{% tab title="FeedbackWorkflow" %}

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

{% endtab %}

{% tab title="ThankYou" %}

```
<FeedbackWorkflow.ThankYou/>
```

{% endtab %}

{% tab title="Preview" %}

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

{% endtab %}
{% endtabs %}

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

## Example Usage

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

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

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

export default App;
```

{% endtab %}

{% tab title="FeedbackWorkflowWrapper" %}

```javascript
import { QuestProvider, TutorialWrapper } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
    return (
        <div>
            <QuestProvider
                apiKey="your api key"
                entityId="your entityid"
                featureFlags={{}}
                themeConfig={{
                    primaryColor: '',
                    secondaryColor: '',
                    borderColor: '',
                    buttonColor: '',
                    backgroundColor: 'white',
                    fontFamily: '',
                }}
            >
                <FeedbackWorkflow
                    contactUrl="your contect link"
                    isOpen={true}
                    questIds={[
                        'q-general-feedback',
                        'q-report-a-bug',
                        'q-request-a-feature',
                        'q-contact-us',
                    ]}
                    userId="your user id"
                    token="your jwt token"
                    GeneralFeedback={{
                        heading: 'General Feedback',
                        description: 'Give general feedback on this page',
                        formHeading: 'General Feedback',
                        formDescription: 'Give general feedback on this page',
                    }}
                    ReportBug={{
                        heading: 'Report a bug',
                        description: "Let us know what's broken",
                        formHeading: 'Report a bug',
                        formDescription: 'Describe the bug'
                    }}
                    RequestFeature={{
                        heading: 'Request a feature',
                        description: 'Tell us how we can imporve',
                        formHeading: 'Request a Feature',
                        formDescription: 'Please share your feature'
                    }}
                    ContactUs={{
                        heading: 'Contact us',
                        description: 'Tell us how we can help',
                    }}
                    PrimaryButtonText={"Submit"}
                    SecondaryButtonText={"Go to home!"}
                    Headers={[{
                        heading: "General Feedback",
                        subHeading: "Welcome back, Please complete your details",
                    },
                    {
                        heading: "Report a bug",
                        subHeading: "Welcome back, Please complete your details",
                    },
                    {
                        heading: "Request a feature",
                        subHeading: "Welcome back, Please complete your details",
                    },
                    {
                        heading: "Contact us",
                        subHeading: "Welcome back, Please complete your details",
                    }]}
                    styleConfig={{
                        Form: {},
                        Heading: {},
                        Description: {},
                        Input: {},
                        Label: {},
                        TextArea: {},
                        PrimaryButton: {},
                        SecondaryButton: {},
                        Modal: {},
                        Topbar: {},
                        Card: {},
                        ThanksPopup: {
                            Style: {},
                            Heading: "",
                            Description: "",
                            ShowFooter: true,
                            Icon: {}
                        },
                        Star: {
                            Style: {},
                            PrimaryColor: "",
                            SecondaryColor: "",
                            Size: ""
                        },
                        listHeading: {},
                        listDescription: {},
                        listHover: {
                            background: "",
                            iconBackground: "",
                            iconColor: "",
                            Heading: "",
                            Description: "",
                            IconSize: "",
                            Icon: {}
                        },
                        Footer: {
                            FooterStyle: {},
                            FooterText: {},
                            FooterIcon: {}
                        }
                    }}
                    showFooter={false}
                    enableVariation={false}
                    onClose={() => { }}
                />
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}
{% endtabs %}

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

***

## Props of Feedback Workflow Component

The `Feedback Workflow`  component accepts the following props

<table><thead><tr><th width="195">Prop Name</th><th width="95">Type</th><th width="100">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>questIds</strong></td><td>array</td><td>required</td><td>custom quest ids or  q-contact-us, q-report-a-bug, q-general-feedback, q-request-a-feature</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing tutorial or quest data.</td></tr><tr><td><strong>contactUrl</strong></td><td>string</td><td>optional</td><td>The URL for contacting support or administrators.</td></tr><tr><td><strong>isOpen</strong></td><td>boolean</td><td>required</td><td>Determines whether the feedback component is open or closed.</td></tr><tr><td><strong>onClose</strong></td><td>function</td><td>optional</td><td>A function to handle the closing of the feedback component.</td></tr><tr><td><strong>starColor</strong></td><td>string</td><td>optional</td><td>The color of the stars used for rating.</td></tr><tr><td><strong>starBorderColor</strong></td><td>string</td><td>optional</td><td>The border color of the stars used for rating.</td></tr><tr><td><strong>ratingStyle</strong></td><td>string</td><td>optional</td><td>The style of rating to be used in the feedback component. example:( "Star" or "Numbers" or  "Smiles")</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>Unique user identifier.</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>Unique Email identifier.</td></tr><tr><td><strong>descriptions</strong></td><td>string</td><td>optional</td><td>Descriptions for different feedback options or categories.</td></tr><tr><td><strong>iconColor</strong></td><td>string</td><td>optional</td><td>The color of icons within the feedback component.</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 feedback workflow process, including form, headings, descriptions input, label , text area, modal, footer,  and buttons.</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 = {{
    Form: { },
    Heading: { },
    Description: { },
    Input: { },
    Label: { },
    TextArea: { },
    PrimaryButton: { },
    SecondaryButton: { },
    Modal: { },
    Topbar: { },
    Card: { },
    ThanksPopup: {
        Style: { },
        Heading: "",
            Description: "",
                ShowFooter: true,
                    Icon: { }
    },
    Star: {
        Style: { },
        PrimaryColor: "",
            SecondaryColor: "",
                Size: ""
    },
    listHeading: { },
    listDescription: { },
    listHover: {
        background: "",
            iconBackground: "",
                iconColor: "",
                    Heading: "",
                        Description: "",
                            IconSize: "",
                                Icon: { }
    },
    Footer: {
        FooterStyle: { },
        FooterText: { },
        FooterIcon: { }
    }
}}
```

### **Demo**

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