Feedback widget for Next.js

Before you start

1. Sign in with GitHub and install the feedback2code GitHub App. Choose the repository that holds the code of the site.
2. Open the repository in the dashboard, go to Configure and add the domains the widget may run on.
3. Copy the snippet from Embed Widget. It contains your widget ID.

Add the widget

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.feedback2code.dev/widget/YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_WIDGET_ID with the ID from your dashboard. With the Pages Router, put the same <Script> element into pages/_app.tsx. afterInteractive loads the widget once the page is usable, so it does not compete with your own code.

What the agent can change

The agent works on the repository of the Next.js app: components, pages, styles, content files. It runs in a Linux sandbox, where it can install packages from the npm registry and run your scripts.

Every change arrives as a pull request. Nothing is merged or deployed until you do it, so your usual review and deployment stay as they are.

Good to know

• Add localhost to the authorized domains to try the widget during development. A test submission counts like any other and starts the agent.
• With a Content-Security-Policy, allow https://www.feedback2code.dev in script-src and frame-src.
• The widget records the address of the page it was loaded on. In a single-page navigation the address is not updated, so ask reporters to name the page if it matters.
• Preview deployments have their own hostnames. Authorize your project's preview domain, not vercel.app as a whole.

Test it

1. Deploy the change and open the site on an authorized domain.
2. Click the button at the bottom right and send one small, concrete request.
3. Open your dashboard. The submission starts as coding and turns to awaiting review once the pull request is open.

What a submission contains and how the plans differ is described on the page about the website feedback widget.

Other setups

• Feedback widget for React apps
• Feedback widget for Vue and Nuxt
• Feedback widget for Astro
• Feedback widget for static HTML sites
• Feedback widget for WordPress themes
• Feedback widget for Shopify themes

Questions and answers