Install the Web Preview widget
One script tag puts the feedback button on your site. No build step, no framework-specific package — just attributes on a script element.
Install
Add one script tag before the closing </body> tag of the pages you want to collect feedback on. The widget is served from your Web Preview deployment, so the URL below matches where your account is hosted.
<script src="/widget.js" data-project-key="YOUR_PROJECT_KEY" async></script>That is the entire install. Load it on staging first — feedback is scoped per environment so reports from your draft site stay separate from production.
Attributes
The script is configured entirely through data- attributes; no additional JavaScript is required.
- data-project-key
- The public key identifying which project the widget reports into. You will find it on the project page of the dashboard once projects exist.Required.
- data-environment
- Tags feedback so staging reports never mix with production ones. Defaults to "development".
Supported frameworks
The widget works on any site where you can edit the HTML and stay on the same origin. Frameworks that hydrate or navigate client-side are handled: pins re-anchor after SPA route changes.
- Plain HTML sites
- Next.js (App Router and Pages Router)
- React and Vite
- Vue and Nuxt
- Angular
- Svelte and SvelteKit
- Astro (client-side pages)
- WordPress
- Webflow
Pre-launch note
The widget script will only activate after the backend service is connected. Until then it loads harmlessly and does nothing visible on your site — feedback capture, screenshots, and the inbox are part of the full launch.
What a report contains
Each report captures the selected element (tag, classes, and a stable selector), a screenshot with private fields masked, the page URL and title, viewport and browser details, and recent console or network errors when they exist.