Widget

Add a feedback button to your site and check that reports reach Signals.

View as Markdown View this page as plain text

Available on the Studio plan.

The widget puts a feedback button on your own website. Visitors report a bug, suggest an idea or leave feedback without leaving the page, and it lands in User Signals like a portal post.

When to use it. Use the widget when people find problems inside your product, where a link to the portal would send them away. The Feedback Portal is still where they vote and follow progress.

Install it

  1. Open User Signals → Settings and go to the Embed tab.
  2. Choose a Position and a Button style. Theme and accent colour come from the Appearance tab.
  3. Choose Copy code and paste it before </body> in your site's shared layout, so it shows on every page.
  4. Open your site, send a test report, and check it arrives in User Signals.
The code updates as you change options. Copy it again after any change.

The code looks like this, with your portal's address in data-hub:

<script
  src="https://getfrostbyte.dev/widget.js"
  data-hub="https://rollcall.getfrostbyte.dev"
  data-types="bug,feature,general">
</script>

Options

The settings write these attributes for you. You can also edit them by hand.

Attribute Choices
data-theme light, dark or auto (the default, follows the visitor's system)
data-accent A hex colour such as #4291e0
data-position bottom-right (default) or bottom-left
data-launcher icon (default), pill, or hidden for your own button
data-types Any of bug, feature and general, comma-separated

A type you've turned off in the portal's settings never shows, even if it's listed here.

Open it from your own button

Set data-launcher="hidden", then add the attribute to any element:

<button type="button" data-frostbyte-widget="bug">Report a problem</button>

Or open and close it from JavaScript once the script has loaded:

FrostbyteWidget.open('bug');
FrostbyteWidget.close();

Tell it who's signed in

If your visitors are signed in to your app, pass their details so they don't have to type an email:

FrostbyteWidget.identify({ email: '[email protected]', name: 'Jane Doe' });

Or add data-user-email and data-user-name to the script tag. The name shows as Reported by on the signal.

Things to note

  • Bug reports include the page and browser. The signal shows the page address and browser, so you can reproduce the problem.
  • Identity isn't verified. Anything passed to identify is taken on trust, so don't use it for decisions that need a real login.
  • Strict Content Security Policy? Add https://getfrostbyte.dev to script-src and your portal's address to frame-src.
  • Nothing appears? Check the script loads, the data-hub address matches your portal, the portal is enabled and User Signals is on.
  • It needs Studio. If the project owner moves off Studio, the widget's panel stops loading on your site until they upgrade again. The portal itself keeps working.

Was this page helpful?

Last updated