Feedback modal

Feedback with a screen recording attached

A simple form for anything users want to tell you. They can pick an element, add a screenshot or record their screen to show exactly what happened.

Try it live

This is the real feedback modal, running right here.

  1. 1Open the modal
  2. 2Write and attach
  3. 3Send it
acme.app/reports

Monthly report

Revenue

$12.4k

+8%

Customers

318

+12

Churn

NaN%

?

Revenue by week

Something looks off? Open the modal and show us with a screenshot or a screen recording.

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.

How it works

Feedback modal in three steps

  1. 1

    Open

    From the floating button, or any button in your app.

  2. 2

    Write & attach

    A message, plus an element, a screenshot or a recording.

  3. 3

    Send

    It arrives with page, device and user details attached.

What you get

Free to start. Marked features come with paid plans.

Screen recording

The modal steps aside while users reproduce the issue, with a floating Stop bar.

Select an area

The same element picker as the feedback widget, attached to the message.

Full-page screenshot

One click attaches the whole page. The widget's own UI stays out of the picture.

Drafts are kept

Closing the modal keeps what was written, so nothing is lost mid-thought.

Placed where you want

Center, top, bottom or any corner, with a dimmed, blurred or no background.

Open from your own UI

Hide the trigger and call useFeedbackModal from a Help menu or a button.

Built for

Where teams use it most

Help and support menus

A “Send feedback” item that captures context support needs.

Flows that are hard to explain

A 20-second recording beats three paragraphs of steps.

General product feedback

Ideas and requests that aren't tied to one element.

Add it in one line

Install the package and drop it in

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

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

Full feedback modal docs

Frequently Asked Questions

About the feedback modal

Add the feedback modal today

Free to start, no card needed.