Widget setup and configuration

FeedBear Widget lets you embed a feedback collection form anywhere on your site. This allows your users to post their suggestions without leaving what they're doing. Their feedback will be automatically linked to their existing account.

Once a person submits a post or upvotes one, they will be invited (by email) to join your feedback portal on FeedBear. We won't ever send your users any emails besides notifications from their activity in your feedback portal (like status updates or replies).

Setting up the Widget

The setup and configuration of the widget require some changes to your code. You can do it yourself (💪) or invite an engineer to your FeedBear project Team via project Settings.

1. Embed the FeedBear Widget on your site

This snippet allows you to use FeedBear on your website. In your project settings, tab Widget, pick a board you want to use. This will replace the board ID in the configuration script. Add the following code anywhere inside the  <body> tag:

<script>
!(function(f,d,b,e,a,r,js){f[e]=f[e]||function(){(f[e].q=f[e].q||[]).push(arguments)};r=d.createElement(b),js=d.getElementsByTagName(b)[0];r.id=e;r.src=a;r.async=1;js.parentNode.insertBefore(r,js)})(window,document,"script","FeedBear","https://sdk.feedbear.com/widget.js");

FeedBear("button", {
    element: document.querySelector("[data-feedbear-button]"),
    project: "YOUR-PROJECT", // your project ID will be pre-filled automatically
    board: "SELECTED-BOARD", // a board ID will be filled based on your selection
    placement: "bottom-start", // see step 2
    ssoToken: null // see step 2,
});
</script>

Then, add data-feedbear-button attribute to an element that will become a Widget trigger button. Once the script above is initialized, it will listen for clicks on the button to open the Widget.

<button data-feedbear-button>Give feedback</button>

2. Configure the Widget

There are two parameters to configure: SSO token and placement.

SSO – identify your users securely (required)

To improve the quality of the feedback you receive, we don't allow anonymous feedback. This also applies to the widget, and to identify your users securely, we use JWT for generating an SSO (single sign-on) token. This token encodes the user's name and email address with your API key so FeedBear knows that it's authentic data from your users, not some random spam.

Follow our guide to generate the token on your server and pass the resulting value to the widget.

Placement

Depending on the location of your Widget button on your site, you may want to customize the placement of the Widget. Refer to the illustration below to determine the best option. There are 12 different placements to choose from.

For example, if your button is positioned in the upper right corner of your site, you want to use the "bottom-end" Widget placement. That way, the Widget will open under the button aligned to the right side ("end" of the button).

Still need help? Contact Us Contact Us