Skip to main content
Starter or above plan is required.
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.

​
Installation

To install the All-In-One widget, add the following code snippet: 
<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>

​
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: 
<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: 
<button data-supahub-portal-popup>Feedback</button>
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.