> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supahub.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup Popover/Popup

> Integrate an All-In-One widget with feedback, & changelog views seamlessly on your website.

<Tip>Starter or above plan is required.</Tip>

The All-In-One Widget is a versatile tool that allows you to implement a compact version of the public feedback hub directly on your website.

This widget offers various features, including the ability for users to submit feedback, view and upvote existing posts, and access the changelog.

<img height="200" noZoom src="https://mintcdn.com/supahub/CBSb9iNvBQZO79jT/images/widget-portal.jpg?fit=max&auto=format&n=CBSb9iNvBQZO79jT&q=85&s=00b4e2870a4ff150237517fbe5710c3e" class="rounded-xl" data-path="images/widget-portal.jpg" />

## Installation

To install the All-In-One widget, add the following code snippet:

<CodeGroup>
  ```javascript HTML theme={null}
  <script id="supahub" type="text/javascript">
    !(function (s, u, p, a) {
      function supahub() {
        var g = u.createElement(p),
          h = u.getElementsByTagName(p)[0];
        (g.id = a),
          (g.src = "https://widget.supahub.com/sdk.js"),
          h.parentNode.insertBefore(g, h);
        g.onload = function () {
          window.SupahubWidget("portal", {
            workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
            theme: "light", // Required: Options ("dark" | "light")
            displayType: "popover", // Required: Options ("popover" | "popup")
            position: "right", // Optional: Options ("right" | "left")
          });
        };
      }
      "function" != typeof s.SupahubWidget &&
        (s.SupahubWidget = function () {
          (s.SupahubWidget.q = s.SupahubWidget.q || []).push(arguments);
        }),
        "complete" === u.readyState || "interactive" === u.readyState
          ? supahub()
          : s.addEventListener("DOMContentLoaded", supahub);
    })(window, document, "script", "supahub-sdk");
  </script>
  ```

  ```javascript Next.js theme={null}
  "use client"; // NextJS 13 requires this. Remove if you are using NextJS 12 or lower.

  import Script from "next/script";

  const AllInOneWidget = () => {
    return (
      <>
        <Script id="supahub" strategy="afterInteractive" type="text/javascript">
          {`!(function (s, u, p, a) {
            function supahub() {var g=u.createElement(p),h=u.getElementsByTagName(p)[0];(g.id=a),(g.src="https://widget.supahub.com/sdk.js"),h.parentNode.insertBefore(g, h);
              g.onload = function () {
                window.SupahubWidget("portal", {
                  workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
                  theme: "light", // Required: Options ("dark" | "light")
                  displayType: "popover", // Required: Options ("popover" | "popup")
                  position: "right", // Optional: Options ("right" | "left")
                });
              }};
            "function"!=typeof s.SupahubWidget&&(s.SupahubWidget=function(){(s.SupahubWidget.q=s.SupahubWidget.q||[]).push(arguments);}),"complete"===u.readyState||"interactive"===u.readyState?supahub():s.addEventListener("DOMContentLoaded", supahub);
            })(window, document, "script", "supahub-sdk");`}
        </Script>
      </>
    );
  };

  export default AllInOneWidget;
  ```

  ```javascript Vue.js theme={null}
  <script lang="ts" setup>
  import { onMounted } from "vue";

  onMounted(() => {
    if (document.getElementById("supahub-sdk")) {
      return;
    }

    const script = document.createElement("script");
    script.id = "supahub-sdk";
    script.src = "https://widget.supahub.com/sdk.js";
    script.async = true;
    script.onload = () => {
      const win: any = window;
      win.SupahubWidget("portal", {
        workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
        theme: "light", // Required: Options ("dark" | "light")
        displayType: "popover", // Required: Options ("popover" | "popup")
        position: "right", // Optional: Options ("right" | "left")
      });
    };

    document.head.appendChild(script);
  });
  </script>

  <template>
    <h1>This is a component</h1>
  </template>

  <style>
  ...
  </style>

  ```
</CodeGroup>

## Usage

### Floating Button

By default, the Supahub widget will display a floating button in the bottom-right corner of your website. When a user clicks this button, the feedback widget will open, allowing them to submit feedback or browse existing posts.

### Trigger Popover View

To trigger the popover view of the All-In-One widget and hide the default floating button, add the `data-supahub-portal-popover` attribute to a button element:

```javascript theme={null}
<button data-supahub-portal-popover>Feedback</button>
```

### Trigger Popup View

To trigger the popup view of the All-In-One widget and hide the default floating button, add the `data-supahub-portal-popup` attribute to a button element:

```javascript theme={null}
<button data-supahub-portal-popup>Feedback</button>
```

<Warning>
  For proper functionality of your custom trigger button, insert the installation script directly where your trigger element appears in the code. This ensures the widget responds correctly to your customized activation method.

  Important: The script must be placed within the same component file as your custom trigger element to maintain proper event handling.
</Warning>