Embed widget

Add a floating feedback button to any page with a single script tag. Collects bug reports, feature requests, and general feedback without leaving your site.

The embed widget puts a floating button on any page of your product or marketing site. Visitors click it, pick what they want to share — bug, feature suggestion, or general feedback — fill out the form, and submit. All without leaving the page. Submissions land in your Feedback Hub moderation queue, same as any other submission.

Requires Studio and an active Feedback Hub. Optionally pair with a custom subdomain for a cleaner data-hub URL in the snippet.

Getting the snippet

Open your project, go to Feedback Hub, then open Settings and scroll to Embed widget. Copy the snippet:

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

data-hub is your Feedback Hub's public URL — either a Frostbyte subdomain or a custom domain you've connected. data-types lists the submission types you've enabled, in the order you want them to appear in the picker.

The snippet in Settings is pre-filled with your hub URL and the types you currently have enabled. Copy it as-is.

Adding it to your site

Paste the snippet anywhere inside <body>. Add it to your global layout if you want the button to appear on every page, or drop it into specific pages only.

No npm package. No build step. Plain JavaScript that loads asynchronously and doesn't block rendering.

How it works

  1. A "Feedback" button appears fixed to the bottom-right corner.
  2. Visitor clicks it — a panel opens showing one card per enabled submission type.
  3. They pick a type.
  4. The form for that type loads inside the panel.
  5. They fill it out and submit.
  6. The panel shows a brief confirmation, then closes.

The form runs in an iframe pointed at your Feedback Hub. It goes through the same rate-limited endpoint as your public hub, so existing spam protections apply.

Widget styles are fully scoped — they don't affect your site's own CSS, and your site's CSS doesn't affect the widget.

What appears in the moderation queue

Submissions from the widget are identical to submissions made directly on your public hub page. They show up in Feedback Hub → pending with the same type, title, description, and optional name and email fields.

Controlling which types appear

data-types controls what the picker shows. Valid values are bug, feature, and general, matching the submission types in your hub settings.

If you later disable a type in hub settings, remove it from data-types too — otherwise the picker still shows that option but the form will return an error when selected.

You can also scope types per placement. A changelog page might only use feature. A beta app might only use bug. Set data-types per snippet and the picker adjusts accordingly.

Content Security Policy

If your site uses a strict CSP, add two entries:

script-src https://getfrostbyte.dev;
frame-src  https://yourproject.getfrostbyte.dev;

Replace yourproject.getfrostbyte.dev with your custom domain if you've connected one.

Troubleshooting

Button doesn't appear. Check that the script tag is inside <body> and that data-hub exactly matches your hub's public URL (no trailing slash).

A type shows "not available" when selected. That type is listed in data-types but disabled in hub settings. Remove it from the attribute or re-enable it in Settings.

Submissions aren't arriving. The Feedback Hub must be enabled. Check the hub status at the top of the Feedback Hub page in your project.

CSP is blocking the iframe. Add your hub hostname to frame-src as shown above.

What's next

Last updated