Feedback widget

Let users point at what's broken

Users hover, click the exact element and write a note. You get a screenshot of that element and the full page, with the page, device and user already attached.

Try it live

This is the real feedback widget, running right here.

  1. 1Start reporting
  2. 2Click anything in the app
  3. 3Describe it and send
acme.app/checkout
This is your own button, wired to useFeedback()

Checkout

Step 2 of 2

Pro plan

Billed monthly

$49.00

Total$49.00
What your team receives

Try the demo on the left. What the widget sends shows up here.

Runs in your browser. Nothing you send here is stored.

Feedback Mode

How it works

Feedback widget in three steps

  1. 1

    Activate

    A click on the trigger turns the page into selection mode.

  2. 2

    Select

    Hovering highlights elements. A click anchors the report to one.

  3. 3

    Describe

    A short form opens right next to it. Send, done.

What you get

Free to start. Marked features come with paid plans.

Two screenshots, automatically

The selected element and the full page, rendered from what the user actually saw.

Anchored to the element

Position and size are recorded, so nobody asks which button again.

Your own trigger

Hide the floating button and open selection mode from any button with useFeedback.

Nudges that get replies

Optional notification bubbles invite users to share feedback, with dismissal rules.

Where your team works

Reports land in the dashboard, Slack, or your own signed webhooks.

Never breaks your page

The widget runs inside its own error boundary and keeps your app rendering if it fails.

Built for

Where teams use it most

QA and staging reviews

Testers click through a build and report issues in place.

Design feedback

Stakeholders flag spacing, copy and layout on the real page.

Production bug reports

Users show you exactly what looks wrong, without a support ticket.

Add it to your layout

Install the package and drop it in

npm install @roastnest/react
import { RoastnestProvider, FeedbackWidget } from "@roastnest/react";

export default function Layout({ children }) {
  return (
    <RoastnestProvider projectId="YOUR_PROJECT_ID" mode="cloud">
      <FeedbackWidget>{children}</FeedbackWidget>
    </RoastnestProvider>
  );
}

Full feedback widget docs

Frequently Asked Questions

About the feedback widget

Add the feedback widget today

Free to start, no card needed.