> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supahub.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add User Data

> Integrate our JavaScript SDK to easily link user feedback on Supahub to your existing user data.

<Tip>Starter or above plan is required.</Tip>

## Add user data

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.

<img height="200" noZoom src="https://mintcdn.com/supahub/CBSb9iNvBQZO79jT/images/identify-users.gif?s=577ba1faf7ccaedac2f50aa6d5706864" class="rounded-xl" data-path="images/identify-users.gif" />

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

<CodeGroup>
  ```javascript HTML theme={null}
  <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: "useremail@domain.com", // 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>
  ```

  ```javascript Next.js theme={null}
  "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: "useremail@domain.com", // 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;
  ```

  ```javascript Vue.js theme={null}
  <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: "useremail@domain.com", // 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>
  ```
</CodeGroup>

<Tip>
  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)](./public-hub/sso.mdx).
</Tip>

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

<CodeGroup>
  ```javascript HTML theme={null}
  <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: "useremail@domain.com", // 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>
  ```

  ```javascript Next.js theme={null}
  "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: "useremail@domain.com", // 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;
  ```

  ```javascript Vue.js theme={null}
  <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: "useremail@domain.com", // 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>
  ```
</CodeGroup>

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](./company.mdx)

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