🍯 Corvura
Back to Blog
tutorial nextjs integration

How to Add a Feedback Widget to Your Next.js App

· Corvura Team

Next.js is the go-to framework for indie hackers building modern web apps. Adding a feedback widget to your Next.js project takes about two minutes with Corvura. Here's how.

Step 1: Get your tracking code

Sign up for Corvura and create a project. You'll get a unique tracking code that looks something like fh_abc123def456.

Step 2: Add the script tag

The simplest approach is to add the Corvura script to your root layout. Open your app/layout.tsx (App Router) or pages/_app.tsx (Pages Router) and add the script.

App Router (Next.js 13+)

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.corvura.com/corvura.min.js"
          data-tracking-code="YOUR_TRACKING_CODE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

// pages/_app.tsx
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.corvura.com/corvura.min.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </>
  )
}

The strategy="afterInteractive" ensures the widget loads after the page is interactive, so it won't block your initial render.

Step 3: Add a feedback button

Add a button anywhere in your app with the data-corvura attribute. When users click it, the feedback modal opens.

<button data-corvura>
  Send Feedback
</button>

You can style this button however you want. The data-corvura attribute is all Corvura needs to hook into it.

Step 4: That's it

Seriously. Visit your site, click the button, and submit some test feedback. You'll see it appear in your Corvura dashboard within seconds.

What you get automatically

Once the widget is loaded, Corvura automatically tracks:

  • Page visits — Every page navigation (works with Next.js client-side routing)
  • Referrers — Which sites are sending you traffic
  • Device info — Browser, OS, and device type
  • Session duration — How long users stay on your site

All of this happens without cookies and without collecting personal data. No consent banner needed. Learn more about our approach to privacy-friendly analytics.

Environment variables

For a cleaner setup, store your tracking code in an environment variable:

# .env.local
NEXT_PUBLIC_FH_TRACKING_CODE=fh_abc123def456

Then reference it in your layout:

<Script
  src="https://widget.corvura.com/corvura.min.js"
  data-tracking-code={process.env.NEXT_PUBLIC_FH_TRACKING_CODE}
  strategy="afterInteractive"
/>

Common patterns

Feedback button in the navbar

<nav>
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
  <button
    data-corvura
    className="text-sm text-gray-500 hover:text-gray-700"
  >
    Feedback
  </button>
</nav>

Floating feedback button

<button
  data-corvura
  className="fixed bottom-4 right-4 bg-amber-500 text-white px-4 py-2 rounded-full shadow-lg hover:bg-amber-600"
>
  Feedback
</button>

Next steps

Ready to collect user feedback?

Start collecting feedback in minutes. No credit card required.

Get Started Free