# Feedback Workflow Component

## Components 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%2FVeJTI56KCFAN63U5upmL%2FUser%20Feedback%20Workflow.png?alt=media&#x26;token=c7b2cf38-265c-49e6-beed-5e64bcaeafda" alt="" width="563"><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%2FjKvMzVSZbrSJycdHpLYP%2FFeedback%20workflow%20temp1.png?alt=media&#x26;token=4db6d66e-4588-48d8-aed7-df48e686a8f7" alt="" width="563"><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%2FNa7ThYJjHLRKV4z0T2cM%2FFeedback%20workflow%20temp3.png?alt=media&#x26;token=1658deef-0538-42e1-b811-2f6ad919b695" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F7YCW06BUVxY5nqIeGGjs%2FFeedback%20workflow%20contact.png?alt=media&#x26;token=539eb9a3-deca-4e6d-8ddd-a736f9b7bfea" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FykVXzZCrlIm7OSmSWyZB%2FFeedback%20workflow%20complete.png?alt=media&#x26;token=7c7a71aa-44a4-4b6e-ace5-6007ce236e0c" 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 use the `FeedbackWorkflow` component, you need to inject the Script in your HTML page or wherever you want to use it. Here are the steps to do it:

* Create campaign from the QuestLabs
* Copy the no code script .

It will look like this:

```typescriptreact
<script>
    (function() {
        let d = document,
        s = d.createElement("script"),
        body = d.getElementsByTagName("body")[0],
        fdDiv = d.createElement("div");
        s.src = "https://cdn.jsdelivr.net/npm/@questlabs/nocode-sdk@0.0.2/dist/index.min.js";
        s.async = true;
        fdDiv.id = "quest-sdk-feedback";
        body.appendChild(fdDiv);
        s.onload = function() {
            if (typeof window.mountFeedback === 'function') {
                window.mountFeedback('quest-sdk-feedback', "***Your entityAuthenticationToken token***");
            } else {
                console.error("window.mount is not a function");
            }
        };
        s.onerror = function() {
            console.error("Failed to load the component script.");
        };
        d.head.appendChild(s);
    })();
</script>

```

> This script will automatically inject FeedbackWorkflow component in your page.

{% hint style="info" %}
To show or hide component please call this function from your code:\
changeStatus();
{% endhint %}

## Props of Feedback Workflow Component

The props can be modified from the QuestLabs campaign flow.

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>

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