SDK auto-authentication & data sync setup

Set up our SDK to authenticate users and sync their data.

BfF

Written By Bruno from Featurebase

Last updated 2 days ago

The SDK allows you to effortlessly sync your customer data to Featurebase to let you see who is behind customer interactions and auto-authenticate users.

👨‍💻This should take around 10 minutes to set up for an engineer.

If you're uncomfortable with this, share this guide with a technical team member who can assist.

Installing the SDK

To set it up, start by importing our SDK using any of the code examples below:

Example
<!-- Import Featurebase SDK -->
<script>
  !(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);
</script>

<!-- Identify user in Featurebase -->
<script>
  Featurebase(
    "identify",
    {
      // Each 'identify' call should include an "organization" property,
      // which is your Featurebase board's name before the ".featurebase.app".
      organization: "yourorg",

      // Required fields. Replace with your customers data.
      email: "yourcustomer@example.com",
      name: "Your Customer",
      id: "123456",

      // Optional - add a profile picture to the user
      profilePicture: "https://example.com/images/yourcustomer.png",

      // Optional - include other fields as needed
      customFields: {
        title: "Product Manager",
        plan: "Premium",
        number: "123",
      },

      // Optional - add user company information as needed
      companies: [
        {
          id: "987654321", // required
          name: "Business Inc. 23", // required
          monthlySpend: 500, // optional
          createdAt: "2023-05-19T15:35:49.915Z", // optional
          customFields: {
            industry: "Fintech",
            location: "Canada",
            language: "French",
          }, // optional
        },
      ], // optional
    },
    (err) => {
      // Callback function. Called when identify completed.
      if (err) {
        // console.error(err);
      } else {
        // console.log("Data sent successfully!");
      }
    }
  );
</script>

Automatic authentication for public board

⚠️ Do not test with admin account email!
Featurebase will not automatically log in admins due to security reasons.
Please use a non-admin account when testing this feature.

In most browsers users will already be automatically signed in after calling the function above, but we also recommend adding the data-featurebase-link attribute to all links on your website that link to your Featurebase portal.

This will ensure that users are automatically logged in even when cookies are blocked.

Example
<a data-featurebase-link href="https://yourorg.featurebase.app" target="_blank" rel="noopener noreferrer">
  Give feedback
</a>

✅ Congratulations, you've successfully installed Featurebase!

Automatic authentication for widgets

Our SDK will smartly keep and share the state you provided in the identify function with all widgets to automatically authenticate and associate data about the user.

Next, explore and set up widgets here:

What are in-app widgets?

Troubleshooting and common issues

Advanced use cases

Associate session-specific data about the user

You can attach metadata to user feedback to provide additional context about the user’s session (e.g. App version, Device type, etc) from all the widgets that support feedback posting & the public portal.

Please check out the

What is metadata for posts?
for this.

Actions after authentication

You may want to perform some actions once a user has been successfully identified.

Each identify call takes a callback parameter that runs once the identify function is finished.

Example
function featurebaseIdentifyCallback(err) {
  if (err) {
    console.log("Could not identify user") return
  }
  // Perform follow-up actions here.
}

Featurebase("identify", {
  // Required. Replace with your customers data.
  email : "yourcustomer@example.com",
  name : "Your Customer",
  id : "123456",
}, featurebaseIdentifyCallback);