Feedback Widget: Install, Footprint, and Config

A feedback widget should be the least noticeable thing on your page and the most useful. You add it once, and from then on anyone can point at a broken button and describe what went wrong. The problem is that most feedback widgets stop there. They collect a comment, drop it in a queue, and leave an engineer to reproduce the issue from a vague sentence. The Vynix feedback widget takes a different path. It is a single embeddable script, about 16KB, that adds point-and-click annotation to any site and captures the full browser context behind every note. This post covers the widget itself: how to install it, what it weighs, how it stays out of your way, and how you configure it.

What a good feedback widget should be

Start with the constraints. A feedback widget loads on every page for every visitor, so it has to be small and quiet. It should not block rendering. It should not fight with your framework or your CSS. It should work whether your site is static HTML or a single-page app. And it should be usable by keyboard, not just a mouse. Those are the table stakes. Miss any one of them and the widget becomes a liability you eventually rip out.

The Vynix widget is built to those limits. It weighs about 16KB. It loads with defer so it never blocks your page. It lives inside a Shadow DOM, so it neither depends on nor interferes with your app's styles or scripts. It runs on static HTML, PHP, WordPress, Laravel, React, Vue, Next.js and more. The install takes about 30 seconds.

How to add the feedback widget to your website

Adding an embeddable feedback widget should not require a build step or a package install. With Vynix you paste one script tag before the closing body tag. Set your project key and your API base URL, keep the defer attribute, and you are done.

<script
  src="https://cdn.vynix.in/widget.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-api="https://www.vynix.in"
  defer
></script>

Replace YOUR_PROJECT_KEY with your project public key from the dashboard. The data-api value points at your Vynix API base URL. Deploy the page and the widget appears, ready to capture annotations. There is nothing else to wire up. If you prefer not to touch the page at all, there is a Chrome extension built on Manifest V3 as a second install path.

Footprint: small, deferred, and out of the way

About 16KB is small enough that the download disappears into the noise of a normal page load. The defer attribute matters just as much as the size. It tells the browser to fetch the script without blocking parsing and to run it after the document is ready. Your content paints on its own schedule. The widget initializes afterward.

Isolation is the other half of staying out of the way. The widget renders inside a Shadow DOM. That boundary means its styles cannot leak into your page and your page's styles cannot bleed into the widget. A global reset on your site will not break the widget's layout, and the widget's CSS will not touch your buttons or headings. It also means the widget does not depend on any library you happen to ship. It carries what it needs.

Configure the feedback widget with data attributes

You control the widget through data attributes on the script tag. There are two required and three optional. All of them are read at load time.

• data-project-key (required): your project public key. This ties every note the widget captures back to the right project.
• data-api (required): your Vynix API base URL. Notes are sent here, so the endpoint and your keys stay under your control.
• data-capture-diagnostics (optional): set to false to turn off console and network capture. The default is true, which records console logs and network requests alongside each note.
• data-theme (optional): auto by default, or set light or dark to match your interface.
• defer (recommended): let the script load without blocking your page, then initialize after the document is parsed.

That is the entire surface. No config file, no initialization callback, no runtime API to learn. The attributes are declarative, so what you see in the tag is what the widget does.

Accessibility and privacy

The widget is keyboard accessible. A reviewer can open it, place a note, and submit without reaching for the mouse. That keeps the tool usable for people who navigate by keyboard, and for anyone testing keyboard paths on your own site.

On privacy, the model is plain. Your keys, your data. Notes go to the API base URL you set, and there is no token markup layered on top. If you would rather not capture console and network diagnostics on a given site, set data-capture-diagnostics to false and the widget skips them.

Why the widget captures more than a comment

Most feedback widgets end at a text box. Someone types a sentence, and an engineer is left guessing at the browser, the viewport, and the element in question. Vynix captures the context that makes a note actionable: the CSS selector and DOM element, computed styles, a screenshot, console logs, network requests, the viewport, and the URL. That payload travels with the note.

From there the note becomes an AI-ready ticket. It can flow over a real MCP server into Cursor, Claude Code, GitHub Copilot, Windsurf, and others, or become a one-click GitHub issue. Competitors like BugHerd, Marker.io, Userback, and Ruttl route feedback into human issue trackers. They have no agent or MCP story. The widget is the same idea taken one step further: collect the click, capture the context, and hand it to the tool that will fix it.

Common questions

Does it slow my site? No. The script is about 16KB and loads with defer, so it does not block parsing or rendering. It initializes after your page is ready.

Does it work with WordPress and React? Yes. The same script tag runs on static HTML, PHP, WordPress, Laravel, React, Vue, Next.js and more. The Shadow DOM boundary keeps it from interfering with your framework or styles.

Is it accessible? Yes. The widget is keyboard accessible, so reviewers can open it, annotate, and submit without a mouse.

If you want a feedback widget that does more than collect comments, add the Vynix snippet to your site and try it on your next review. The free plan is enough to see the full context on a real note.