Quickstart

Four steps from an empty project to feedback landing in your dashboard, with screenshots attached.

This walkthrough uses cloud mode, where Roastnest stores the submissions and serves the widget's configuration. If you would rather keep everything on your own servers, read Modes first — the shape of the setup is the same, but you provide the submit handler.

You will need a project ID

Create a site in the Roastnest dashboard and copy its project ID from the credentials tab. Every cloud-mode widget is scoped to one.

Steps

Install the SDK
Terminal
```
npm install @roastnest/react
```
Wrap your app in the provider
RoastnestProvider holds the mode, project ID and theme. Put it high enough in the tree that every widget you render sits underneath it — usually the root layout or your top-level App component.
app.tsx
```
import { RoastnestProvider } from "@roastnest/react";

export default function App() {
  return (
    <RoastnestProvider mode="cloud" projectId="YOUR_PROJECT_ID">
      <YourMainApp />
    </RoastnestProvider>
  );
}
```

Render the feedback widget

FeedbackWidget renders the floating trigger button and everything behind it. It can go anywhere inside the provider.

layout.tsx

import { FeedbackWidget } from "@roastnest/react";

function Layout({ children }) {
  return (
    <div>
      {children}
      <FeedbackWidget />
    </div>
  );
}

Submit a test report
Load the page, click the trigger, pick an element on screen, and send a message. The report shows up in your dashboard with a full-page screenshot, an element-scoped screenshot and the URL it came from.

Next.js App Router

The widgets are client components. In the App Router, rendering them from a server layout works because the package marks its own entry points — you do not need a "use client" wrapper of your own unless you also pass callbacks from that file.

app/layout.tsx

// app/layout.tsx
import { RoastnestProvider, FeedbackWidget } from "@roastnest/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <RoastnestProvider mode="cloud" projectId="YOUR_PROJECT_ID">
          {children}
          <FeedbackWidget />
        </RoastnestProvider>
      </body>
    </html>
  );
}

Passing callbacks from a server component

Self-hosted mode requires an onFormSubmit function, and functions cannot cross the server/client boundary. Move the provider into its own "use client" component and render that from the layout instead.

What you get

Out of the box, with no further configuration:

A floating trigger button, placed bottom-right and repositionable.
Element selection — the user hovers to highlight, clicks to anchor the report.
Two screenshots per submission: the full page and the selected element, captured client-side.
Browser, OS, device and page URL recorded alongside the message.
Optional email capture so you can reply to whoever reported it.

Next steps

Customization — change the copy, the button placement and the notification behaviour.
Theming — match the widget to your product.
Integrations — forward new feedback into Jira, Slack or Discord.