Next.js App Router guide

Install once. Keep it through every route change.

Put the feedbacks.dev script in the root layout, verify one real submission, then manage the form from the dashboard instead of shipping configuration in application code.

Create a free project Jump to the code

app/layout.tsxcopy from your Install tab

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <div data-feedbacks-host="YOUR_PROJECT_KEY" />
        <Script
          src="https://app.feedbacks.dev/widget/latest.js"
          data-project="YOUR_PROJECT_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Five steps from empty account to verified report.

01
Create one project
Name the app, then open its Install workspace. The dashboard generates the browser-safe project key and exact snippet.
02
Add it to the root layout
Place the host element and script after your application content so one widget instance survives route changes.
03
Run hosted verification
Confirm the saved form and project key work before debugging your own application shell.
04
Send a test from the real app
Open a route you recognize, submit a message, and check that the URL and browser context reach the correct inbox.
05
Configure remotely
Change fields, placement, labels, colors, screenshots, attachments, and Product Updates from the dashboard.

Why the root layout is the right boundary.

One runtime instance

The root layout persists while App Router pages change, preventing duplicate widget controllers.

A clean verification path

Hosted verification separates project configuration problems from host application problems.

Remote form changes

Saved dashboard configuration reaches the installed widget without changing layout.tsx.

Avoid the common install mistakes.

Do not use the private API key

Browser code receives the publishable project key generated by the Install workspace. Keep REST and MCP credentials server-side.

Do not mount it on every page

A page component can remount during navigation and create duplicate triggers. Use the root layout.

Do not customize before the first test

Verify the default form from the real application first. Add origin restrictions, CAPTCHA, and custom triggers afterward.

Do not load two installation methods

Choose the Website script or the React wrapper, not both in the same application shell.

Need another framework?

The framework documentation also covers React, Vue, WordPress, static HTML, shared templates, and tag managers.

Read framework docs Explore the widget

Add feedback before the next bug report arrives.

Install the generated project snippet in your root layout and verify one message from a real route.

Create a free project Verification guide