How to Install the User Feedback Widget

Keep track of the best ideas by collecting product feedback from your app, website, or public roadmap. When feedback is submitted, the widget automatically collects unique user attributes from your users such as their company name and revenue associated with their account. 

Users can submit feedback directly and vote on ideas featured in the widget from your backlog. 

Customize ⚙

The feedback widget’s design is 100% customizable in 2 steps. To customize the user feedback widget go to Settings –> Widget.

Step 1: Choose Design

Choose from 3 different design types (1) fixed, (2) button, or (3) link and set your branded colors. You can also import the same branded colors set in your public roadmap.

Step 2: Customize Messaging

Feedback widget settings

Create the best feedback experience for your users with content specific to them. These custom options are designed to support different languages and use cases. Once you’re ready you can also set ideas from your feature backlog to be voted on in the widget. We recommend having 2 - 3 ideas featured in the widget at a time.

Add the Widget to Your App or Website

To start collecting user feedback, you should install the Roadmap feedback widget on your website or web app (recommended), where you know the basic information needed to identify logged-in users.

Installing the Widget

Insert this line at the bottom of all pages where you want to display the widget.

<script src="https://cdn.roadmap.space/widget/feedback.js"></script>

For example:

<html>
<head>
<body>
  <!-- your content -->

  <script src="https://cdn.roadmap.space/widget/feedback.js"></script>
  <script>
    window.onload = function() {
      RoadmapWidget.load({id: "YOUR_ROADMAP_ID" });
    };
  </script>
</body>
</html>

Passing User Data

Fill in the entire parameters for the best experience when filtering and prioritizing feedback from users. If you’re using a server-side programming language to render your pages like Go, Python, Ruby, JavaScript (Node), PHP, C# / VB.NET, etc you could use your own view engine and inject those values when rendering the pages.

<body>
  <!-- your content -->

  <script src="https://cdn.roadmap.space/widget/feedback.js"></script>
  <script>
    window.onload = function() {
      RoadmapWidget.load({
        container: "YOUR_CONTAINER_ID", // the html container ID if you're using link or button type
        id: "YOUR_ROADMAP_ID", // find on Settings page, Widget tab
        email: "{{ user.email }}", // email of current user
        first: "{{ user.first }}", // first name of current user
        last: "{{ user.last }}", // last name of current user
        company: "{{ user.company }}", // company of current user
        revenue: parseInt({{ user.revenue }}), // revenue of current user
      });
    };
  </script>
</body>
</html>

If your app is a single-page application, you can call the load function once you have the data ready.

For example:

loadUserData(function(err, user) {
  RoadmapWidget.load({
    id: "YOUR_ROADMAP_ID", // find on Settings page, Widget tab
    email: user.email, // email of current user
    first: user.first, // first name of current user
    last: user.last, // last name of current user
    company: user.company, // company of current user
    revenue: parseInt(user.revenue), // revenue of current user
  });
});

Below are the parameters and their definitions

id: Required, this is the id of your roadmap. If you manage multiple product and roadmaps you are able to collect feedback for each of them separately. It is up to you to decide which pages of your app load which roadmap data.

email: Required, this is the email of your user. If a user submits an idea or vote on an existing Roadmap item, they become a subscriber for those items and are notified when the items are completed.

first and last: : Optional, these are the first and last names of your users. We recommend including these attributes so that you can personalize your updates to subscribers using our merge tokens.

revenue: Optional, this is the monthly recurring revenue for each user. This is useful if you want to see the total MRR for all your ideas and the Roadmap items so that you can prioritize product roadmap decisions based on your business objectives.

From here you’re all set to start collecting user feedback with the widget. When users submit feedback via the widget, they’re added as a subscriber.

Pro Tip!

Our team can help you install the widget to your app. If you have questions or need help, reach out via our in-app messenger or send us an email at support@roadmap.space.