Feedback Widget
Embed on your website to collect bug reports from external users
Table of Contents
What is the Feedback Widget?
The Feedback Widget is a bug reporting tool that can be embedded on any website with a single script tag. Visitors and external testers can report bugs with screenshots without needing to log in. Collected reports are automatically registered as issues on the QA Note dashboard.
Installation
Go to Project Settings → Widget tab to find your widget token and copy the embed code.
<script
src="https://app.qanote.app/widget.js"
data-token="YOUR_WIDGET_TOKEN"
data-theme="auto"
data-position="bottom-right"
></script>
The widget renders inside a Shadow DOM, so it does not affect the host page's styles.
Configuration Options
| Attribute | Values | Default | Description |
|---|---|---|---|
data-token | string | (required) | Project-specific widget authentication token |
data-theme | light / dark / auto | auto | Theme. auto follows the user's system settings |
data-position | bottom-right / bottom-left | bottom-right | Floating button position |
User Experience
- A Feedback button appears at the bottom-right (or bottom-left) of the page.
- Clicking the button opens the feedback form.
- Enter name (optional), email (required), and description (required).
- Use the Capture Screenshot button to capture the current screen.
- Add annotations to the captured image using Pen, Arrow, and Rectangle tools.
- Click the Submit button to complete the submission.
Guest information (name, email) is saved in the browser's localStorage and auto-filled on return visits.
Automatically Collected Information
The widget automatically attaches the following metadata upon submission:
- Current page URL
- Browser type (Chrome, Firefox, Edge, Safari)
- Operating system (Windows, macOS, Linux, Android, iOS)
- Viewport size
- Device pixel ratio
QA Fence
When QA Fence is enabled in project settings, a password entry screen is displayed on pages where the widget is installed. Users must enter the correct password to access the page.
- QA Note Extension users bypass this automatically.
- The password persists for the browser session.
This is useful for conducting QA testing without exposing in-development sites to the public.
Widget Token Management
- You can view and copy the widget token from project settings.
- When regenerating a token, the existing token is immediately invalidated. You must replace the embed code with the new token.
Plan Limits
| Plan | Widget Domains |
|---|---|
| Solo (Free) | 1 |
| Team | 3 |
| Studio | 10 |
| Enterprise | Unlimited |