Embed widget

Add a floating feedback button to any page with a single script tag. Collects bugs, ideas, and feedback on your own site, themed to match it.

The embed widget puts a floating feedback button on any page of your product or marketing site. Visitors click it, type what's on their mind, and send it without leaving the page. Submissions land in Signals, same as any other submission.

Requires Studio and an active Feedback Portal.

Getting the snippet

Open your project, go to Feedback Portal, then open Settings and scroll to Embed widget. Pick a theme, accent color, position, and button style, then copy the snippet it generates:

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

Paste it anywhere inside <body>. Add it to your global layout for every page, or drop it into specific pages only. No npm package, no build step.

Making it match your product

Everything is configured with attributes on the script tag. The snippet builder in Settings sets these for you; they're all optional.

Attribute Values Default What it does
data-theme light, dark, auto auto Panel theme. auto follows the visitor's system preference.
data-accent any hex color, with the # (e.g. #0ea5e9) Frostbyte blue Colors the launcher button and Send button. Text on top flips light or dark automatically for contrast.
data-position bottom-right, bottom-left bottom-right Corner the launcher sits in.
data-launcher icon, pill, hidden icon Discreet round bubble, labeled "Feedback" pill, or no launcher at all.
data-types subset of bug,feature,general all enabled types Which submission types the panel offers, in order.

With data-launcher="hidden" the widget stays invisible until you open it from your own UI. Add data-frostbyte-widget to any element, or call the JavaScript API:

<a href="#" data-frostbyte-widget="bug">Report a problem</a>

FrostbyteWidget.open();        // or open('bug' | 'feature' | 'general')
FrostbyteWidget.close();

Identifying signed-in users

If the visitor is signed in to your product, tell the widget who they are and the form skips the email field entirely. Submissions arrive in Signals with their name and email attached.

Either set attributes on the script tag:

<script src="https://getfrostbyte.dev/widget.js"
  data-hub="https://yourproject.getfrostbyte.dev"
  data-user-email="jane@example.com"
  data-user-name="Jane Doe"></script>

Or call identify after your app knows who the user is (handy in SPAs):

FrostbyteWidget.identify({ email: 'jane@example.com', name: 'Jane Doe' });

Identity is self-reported by the page, so treat it as a label, not proof. It's meant for attribution and follow-up, not authentication.

Bug reports come with context

When someone submits a bug through the widget, Frostbyte automatically attaches the page URL they were on and their browser and OS. Both show up in the signal's review panel in Signals. No setup needed, and nothing else is collected.

What appears in Signals

Submissions from the widget are identical to submissions made on your public hub page: type, title, description, optional attachments, and the submitter's name and email when known. Widget bug reports additionally carry the page and browser context above.

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 the script tag is inside <body> and data-hub exactly matches your hub's public URL, with no trailing slash.
  • A type is missing from the panel: types disabled in hub settings never show, even if listed in data-types.
  • Submissions aren't arriving: the Feedback Portal must be enabled. Check the status at the top of the Feedback Portal page in your project.

What's next

Last updated