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.

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, and pick a board you want to use. This will replace the board ID in the configuration script. 

First, add data-feedbear-button attribute to an element that will become a Widget trigger button. Once the element is clicked, the widget will be displayed.

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

Then add the following code at the very end of your code, before the closing </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>

2. Configure the Widget

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

SSO – identify your users securely (optional)

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.

If you prefer to not use SSO, you can leave the "ssoToken" parameter as "null", in this case the widget will display name and email fields, which users will need to fill in order to submit their ideas.

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).