Embed your feedback board on your website

In this article

• Introduction
• Who is the JavaScript snippet for?
• Limitations
• Using the JavaScript snippet
• The JavaScript snippet
• Troubleshooting

Introduction

You can embed your Feature Upvote feedback board in any web app.

You do this via our JavaScript snippet. You (or your web developer) will need to add this JavaScript snippet to your web app.

Adding to the JavaScript snippet to your site requires a little bit of coding at your end. But not much.

Who is the JavaScript snippet for?

The JavaScript snippet is designed to be used in a SaaS app or an internal website where access is only available to your signed-in users.

The JavaScript snippet is configured with some info about your users. At the very least, you’ll need to provide us a unique user id, and optionally a name and email address.

You can see an example of a working embedded feedback board (our own feedback board!) on our dashboard, by clicking on “Feature Requests” in the top nav.

Limitations

The JavaScript snippet for embedding boards is designed to be used in a web app where your users need to be signed in to gain access.

You'll need to supply the snippet a user id, display name, and email for the current user. The user id must be different for each of your users.

The embedded board is a light version of your full feedback board. Some features are missing or limited:

• There's no moderation functionality; moderating must be done via your full board, or the moderation tools on your Feature Upvote dashboard.
• There's no image uploading or viewing
• The snippet uses a less-sophisticated search feature than found on your feedback board
• There's no "similar suggestions" feature when adding a suggestion.
• Customers can't specify tags when adding suggestion
• Custom CSS isn't yet supported
• Access settings are not available within the embedded board; anyone who can reach the page your board is embedded in can see and use the board.

Some of these will be added over time, where possible.

Using the JavaScript snippet

How to use the snippet:

1. In your Feature Upvote dashboard, go to your board's settings, and select Embedding.
2. Enable embedding, and state the domain name(s) where your board will appear. This is important; without this your board won't appear.
3. Copy and paste the JavaScript snippet from the section below.
4. Add a div element where you want your board to appear on your website.
5. Give the div element a unique id. In our snippet below, we've used the id featureUpvoteBoard . You can change this.
6. In the FeatureUpvote.init function:
   1. ensure that the value fortarget matches the div id you chose in the previous step.
   2. set boardRef to the value found in your board's Embedding settings.
   3. set user.id to an unique value based on the current user. This could be the primary key of the user object in your own database.
   4. set user.displayName to the current user's name.
   5. set user.email to the current user's email address.

You should now have a working embedded board.

The JavaScript snippet

Copy and paste this snippet and then edit accordingly.

The snippet won't work exactly as shown here. You'll need to set the correct values for boardRef , user.id , user.displayName , and user.email .

<!-- A container for your feedback board -->
<div id="featureUpvoteBoard"></div>

<!-- Include the Feature Upvote widget library -->
<script src="https://app.featureupvote.com/widget/v0/widget.js"></script>

<!-- Initialize Feature Upvote widget -->
<script>
    FeatureUpvote.init({
            // the id of the HTML element on your page where 
            // the board is to be injected
            target: 'featureUpvoteBoard',

            // found in Feature Upvote dashboard -> Board Settings -> Embedding
            boardRef: 'pr_12345678', 

            // user info from your system, used by 
            // Feature Upvote instead of cookies
            user: {
              // the id (or alternative unique reference of the user in your db)
              id: '1234567890',
              // displayName is required - use 'Name unavailable' or similar if you can't provide it
              displayName: 'Ash Smith', 
              // email is required
              email: 'ash@example.com'
            }
        }
    );
</script>

Troubleshooting

We send helpful error information to the JavaScript console. It can be worth checking the console, because it might offer a solution to any problem you are having.

Getting this type of snippet working can be difficult. So if you encounter problems, we are here to help. Contact us at support@featureupvote.com.