Sync Customer Data (Featurebase SDK) | Featurebase Help Center

Use the Featurebase SDK to sync your customer data with Featurebase. This allows you to view and sort ideas by customers' monthly spending and other parameters.

The SDK is meant to be used client-side on your website.

Learn to set it up from our Developer Docs 👈

Installation of the Featurebase SDK

Installing the Featurebase SDK is a simple process that requires you to embed a short piece of JavaScript code within your website.

Please follow these steps to add the Featurebase SDK:

Locate the <body> tag in your website's HTML source code.

Before the closing </body> tag, insert the following code:

!(function (e, t) {
  const a = "featurebase-sdk";
  function n() {
    if (!t.getElementById(a)) {
      var e = t.createElement("script");
      (e.id = a),
        (e.src = "https://do.featurebase.app/js/sdk.js"),
        t
          .getElementsByTagName("script")[0]
          .parentNode.insertBefore(e, t.getElementsByTagName("script")[0]);
    }
  }
  "function" != typeof e.Featurebase &&
    (e.Featurebase = function () {
      (e.Featurebase.q = e.Featurebase.q || []).push(arguments);
    }),
    "complete" === t.readyState || "interactive" === t.readyState
      ? n()
      : t.addEventListener("DOMContentLoaded", n);
})(window, document);

This code will integrate the Featurebase SDK into your website, enabling you to use the Featurebase() command.

User Identification

After correctly installing the SDK, you can begin authenticating your users using the Featurebase('identify') action.

To use this action, consider the following information:

Each 'identify' call should include an "organization" property, which is your Featurebase board's name. You can find this by visiting https://yourorg.featurebase.app and extracting the "yourorg" part.

The data you can send to identify should be as follows:

Parameter	Type	Required	Description
organization	string	Yes	Your organizations name
email	string	Yes	Email of the user to be identified
name	string	Yes	Name of the user to be identified
id	string	Yes	ID of the user to be identified
profilePicture	string	No	URL of the user's profile picture
companies	Company[]	No	Array of companies this user is associated with. Refer to the company model defined below.
customFields	object	No	Object containing key-value pairs of custom fields
createdAt	date	No	Date when the user was created

The Company model

Parameter	Type	Required	Description
id	string	Yes	Company ID
name	string	Yes	Company name
monthlySpend	number	No	Monthly recurring revenue from this company
createdAt	Date	No	Date when the company was created
customFields	object	No	Object containing key-value pairs of custom fields

An example of using the 'identify' action is as follows:

Featurebase('identify', {
            "organization": "yourorg",
            "email": "youruser@example.com",
            "name": "John Steezy",
            "id": "123456789",
            "profilePicture": "https://example.com/profile.jpg",
            "createdAt": "2023-05-19T15:35:49.915Z",
            "customFields": {
                "title": "Product Manager",
                "plan": "Premium"
            },
            "companies": [{
                "id": "987654321",
                "name": "Business Inc.",
                "monthlySpend": 500,
                "createdAt": "2023-05-19T15:35:49.915Z",
                "customFields": {
                    "location": "Canada",
                    "language": "French"
                }
            }]
        }, (err) => { /* callback function*/ })

This action permits the viewing of their information from the Featurebase dashboard. Remember to replace the placeholder values with actual user data.

Following these instructions carefully should ensure a successful setup of the Featurebase SDK. If you experience any issues, do not hesitate to reach out to our support team for assistance.

Additional example with NextJS

useEffect(() => {
    const interval = setInterval(() => {
      if (window?.Featurebase) {
        clearInterval(interval)
        window.Featurebase(
          'identify',
          {
            organization: "yourOrganizationName",
            email: "usersEmail",
            ...rest of the params
          },
          (err) => {
            console.log(err)
            /* callback function */
          }
        )
      }
    }, 1000)
    return () => clearInterval(interval) // Cleanup on unmount
}, [])

<Script
  id="featurebase-embedding"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    !(function (e, t) {
      const a = "featurebase-sdk";
      function n() {
        if (!t.getElementById(a)) {
          var e = t.createElement("script");
          (e.id = a),
            (e.src = "https://do.featurebase.app/js/sdk.js"),
            t
              .getElementsByTagName("script")[0]
              .parentNode.insertBefore(e, t.getElementsByTagName("script")[0]);
        }
      }
      "function" != typeof e.Featurebase &&
        (e.Featurebase = function () {
          (e.Featurebase.q = e.Featurebase.q || []).push(arguments);
        }),
        "complete" === t.readyState || "interactive" === t.readyState
          ? n()
          : t.addEventListener("DOMContentLoaded", n);
    })(window, document);
  `,
  }}
/>

If you've got any questions, just reach us in the live chat! 🙌

Segment userId syncing to Featurebase on .identify()

Add Customer Data (Featurebase API)