> 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/no-code-sdk-components/helphub.md).

# HelpHub

## Components Visuals 

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

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

{% tab title="Visual 1 " %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

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

{% tab title="Visual 4" %}

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

{% tab title="Visual5" %}

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

## Installation

To use the `Helphub` 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:

```typescript
<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***");
            } 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 Helphub component in your page.

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

## Props of HelpHub Component

The props can be modified from the QuestLabs campaign flow.

The `Helphub`  component accepts the following props:

**Home**

<table><thead><tr><th width="272">Props Name</th><th width="109">Type</th><th width="106">Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td>Optional</td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Home Heading Text style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Home SubHeading Text style.</td></tr><tr><td>sendMessageViewStyle </td><td>ViewStye</td><td></td><td>Send Message VIew Style</td></tr><tr><td>sendMessageTitleStyle </td><td>TextStyle</td><td></td><td>Send Message Title Text Style</td></tr><tr><td>sendMessageDescriptionStyle</td><td>TextStyle</td><td></td><td>Send Message Description Text Style</td></tr><tr><td>communityMainViewStyle </td><td>ViewStyle</td><td></td><td>community Main  View Style </td></tr><tr><td>communityDemoViewStyle </td><td>ViewStyle</td><td></td><td>community Demo View Style </td></tr><tr><td>communityTitleStyle </td><td>TextStyle</td><td></td><td>community Title Text Style </td></tr><tr><td>communityDescriptionStyle</td><td>TextStyle</td><td></td><td>community Description text Style</td></tr><tr><td>searchMainViewStyle </td><td>ViewStyle</td><td></td><td>search Main View Style </td></tr><tr><td>searchViewStyle</td><td>ViewStyle</td><td></td><td>search View Style</td></tr><tr><td>searchListItemTitleStyle</td><td>TextStyle</td><td></td><td>Search List Item Title Text Style</td></tr><tr><td>getupdateMainViewStlye <br></td><td>ViewStyle</td><td></td><td>get update Main View Stlye </td></tr><tr><td>getupdateHeaderTextStyle </td><td>TextStyle</td><td></td><td>get update Header Text Style </td></tr><tr><td>getupdateTitleStyle </td><td>TextStyle</td><td></td><td>get update Title Style </td></tr><tr><td>getupdateTitle2Style</td><td>TextStyle</td><td></td><td>get update Title2 Style</td></tr><tr><td>getupdateDescriptionStyle</td><td>TextStyle</td><td></td><td>get update Description text Style</td></tr><tr><td>getupdateDescription2Style</td><td>TextStyle</td><td></td><td>get update Description2 text Style</td></tr><tr><td>getupdateButtonStyle </td><td>ViewStyle</td><td></td><td>get update Button Style </td></tr><tr><td>getupdateButtonTextStyle</td><td>TextStyle</td><td></td><td>get update Button Text Style</td></tr><tr><td>complateProfileView </td><td>ViewStyle</td><td></td><td>complate Profile View Style</td></tr><tr><td>complateProfileHeaderTextStyle</td><td>TextStyle</td><td></td><td>complate Profile Header Text Style</td></tr><tr><td>complateProfileDescriptionStyle</td><td>TextStyle</td><td></td><td>complate Profile Description Text Style</td></tr><tr><td>satisfiedMainViewStyle </td><td>ViewStyle</td><td></td><td>satisfied Main View Style </td></tr><tr><td>satisfiedTitleStyle </td><td>TextStyle</td><td></td><td>satisfied Title Style </td></tr><tr><td>satisfiedDescriptionStyle</td><td>TextStyle</td><td></td><td>satisfied Description Style</td></tr><tr><td>satisfiedFooterTextStyle</td><td>TextStyle</td><td></td><td>satisfied Footer Text Style</td></tr></tbody></table>

**Chat**

<table><thead><tr><th width="249">Props Name</th><th width="112">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Msin View Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style </td></tr><tr><td>chatButton </td><td>TextStyle</td><td></td><td>chat Button  View Style</td></tr><tr><td>chatButtonText</td><td>TextStyle</td><td></td><td>chat Button Text Style</td></tr><tr><td>privetChatHeaderTextStyle</td><td>TextStyle</td><td></td><td>privet Chat Header Text Style</td></tr><tr><td>chatTitleText </td><td>TextStyle</td><td></td><td>chat Title Text Style</td></tr><tr><td>chatTitleDescription</td><td>TextStyle</td><td></td><td>chat Title Description text Style</td></tr><tr><td>message</td><td>ViewStyle</td><td></td><td>message View Style</td></tr><tr><td>chatInputViewStyle</td><td>ViewStyle</td><td></td><td>chat Input View Style</td></tr></tbody></table>

### Help

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>FaqTextStyle</td><td>TextStyle</td><td></td><td>Faq Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>

### Update

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>timeText</td><td>TextStyle</td><td></td><td>time Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>

### Tasks

<table><thead><tr><th width="172">Props Name</th><th width="123">Type</th><th>Require </th><th>Details</th></tr></thead><tbody><tr><td>Form</td><td>ViewStyle</td><td></td><td>Main View Style</td></tr><tr><td>Heading </td><td>TextStyle</td><td></td><td>Topbar Heading Style</td></tr><tr><td>SubHeading  </td><td>TextStyle</td><td></td><td>Topbar SubHeading Style</td></tr><tr><td>Searchbox</td><td>ViewStyle</td><td></td><td>Search box View Style</td></tr><tr><td>tasksStepTextStyle</td><td>TextStyle</td><td></td><td>tasks Step Text Style</td></tr><tr><td>Heading</td><td>TextStyle</td><td></td><td>Card  Heading Style</td></tr><tr><td>SubHeading</td><td>TextStyle</td><td></td><td>Card  subHeading Style</td></tr></tbody></table>