Smart EmbedsHow do I install Smart Embed on my site?

In order to start collecting user feedback within your app directly, you need to first install Smart Embed. Smart Embed involves SSO authenticating users on your site to allow them to vote, comment, and create posts on FeatureFind seamlessly without them having to login again.

The process to install Smart Embed involves the following steps:

1. Find your private key
2. Generate a JWT (SSO Token) with your private key
3. Find your client key
4. Initialize FeatureFind with your client key and generated JWT (SSO Token)

1. Find your Private Key

Your private key is used to uniquely identify users within your organization so they don't need to login again on your FeatureFind portal. It can be found on your organization's Authentication settings page. Since it can be used to generate JWT tokens for your users, it should never be exposed on your frontend. If you suspect your key has been compromised, you can generate a new key by clicking the Refresh Key button.

2. Generate a JWT (SSO Token) with your private key

Once you have your private key, you can create a JWT (SSO Token) on your backend. You should never expose your private key on your frontend. Each user should have their own unique token created for them.

A valid FeatureFind JWT requires the following:

1. id - This is a unique ID for each user you authenticate and usually corresponds with a system ID you have for each user
2. name - The user's name you are identifying
3. email - The user's email you are identifying

If you are using Node.js, you could achieve this easily with our official FeatureFind Node SDK.

Simply install the SDK via npm install @featurefind/node-sdk and then generate a JWT in the following way:

import { FeatureFind } from "@featurefind/node-sdk";

const featureFind = new FeatureFind("your-private-key");

const token = featureFind.generateToken({
    id: 12345, // A unique ID from your system
    name: "John Doe", // The user's name
    email: "john.doe@gmail.com", // The user's email
});

We are in the process of adding more official SDKs, however you can use any JWT library for your preferred language.

For example, using Python, you could achieve this in the following way:

First install the pyjwt library via pip install pyjwt.

Then generate a JWT in the following way:

import jwt

private_key = 'your-private-key'

def generateToken(user):
  data = {
    'id': user.id,
    'name': user.name
    'email': user.email,
  }

  return jwt.encode(data, private_key, algorithm='HS256')

This generated token is now safe to pass back to your frontend for the next steps.

You can also use jwt.io to validate your generated JWT if you wish.

3. Find your Client Key

In order to install FeatureFind on your site (frontend), you will need your Client Key which can also be found on your organization's Authentication settings page. This key can be exposed on your frontend.

4. Initialize FeatureFind with your client key and generated JWT (SSO Token)

There are currently 2 ways to add Smart Embed to your site:

1. Using the official FeatureFind JavaScript SDK (Recommended)

To get started, install the official FeatureFind JavaScript SDK via npm install @featurefind/javascript-sdk.

Next, initialize the SDK with your client key and the JWT (SSO Token) you generated in the previous step.

import { FeatureFind } from "@featurefind/javascript-sdk";

const featureFind = new FeatureFind("your-client-key");

featureFind.smartEmbed.init("your-generated-token");

Once the init function is called, it will automatically trigger the Smart Embed to appear based on the Smart Embed settings and which ones pertain to the user and route currently active.

Additionally, the init function will return a Promise that will resolve to the unique SSO login link for that user which you can use to navigate the user to your FeatureFind portal directly.

const portalURL = await featureFind.smartEmbed.init("your-generated-token");

2. Using the FeatureFind Install Script CDN

If you'd rather not use a library, you can add the FeatureFind Smart Embed script to your site using the following install script. It will look similar to the following (instead you replace YOUR-CLIENT-KEY with your actual client key from the Authentication settings page).

<script async src="https://install.featurefind.io/YOUR-CLIENT-KEY.js"></script>

This can be added to the end of body of any page you wish to install FeatureFind on. Once the page with this scritp is loaded, you will have access to the FeatureFind global object and will be able to initialize FeatureFind with your JWT (SSO Token) as shown below.

FeatureFind.init('your-generated-token');

This will initialize FeatureFind for the specific user's token and if they have a Smart Embed ready to be triggered based on the Smart Embed settings, then the user will see the prompt to provide feedback.

Questions?

If you have any questions or are having trouble installing Smart Embed, please reach out to us!