Add the public feedback board to a web app

Learn how to quickly get started with integrating the public board into a web app.

Once you have set up a product, its public feedback board will be available on FeatureCat with your chosen subdomain. All that’s required is to integrate the FeatureCat Javascript SDK (just 1.3KB) into your app and configure it (full example below):

  1. Add the FeatureCat JS SDK from https://sdk.featurecat.com/v1/sdk.min.js

  2. Provide the URL of your public board (e.g. https://appity.featurecat.app)

  3. Configure your apps’ user to sign them into FeatureCat (providing at least a unique identifier for the user)

  4. Sign the request with a hash consisting of your board token and the user’s identifier

What’s happening here is that your app’s users are getting signed into FeatureCat. That way they’ll have a consistent experience and their previous votes are always displayed, and you have the option to segment user’s votes by their additional data.

User data and their privacy

You are in complete control of the amount of user data and level of detail you send along to FeatureCat. In respecting your users’ privacy, please do keep in mind that less is often more and focus on the type of data that’ll let you easily segment their votes and submissions.

Revenue (is the user paying), app version and how long they have been using your app are great indicators, whereas personally identifiable information such as name and email address (if your app even captures these) should only be submitted if you are really sure you’ll need it.

Please do also keep in mind that depending on your local privacy legislation and that of your users you may have to inform them if you submit personally identifiable information to third parties (e.g. FeatureCat) and must follow requests for deletion of their data in every place it is stored (e.g. FeatureCat as well). So ideally personally identifiable information is never transmitted.

Configuring the user

So what kind of information can you attach? Well, everything really (within reason). FeatureCat offers a range of attributes you can assign directly to users and allows you to easily sort and filter users, and also attach custom data in JSON format for the properties key.

The only thing that is required is an identifier in the format of a UUID (RFC 4122), which is used to uniquely identify the user in FeatureCat and showing them their public board with their votes. Ideally (for the best user privacy and anonymity) this UUID is created for FeatureCat used for nothing else.

  • identifier: UUID (RFC 4122), which uniquely identifies the user in FeatureCat (required)

  • name: String up to 100 characters (optional and only if you really need it)

  • email: String up to 100 characters (optional and only if you really need it)

  • revenue: Floating point number (optional)

  • version: String up to 100 characters (optional)

  • region: String up to 100 characters (optional)

  • dateCreated: ISO 8601 timestamp as string (optional)

  • properties: JSON String up to 2000 characters (optional)

Signing the request 

FeatureCat ships with a secure authentication mode by default that requires a SHA256 cryptographic signature created from your board token (which can be found in your “product settings” in FeatureCat) and the user’s unique identifier. That way, only users with a signed request from your app can authenticate in FeatureCat.

To make sure you don’t ship your board token in plain text in HTML, you should sign the request server-side by using a combined SHA256 hash of the token and the user’s identifier. The code example below includes creating the signature in Ruby on Rails, but there are a variety of examples for other frameworks and languages below.

Configuration Example

Below you can find a filled configuration as an example for what the end result might look like.

<script>
  window.FeatureCat = (window.FeatureCat || { queue: [], setup: function (x) { window.FeatureCat.queue.push(x); } });

  // Set up the SDK for your public board and configure the user.
  window.FeatureCat.setup({
    boardURL: 'https://appity.featurecat.app',
    identifier: '1d057dd3-c8ed-4498-aad2-a8516cf2d5b2',
    email: 'jane@example.com',
    name: 'Jane Doe',
    dateCreated: '2021-09-16T12:15:57+0000',
    revenue: 100.00,
    region: 'NM',
    version: '1.2.3',
    properties: { sessions: 100 },
    signature: ‘141ece46c20bcb7855e94131f3082744dcf928627158bde26360861239da98c9'
  });
</script>

<!-- Load the Javascript SDK -->
<script src="https://sdk.featurecat.com/v1/sdk.min.js" async></script>

Here is an example for Ruby on Rails, which configures the SDK whilst having access to a @current_user variable and the board token being available as an environment variable ENV['FEATURECAT_BOARD_TOKEN’]

<script>
  window.FeatureCat = (window.FeatureCat || { queue: [], setup: function (x) { window.FeatureCat.queue.push(x); } });

  // Set up the SDK for your public board and configure the user.
  window.FeatureCat.setup({
    boardURL: "https://appity.featurecat.app",
    identifier: "<%= escape_javascript(@current_user.uuid).html_safe %>",
    email: "<%= escape_javascript(@current_user.email).html_safe %>",
    signature: "<%= OpenSSL::HMAC.hexdigest('sha256', ENV['FEATURECAT_BOARD_TOKEN'], @current_user.uuid) %>"
  });
</script>

<!-- Load the Javascript SDK -->
<script src="https://sdk.featurecat.com/v1/sdk.min.js" async></script>

Open the public board

Once you have configured the FeatureCat SDK, a window.FeatureCat object is available. To open the public board in a new tab whilst signing in the user, simply call window.FeatureCat.openBoard(). That’s it.

You can call it wherever you have properly configured the SDK and a simple button might look like this:

<button onclick="window.FeatureCat.openBoard();">Give Feedback!</button>

Set it up in a development environment or localhost and give it a try. If it’s successful, a new tab will open with the public board, where you can vote on features and submit new ideas in the app, and you’ll immediately see the new user in FeatureCat.

And now you’re off to the races.

Other signature examples

Below you can find a range of other examples to create the signature, starting with PHP:

<?php
    echo hash_hmac(
      'sha256',
      $user->uuid,
      ‘featurecat_board_token'
    );
?>    

Python:

import hashlib
import hmac
import base64

"""
For Python 2.x use:
"""
identifier = bytes(identifier).encode('utf-8')
secret = bytes("featurecat_board_token").encode('utf-8')

"""
For Python 3.x use:
"""
message = bytes(identifier, 'utf-8')
secret = bytes('featurecat_board_token', 'utf-8')

signature = hmac.new(secret, message, digestmod=hashlib.sha256).hexdigest()

NodeJS

import crypto from 'crypto'

const signature = crypto
  .createHmac('sha256', 'featurecat_board_token')
  .update(user.uuid)
  .digest('hex')

Did this article help?

Thank you for your feedback