The Featurebase Feedback widget is a powerful tool for capturing bug reports and feedback inside your app, without the public forum interface.

It comes with two primary features:

• Feedback submitting view - The feedback view allows users to write their requests with nice formatting options and suggests similar posts and articles to help with duplicate requests.

• Screenshot creation & editing view - Users can submit detailed bug reports or explanations by clicking on the “Take a screenshot” button when submitting a request.

Demo the widget here →

Installing

The widget can be installed using our JavaScript SDK.

Example
HTML
Next.js
Vue.js
Svelte
Remix
Copy
<!-- Importing the 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>

<script>
Featurebase("initialize_feedback_widget", {
  organization: "yourorg", // Replace this with your organization name, copy-paste the subdomain part from your Featurebase workspace url (e.g. https://*yourorg*.featurebase.app)
  theme: "light", // required
  placement: "right", // optional - remove to hide the floating button
  email: "youruser@example.com", // optional
  defaultBoard: "yourboardname", // optional - preselect a board
  locale: "en", // Change the language, view all available languages from https://help.featurebase.app/en/articles/8879098-using-featurebase-in-my-language  
  metadata: null // Attach session-specific metadata to feedback. Refer to the advanced section for the details: https://help.featurebase.app/en/articles/3774671-advanced#7k8iriyap66
});
</script>

Authentication

If you’ve set up the

Could not load article.

Could not load article.

Opening the widget

Open with a custom button or action

Add data-featurebase-feedback attribute to a button on your website.

<button data-featurebase-feedback>
  Open Widget
</button>

You can also call the Featurebase instance directly to open the widget.

window.postMessage({
    target: 'FeaturebaseWidget',
    data: { 
      action: 'openFeedbackWidget',
      setBoard: 'yourboardname', // optional - preselect a board
    }
})

Use a default floating button

If you added the placement value at the widget initialization, there will automatically be a small “Feedback” button hovering on the right or left side of your site for users to leave feedback.

Advanced

Adding session-specific metadata to feedback

You can attach metadata to user feedback to provide additional context about the user’s session (e.g. App version, Device type, etc).

Could not load article.

Listen for callbacks

You can listen for callbacks to detect certain events in the widget.

Here are the available callbacks (these values are set as callback.action):

• widgetReady - The widget has fully loaded in

• widgetOpened - The widget has been opened

• feedbackSubmitted - The feedback was submitted from the widget, will also return a property called post to view the data that was submitted.

Example:

win.Featurebase(
  'initialize_feedback_widget',
  {
    organization: 'yourorg',
    theme: 'dark',
  },
  (err, callback) => {
    // Check for callback.action to listen for events above
    if (callback?.action === 'widgetReady') {
       // Do something
    }
  }
);

The callback will look like this:

{
   action: "feedbackSubmitted", // Or any of the other callbacks above
   // + any extra fields that each action supports.
}