Starter or above plan is required.
Add company data
To further enhance the functionality and context within Supahub, you can now include company data when identifying your users. By sending company data like company name, monthly spend, pricing plan, logo etc we will track your companies, making this information accessible throughout Supahub. Here’s an example on how to add company data to an identify call:<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"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // 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
customFields: {
title: "Product Manager",
}, // Optional: Add any type of field, in the format ({key1: "value1", key2: "value2"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // 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
customFields: {
title: "Product Manager",
}, // Optional: Add any type of field, in the format ({key1: "value1", key2: "value2"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // Optional
},
],
});
};
document.head.appendChild(script);
});
</script>
<template>
<h1>This is a component</h1>
</template>
<style>
...
</style>
For improved sorting capabilities, we strongly recommend including the
monthlySpend for each company.companies array in the identify call.
Add custom fields for a company
You can enhance the information associated with your companies by adding custom fields, such as their chosen pricing plan, employees, industry, and more. To add custom data for a company 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"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // Optional
customFields: {
plan: "Premium",
employees: 100,
industry: "technology",
}, // 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"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // Optional
customFields: {
plan: "Premium",
employees: 100,
industry: 'technology',
} // 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"})
// Company Data
companies: [
{
id: "786", // Required
name: "Acme Inc.", // Required
logo: "https://example.com/images/company-logo.jpg", // Optional
monthlySpend: 300, // Optional, but recommended
createdAt: "2023-05-19T15:35:49.915Z", // Optional
customFields: {
plan: "Premium",
employees: 100,
industry: "technology",
}, // 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>