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

# Inline Feedback Component

## Component Visuals

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

<figure><img src="/files/TNYCUbTxuUD5OPCAVmEV" 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 `InlineFeedback`component accepts the following props

## Usage

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

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

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

export default App;


```

{% endtab %}

{% tab title="Tutorial" %}

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

{% endtab %}

{% tab title="Header" %}

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

{% endtab %}

{% tab title="Footer" %}

```jsx
<InlineFeedback.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 
>
    <InlineFeedback
        userId=""
        questId=""
        token=""
        uniqueUserId="your-unique-user-id"
    >
        <InlineFeedback.Header />
        <InlineFeedback.FeedbackSection />
        <InlineFeedback.Footer />
    </InlineFeedback>
</QuestProvider>
```

{% endtab %}
{% endtabs %}

***

## **Example Usage**

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

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

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

export default App;
```

{% endtab %}

{% tab title="InlineFeedbackWrapper" %}

```jsx
import { QuestProvider, InlineFeedback } 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 
            >
                <InlineFeedbackWrapper
                    userId=""
                    questId=""
                    token=""
                    styleConfig={{
                        ActionButton: {},
                        ActionContainer: {},
                        ActionSelectedButton: {},
                        Description: {},
                        Footer: {},
                        Form: {},
                        Heading: {},
                        IconStyle: {},
                        MainHeading: {},
                        SelectedIconStyle: {},
                        closeIconColor: ""
                    }}
                    type="like"
                    Headers={[
                        {
                            heading: "",
                            subHeading: "",
                        },
                    ]}
                    count={5}
                    description=""
                    footerLink=""
                    footerText=""
                    heading=""
                    initialState={ }
                    onChange={ }
                    onRequestClose={ }
                    token=""
                    uniqueUserId=""
                    uniqueEmailId=""
                    variation=""
                />
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}
{% endtabs %}

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

## Props of InlineFeedback Component

The `InlineFeedback` component accepts the following props

<table><thead><tr><th width="195">Prop Name</th><th width="95">Type</th><th width="98">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>heading</strong></td><td>string</td><td>required</td><td>The title or heading of the tutorial</td></tr><tr><td><strong>description</strong></td><td>string</td><td>required</td><td>description for you component</td></tr><tr><td><strong>subheading</strong></td><td>string</td><td>required</td><td>A brief description or subheading for the tutorial</td></tr><tr><td><strong>itemsPerPage</strong></td><td>string</td><td>optional</td><td>show no. of questions per page</td></tr><tr><td><strong>ratingType</strong></td><td>string</td><td>optional</td><td>rating: eg star</td></tr><tr><td><strong>userId</strong></td><td>string</td><td>required</td><td>The unique identifier of the user.</td></tr><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>The unique identifier for the tutorial or quest</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>supportUrl</strong></td><td>string</td><td>required</td><td>redirect URL for contact support </td></tr><tr><td><strong>btnColor</strong></td><td>string</td><td>optional</td><td>The background color of the login button</td></tr><tr><td><strong>btnTextColor</strong></td><td>string</td><td>optional</td><td>The text color of the login button.</td></tr><tr><td><strong>textColor</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>font</strong></td><td>string</td><td>optional</td><td>The font style for text in the component.</td></tr><tr><td><strong>showFooter</strong></td><td>string</td><td>optional</td><td>true: show quest footer<br>false hide footer</td></tr><tr><td><strong>styleConfig</strong></td><td>string</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 = {{
    ActionButton: { },
    ActionContainer: { },
    ActionSelectedButton: { },
    Description: { },
    Footer: { },
    Form: { },
    Heading: { },
    IconStyle: { },
    MainHeading: { },
    SelectedIconStyle: { },
    closeIconColor: ""
}}
```

## Demo

{% embed url="<https://drive.google.com/file/d/1j2tRtacjopQhTsqh4hrrUeDm-93Tb2ri/view?usp=drive_link>" %}