Add a feedback widget to a Next.js app by loading one async script in your root layout. It works on App Router and Pages Router without a React SDK. Create a FeedBlox site for your public URL, verify the domain, paste the snippet, and submit a test report from staging.
Next.js teams usually want feedback on both marketing pages and authenticated app routes. You do not need a wrapper package for the first version - next/script with afterInteractive is enough.
App Router: Root Layout
Add the embed in app/layout.tsx so it loads on every route. Use next/script with strategy="afterInteractive" to avoid blocking hydration.
Place the script after {children} inside body so the launcher renders on marketing and app routes alike.
app/layout.tsx (excerpt)
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://feedblox.net/widget.js"
data-site-id="YOUR_SITE_ID"
data-token="YOUR_EMBED_TOKEN"
data-position="bottom-right"
strategy="afterInteractive"
/>
</body>
</html>
);
}
Attach SaaS Metadata From the Client
After login, call FeedBlox.setMetadata from a client component so bug reports include plan, user ID, or release tag. Use opaque IDs only.
Mount the metadata component inside your authenticated layout so values update when the session changes.
'use client';
import { useEffect } from 'react';
export function FeedBloxMetadata({ userId, plan }) {
useEffect(() => {
if (typeof window.FeedBlox?.setMetadata !== 'function') return;
window.FeedBlox.setMetadata({ userId, plan, framework: 'nextjs' });
}, [userId, plan]);
return null;
}
Preview and Production URLs
Verify domain ownership against the URL visitors actually use (Vercel preview or production). Submit a test report from a preview deployment before go-live.
If preview URLs change often, use a dedicated staging site in FeedBlox with its own embed token. FeedBlox Free includes three sites - enough for staging, preview, and production.
Founder adds site in dashboard, pastes one async script before body close, verifies domain, submits a test report from staging. Inbox row shows sentiment, page URL, and client debug.
Plain Script Tag Alternative
You can paste the dashboard snippet directly if you prefer not to use next/script. Include preconnect for faster first load.
Pages Router teams can use the same snippet in pages/_document.tsx or _app.tsx.
<link rel="preconnect" href="https://feedblox.net" crossorigin />
<script src="https://feedblox.net/widget.js" async
data-site-id="YOUR_SITE_ID"
data-token="YOUR_EMBED_TOKEN"
data-position="middle-right"
data-offset-bottom="16"
data-offset-side="16"></script>Verify Capture on Staging
- Deploy with the embed on a staging or preview URL
- Open a page and trigger a controlled console error or failed fetch
- Submit feedback through the launcher
- Confirm inbox shows console, network, JS errors, and element trail
- Roll out to production routes once verified
