Docs
Everything needed to install the widget and, if you want, talk to it from your own code. Most sites only need the first section.
Install
Paste this before the closing </body> tag on every page where you want the widget. Replace the key with the one from your project page in the dashboard.
<script src="https://feedoback.com/widget.js" data-project="pk_your_project_key" async ></script>
The script is async, so it never blocks your page. A round launcher appears in the bottom-right corner once it has loaded.
Check it works
Open your site. You should see the launcher. In the dashboard, the project page switches from Waiting for the first visit to Live the moment the widget loads anywhere on an allowed domain. If it does not appear, open the browser console: the widget prints one line saying why it removed itself.
Allowed domains
A project can be locked to the domains you list. The browser attaches the page’s origin to every request and a page cannot forge it, so the widget refuses to run anywhere else. Use *.example.com to allow every subdomain. Leave the list empty while developing and the widget runs anywhere, including localhost.
What visitors can do
- Point & comment. They click an element, and a comment box opens beside it with the element outlined. A screenshot of the visible page is attached automatically.
- Record screen. They share a tab or window and talk through it. Up to five minutes, with pause and preview before sending.
- Send feedback. Plain text with an optional email so you can reply, and one to five stars if you ask for them.
Every submission files under the page it was sent from, with the viewport, browser, language and time zone. Visitors never see anyone else’s comments.
Appearance
The Widget section of a project sets the launcher’s colour, size and corner, a light or dark panel, a greeting shown above the menu, and whether the feedback form opens with a star rating. Changes reach every page on the next load; nothing in the snippet changes. Text on the launcher picks black or white by itself, so any colour stays readable.
Versions
Add data-version to the snippet with whatever names a release for you, and every thread records it. Each page grows a version filter as soon as one arrives, which is how you tell feedback about last week’s build from feedback about today’s.
<script src="…/widget.js" data-project="pk_…" data-version="2.8.1" async></script>
Stable targets
When a visitor points at an element, the widget records the most stable way it can find to identify it: a data-feedback-id if you set one, then data-testid, a stable id, an aria-label, a role, and finally a short CSS path. Framework-generated ids are ignored. If you want reports about an element to survive redesigns, give it a feedback id:
<button data-feedback-id="checkout-pay">Pay now</button>
SDK
The snippet exposes window.Feedoback. You do not need it for the widget to work; it is there for when you want to open it from your own button or tell it who the visitor is.
| Method | What it does |
|---|---|
open() | Open the panel. |
close() | Close the panel. |
toggle() | Open it if closed, close it if open. |
startFeedback() | Start the element picker, as if the visitor chose Point & comment. |
startRecording() | Open the panel on the screen recording step. |
identify(visitor) | Attach who the visitor is: { id, email, name }. Any field is optional. |
setContext(context) | Attach up to 30 flat key–value pairs of your own: plan, version, account. |
destroy() | Remove the widget from the page entirely. |
Identify the visitor
Call this once your app knows who is signed in. It is shown in the dashboard next to their messages so you can reply. It is never used to decide what anyone may see.
Feedoback.identify({
id: "usr_4821",
email: "[email protected]",
name: "Marina Vega",
});
Feedoback.setContext({
plan: "pro",
appVersion: "2.8.1",
});Calling before the script has loaded
Because the script is async, your code may run first. Queue calls and the widget replays them when it boots:
window.Feedoback = { q: [] };
window.Feedoback.q.push(["identify", { id: "usr_4821" }]);Roll out gradually
A project can show the launcher to everyone, or only to visitors you allow. Identify visitors from your app as above; each one appears in the project’s widget section as your site names them. Under Who sees it, choose Change, pick Only listed visitors, allow the people who should see it, or add someone by id or email before they visit. Everyone else gets nothing, not even the launcher, until you switch back to everyone.
The launcher stays hidden until you identify an allowed visitor, so call identify() as soon as your app knows who is signed in. On a server-rendered page that means queuing it before the script (above). In a single-page app, call it from wherever your session loads — the widget re-checks when you name someone, so a call that lands after the page is up still shows the launcher.
This is for trying the widget with your own team or a few friendly customers first. It is not a lock: the identity comes from your page, so treat it as a rollout switch rather than a way to hide the widget from a determined visitor.
Single-page apps
The widget survives client-side navigation and reads the current URL each time something is sent. If your app re-runs the snippet on a route change, nothing happens: a second copy is ignored. To remove the widget, for example when a user signs out, call Feedoback.destroy().
Content Security Policy
If your site sends a CSP header, allow the Feedoback origin in three places:
script-src https://feedoback.com; connect-src https://feedoback.com; img-src data: blob:;
The widget styles itself with constructed stylesheets, so it needs no 'unsafe-inline' in style-src. Screen recording uses the browser’s own permission prompt and needs nothing from you, unless your page is itself inside an iframe, in which case that frame needs allow="display-capture".
Privacy
The widget sets no cookies and sends nothing until a visitor presses send. What it collects is listed on the security page; how it is handled is in the privacy policy. If your visitors are in a jurisdiction that requires notice for feedback tools, mention Feedoback in your own privacy policy.