Build-tested 6 October 2026

Next.js feedback widget: install guide

Add a Next.js feedback widget once in your App Router layout. People can send a note or screenshot without signing in, and client-side navigation keeps the same launcher. The example uses next/script; no Patchkind package is needed.

What you need

• An invited Patchkind owner account and a project for this app. The beta is free and invite-only.
• Access to your existing Next.js app’s source. There is no Patchkind package to install.
• Your project’s public ID from Setup → Install with AI → “Prefer to add the code yourself?” → Next.js. It routes feedback and grants no owner access. Never put a secret in this snippet.

1. Copy your project’s snippet

Open the Patchkind workspace

In Setup → Install with AI → “Prefer to add the code yourself?” → Next.js, copy the code. Replace every YOUR_PUBLIC_PROJECT_ID below with your own 32-character public ID. This is the same format the install screen produces.

import Script from 'next/script';

<Script src="https://relay-feedback.ccc333888.chatgpt.site/widget.js"
  data-project="YOUR_PUBLIC_PROJECT_ID"
  strategy="afterInteractive" />

The integration address remains https://relay-feedback.ccc333888.chatgpt.site. Marketing uses patchkind.com; embedded feedback stays on the tested integration host. Do not substitute the marketing domain.

2. Put it in app/layout.tsx

Keep your root layout as a Server Component. Put Script inside the body after your children and providers. Preserve your metadata and existing layout; this is a minimal placement example, not a replacement file.

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://relay-feedback.ccc333888.chatgpt.site/widget.js"
          data-project="YOUR_PUBLIC_PROJECT_ID"
          strategy="afterInteractive" />
      </body>
    </html>
  );
}

App Router, Pages Router and loading strategy

strategy="afterInteractive" loads the widget after hydration begins, so it does not need to block the first render. Keep it in app/layout.tsx rather than each page. Do not import widget.js into your module graph or access document on the server.

Using Pages Router? Put the same Script component in pages/_app.tsx, next to your page component. That is a documentation-based adaptation; our build proof below covers App Router only. Do not add a second copy in _document or individual pages.

Next.js response headers and nonce policies

If your app sets CSP in middleware (called Proxy in Next.js 16), update that policy at its source. Static response policies can also live in next.config through its headers() configuration. The headers() function from next/headers reads request headers; it does not set your response policy.

For an existing nonce policy, read your forwarded nonce in the server layout with (await headers()).get("x-nonce") and pass it to Script as nonce. Per-request nonces require dynamic rendering. Preserve your current policy and review third-party styles and frames too; the build proof did not test CSP or a nonce configuration.

Next.js CSP and nonce documentation

Optional: use your own “Report a problem” link

Keep the script installed and put this anchor in your footer or menu. The project-scoped trigger opens the same panel. If the script is unavailable, its href opens the hosted form in the current tab.

<a href="https://relay-feedback.ccc333888.chatgpt.site/f/YOUR_PUBLIC_PROJECT_ID" data-patchkind-open="YOUR_PUBLIC_PROJECT_ID">Report a problem</a>

To hide the corner button, add data-launcher="none" to the script or Next.js Script component. Keep your own link visible. We separately built this variant in each framework’s actual layout. With no script at all, the same anchor is a hosted-form fallback; it does not attach your app’s page.

3. Check that a note arrives

1. Build and open your app. Check the button or link on desktop and phone.
2. In Setup → Install with AI, expand “Send the test yourself” and copy the exact test label. Open feedback from your app, send it through the real form and complete verification.
3. Return to the same project’s Setup → Install with AI tab and press “Check for test”. You can also inspect the note and attached page in Feedback. Labelled installation checks are intentionally excluded from the Inbox’s needs-review count.
4. Publish through your app’s normal process and repeat the delivery check. A build or visible button alone does not prove live delivery.

Patchkind installation check YOUR_PUBLIC_PROJECT_ID: this test was sent from the feedback button in the app.

Next.js troubleshooting

• Hydration or SSR error: use next/script; do not evaluate the browser widget on the server. Leave the layout’s providers in place.
• Launcher absent after a route change: keep the Script in the shared root layout, then reopen feedback and check the attached pathname. Our App Router proof navigates with next/link.
• Pages Router or a custom nonce policy: follow the relevant Next.js documentation and test separately; those variants are outside this proof.

• No button: check the 32-character public ID and script request. data-disabled="true" disables the widget; data-launcher="none" deliberately hides only the corner button.
• Note missing: check the ID in both script and link, the selected project’s Feedback list, and whether the form reported success. Privacy extensions can block third-party resources; keep the hosted link as a fallback.

Browser policy checklist

Based on the widget’s requests, not tested with a CSP: allow https://relay-feedback.ccc333888.chatgpt.site in script-src, style-src and frame-src, plus element directives if explicitly set. The widget loads /widget.css too. Preserve your policy; do not disable CSP or add unsafe-inline just for this widget. Nonces, strict-dynamic and Trusted Types need their own review.

If your app uses Cross-Origin-Embedder-Policy: require-corp, verify that its cross-origin resources and frame are permitted; use the hosted link until confirmed. Permissions-Policy: display-capture can restrict screenshot capture in embedded contexts. Capture also needs browser support and consent; image upload remains an alternative. These policy combinations were not exercised in the build proof.

What we checked

Build-tested 6 October 2026: Next.js 16.3.8 (React 19.2.8). We built the corner-button and hidden-launcher variants from the real layouts, then loaded production output with the real widget script and stylesheet against a local mock form. Checks cover stylesheet delivery, custom links, a second page, labelled mock submission, and no console errors or failed integration requests. This does not verify live storage, Turnstile or your security policy.

Next.js script-placement documentation

Other framework guides

Vite + React feedback widget install guide

Astro feedback widget install guide

Other frameworks: use the HTML snippet from Setup → Install with AI → “Prefer to add the code yourself?” → HTML / Vite, placed once in your framework’s shared browser entry.

After feedback: the Claude Code workflow

Installing the widget does not grant repository access or start a coding worker. GitHub connection and Claude credentials are separate owner steps. Approving a plan and starting a run stay separate.