Setup Popover/Popup

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>

"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;

<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>

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. 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>

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.

Get Started

Identify Users

Public Hub

Changelog Widget

All-In-One Widget

Installation

Usage

Floating Button

Trigger Popover View

​Installation

​Usage

​Floating Button

​Trigger Popover View

​Trigger Popup View

Installation

Usage

Floating Button

Trigger Popover View

Trigger Popup View