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 (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("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
        });
      };
    }
    "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 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, // Required
        name: user.name, // Required
        id: user.id, // Required
    };

    // The userData object can include any additional details you wish to provide about a user to Supahub. Ensure to follow the same format shown in the Supahub.identify method, as outlined at https://docs.supahub.com/identify/user

    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 (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("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
        });
      };
    }
    "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>