You can easily embed the feedback, roadmap, or changelog public view natively on your website with Supahub.

​
Installation

To embed Supahub on your website, copy & paste the provided code snippet:

<!-- Embed Supahub -->
<div data-supahub-embed></div>

<script id="supahub" type="text/javascript">
  (function (h, u, b) {
    var g = h.createElement(u), s = h.getElementsByTagName(u)[0];
    (g.id = b), (g.src = "https://widget.supahub.com/sdk.js"), s.parentNode.insertBefore(g, s);
    g.onload = function () {
      window.SupahubWidget("embed", {
        workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
        initialPage: "Board", // Optional: Options ("Board" | "Roadmap" | "Changelog")
        hideLogo: false, // Optional: Set to true to hide logo from Navbar
        hideNav: false, // Optional: Set to true to hide Navbar
        jwtToken: "Generated_JWT_Token", // Optional: Replace with the token generated from your server
      });
    };
  })(document, "script", "supahub-sdk");
</script>

​
Usage of Embed

To use embed in your website, add the data-supahub-embed attribute to a div element:

// Embed Supahub
<div data-supahub-embed></div>

​
Single Sign-On with Embedding

The embed supports authenticating your users via SSO.

Here’s what you need to do:

  1. Log in to acquire your private key from SSO settings. Ensure that you store this key securely on your server and prevent unauthorized access.

  2. When a user visits the embed, send a request to your server to generate a JWT token.

  3. Generate a token on your server with customer data using the provided snippet.

  4. Pass the generated JWT token to the Supahub embed for authentication.

1

Install JWT packages

Install the required packages for JWT token generation on your server.

npm install --save jsonwebtoken
2

Generate the JWT token

Copy and use the “Private Key” from SSO settings to generate a JWT token on your server.

var jwt = require("jsonwebtoken");
const SSO_KEY = "YOUR_PRIVATE_SSO_KEY";

function generateJWTToken(user) {
    var userData = {
        email: user.email,
        name: user.name,
    };

    return jwt.sign(userData, SSO_KEY, {
        algorithm: "HS256",
    });
}

Private Key should be kept secure and not to be shared. Add it in your .env file.

To enhance security measures, Single Sign-On (SSO) tokens are restricted from authenticating users with administrative privileges within any Supahub workspace. Instead, these users will need to log in using the dedicated portal at workspace.supahub.com

3

Pass the token back to your app and into our embed

The token will be used for user authentication.

<script id="supahub" type="text/javascript">
  (function (h, u, b) {
    var g = h.createElement(u), s = h.getElementsByTagName(u)[0];
    (g.id = b), (g.src = "https://widget.supahub.com/sdk.js"), s.parentNode.insertBefore(g, s);
    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")
        jwtToken: "Generated_JWT_Token", // Optional: Replace with the token generated from your server
      });
    };
  })(document, "script", "supahub-sdk");
</script>
Single Sign-On (SSO)Setup Dropdown/Popup