Feedback DevTools

Visual feedback that turns into code. Embed the feedback widget into any project, collect annotated bug reports with full browser context, and ship fixes faster.

2-Minute Quickstart

Create a project on the dashboard, get your SDK token, and embed the feedback toolbar. No build tool changes needed — the SDK works with any host framework.

  1. 1. Create a project — Go to /login, create an account, then create a project from the dashboard. You'll receive an sdkToken.
  2. 2. Embed the toolbar — Choose your path below (React or plain HTML).
  3. 3. Collect feedback — Testers click the floating feedback button, select an element, annotate, and submit. The server captures the full context (screenshot, console logs, network logs, page URL).

React & Next.js

Install the @feedback/sdk package and mount the FeedbackToolbar component.

Install

npm install @feedback/sdk

Usage

'use client';

import { FeedbackToolbar } from '@feedback/sdk';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackToolbar
          projectToken="YOUR_SDK_TOKEN"
          serverUrl={process.env.NEXT_PUBLIC_FEEDBACK_SERVER_URL}
        />
      </body>
    </html>
  );
}

Props:

Plain HTML & Any Framework

No React needed. Use the REST API endpoint directly from any page with a simple fetch call. Place this snippet before your closing </body> tag:

<script>
(function () {
  var TOKEN = 'YOUR_SDK_TOKEN';
  var SERVER = 'https://server-production-14a9.up.railway.app';

  var btn = document.createElement('button');
  btn.textContent = '💬 Feedback';
  btn.style.cssText = 'position:fixed;bottom:24px;right:24px;z-index:9999;padding:12px 20px;border-radius:9999px;border:none;background:#000;color:#fff;font-size:14px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.3);';
  document.body.appendChild(btn);

  btn.addEventListener('click', async function () {
    var what = prompt('What should change?');
    if (!what) return;
    var expected = prompt('Expected behavior:');
    try {
      var res = await fetch(SERVER + '/api/v1/feedback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-sdk-token': TOKEN,
        },
        body: JSON.stringify({
          url: location.href,
          whatToChange: what,
          expectedBehavior: expected || '',
          pageContext: {
            viewport: { width: window.innerWidth, height: window.innerHeight },
            userAgent: navigator.userAgent,
          },
        }),
      });
      if (res.ok) alert('Thanks for the feedback!');
      else alert('Failed to send feedback (code ' + res.status + ')');
    } catch (e) {
      alert('Network error: ' + e.message);
    }
  });
})();
</script>

The x-sdk-token header can be used as an alternative to Authorization: Bearer. This snippet covers the basic feedback flow; the React SDK additionally captures screenshots, console logs, network logs, and element selection.

What Data Is Captured

When a user submits feedback through the full SDK toolbar, the server captures the following context alongside their description:

FieldDescription
whatToChangeUser's description of what needs to change
expectedBehaviorWhat the user expected instead
screenshotDataUrlBase64 screenshot of the full page
selectedElementCSS selector, tag, class, and text of the element the user selected
pageContextURL, viewport dimensions, user agent, referrer, session timestamp
consoleLogsBrowser console entries (log, warn, error) captured during the session
networkLogsCaptured fetch/XHR requests, status codes, and timings
annotationsHighlighted regions and arrow annotations the user drew on the screenshot
changeTypeCategory: bug, feature request, UX issue, question, praise, or documentation

Framework Notes

Next.js (App Router)

Add 'use client' to any page or layout that imports FeedbackToolbar. Mount it in your root layout so it appears on every page. Set NEXT_PUBLIC_FEEDBACK_SERVER_URL to the production server URL for deployed builds.

React (non-Next)

Works with any React 18+ setup (Create React App, Vite, Remix). Import FeedbackToolbar and mount as a child of your root component.

Plain HTML / Any Framework

Use the fetch-based snippet above. It works in any browser and can be adapted to Vue, Svelte, Angular, or any framework by copying the POST call pattern with the SDK token.

Live Demo

See how feedback looks end-to-end:

Questions? ohadf2015@gmail.com