Widget installation
The embeddable widget mounts in a Shadow DOM, so it never inherits or leaks your site's styles. Install it in float mode or embed it inside an element you control.
Float mode
The default. A launcher button sits in a corner of the viewport and opens the feedback panel on click. Add both tags before the closing </body>:
<script src="https://app.feedbackflow.app/widget/widget.js"></script>
<script>
FeedbackWidget.init({
tenantToken: 'YOUR_TENANT_TOKEN',
position: 'bottom-right', // or bottom-left / top-right / top-left
primaryColor: '#1452e1',
theme: 'auto' // light / dark / auto
});
</script>Embedded mode
Render the widget inline inside a container — handy for a dedicated “Feedback” page or a help section. Point it at a target element's id:
<div id="feedback-root"></div>
<script src="https://app.feedbackflow.app/widget/widget.js"></script>
<script>
FeedbackWidget.init({
tenantToken: 'YOUR_TENANT_TOKEN',
target: 'feedback-root'
});
</script>Configuration options
Anything you don't pass falls back to the defaults configured in your dashboard, so you can change appearance later without touching the host site.
| Option | Values | Description |
|---|---|---|
tenantToken | string | Required. Your workspace's bearer token. |
position | bottom-right · bottom-left · top-right · top-left | Launcher corner in float mode. |
theme | light · dark · auto | Colour scheme; auto follows the host's system preference. |
primaryColor | #RRGGBB | Accent colour for the launcher and primary button. |
target | element id | Renders inline inside that element (embedded mode). |
Customise text & appearance
From Settings → Widget Configuration you can tune the widget without redeploying:
- Branding — company name and logo shown in the panel header.
- Copy — button text, input placeholder, and the success message.
- Appearance — button size (small / medium / large), border radius (0–50), and whether to show the “Powered by” footer.
- Capture — allow screenshots and toggle public feedback tracking.
What gets captured
Every submission includes the context your team needs to reproduce an issue without a back-and-forth:
- Feedback type (bug / feature / support), title, and description.
- Metadata: page URL, user agent, browser, and screen resolution.
- Optional attachments — screenshots and files, auto-compressed and thumbnailed.
- An optional submitter email so they can track status later.