Add User Data

Starter or above plan is required.

Integrate our JavaScript SDK to effortlessly synchronize feedback submitted on Supahub with users’ existing accounts in your app. By including user data such as name, email, avatar, etc., you can gather more detailed context about your users.

To begin using our SDK, insert the following code snippet into your app:

<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("identify", {
          // Workspace
          workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'

          // User Data
          id: "786", // Required: Unique id that you are using to identify your user
          name: "Username", // Required
          email: "[email protected]", // Required
          avatar: "https://example.com/images/user-profile.jpg", // Optional
        });
      };
    }
    "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 YourComponent = () => {
  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("identify", {
                // Workspace
                workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
                
                // User Data
                id: "786", // Required: Unique id that you are using to identify your user
                name: "Username", // Required
                email: "[email protected]", // Required
                avatar: "https://example.com/images/user-profile.jpg", // Optional
              });
            }};
          "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 YourComponent;

<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("identify", {
      // Workspace
      workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'

      // User Data
      id: "786", // Required: Unique id that you are using to identify your user
      name: "Username", // Required
      email: "[email protected]", // Required
      avatar: "https://example.com/images/user-profile.jpg", // Optional
    });
  };

  document.head.appendChild(script);
});

</script>

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

<style>
...
</style>

Please keep in mind that the Supahub Identify feature allows you to send user data from your app to Supahub for a better understanding of user behavior. If you want a feature that allows your users to log in seamlessly to Supahub without having to log in separately, consider implementing Single Sign-On (SSO).

Add custom fields for a user

You can enhance the information associated with your users and companies by adding custom fields, such as their title, location, and more. By utilizing this feature, you can further segment and analyze your user feedback data in Supahub. To add custom data to an identify call, follow this example:

<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("identify", {
          // Workspace
          workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'

          // User Data
          id: "786", // Required: Unique id that you are using to identify your user
          name: "Username", // Required
          email: "[email protected]", // Required
          avatar: "https://example.com/images/user-profile.jpg", // Optional

          customFields: {
            title: "Product Manager",
            location: "Paris",
          }, // Optional: Add any type of field, in the format ({key1: "value1", key2: "value2"})
        });
      };
    }
    "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 YourComponent = () => {
  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("identify", {
                // Workspace
                workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'
                
                // User Data
                id: "786", // Required: Unique id that you are using to identify your user
                name: "Username", // Required
                email: "[email protected]", // Required
                avatar: "https://example.com/images/user-profile.jpg", // Optional
                
                customFields: {
                    title: "Product Manager",
                    location: "Paris",
                }, // Optional: Add any type of field, in the format ({key1: "value1", key2: "value2"})
              });
            }};
          "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 YourComponent;

<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("identify", {
      // Workspace
      workspaceName: "workspace-name", // Required: Copy your workspace name from 'workspace-name.supahub.com'

      // User Data
      id: "786", // Required: Unique id that you are using to identify your user
      name: "Username", // Required
      email: "[email protected]", // Required
      avatar: "https://example.com/images/user-profile.jpg", // Optional

      customFields: {
        title: "Product Manager",
        location: "Paris",
      }, // Optional: Add any type of field, in the format ({key1: "value1", key2: "value2"})
    });
  };

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

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

</template>

<style>
...
</style>

Although optional, we strongly suggest including the user’s company information as it allows you to sort posts based on user’s monthly spend and other company data. Add Company Data

Please note that the Supahub Identify feature does not identify admins. When testing, it is recommended to use a non-admin account.

​Add user data

​Add custom fields for a user

Add user data

Add custom fields for a user