Docs / Install the Widget / Next.js

Add a Feedback Widget to Next.js

Both tags go in the root layout, so every route gets them. Metadata renders the meta tag on the server, which is what verification needs.

Steps

1. 1

   Copy Your Tags From FeedBlox

   In the FeedBlox dashboard, add your site with its public URL, then open Widget. Copy the verification meta tag now. The install snippet with your site ID and embed token appears on the same page once the site is verified.

2. 2

   App Router: Edit app/layout.tsx

   Add the verification key to metadata.other and render the widget with next/script after your children. Fill in the site ID and token after verifying.

   app/layout.tsx Copy

   import type { Metadata } from "next";
   import Script from "next/script";
   
   export const metadata: Metadata = {
     // Keep your existing title and description; add this key.
     other: { "feedblox-site-verification": "YOUR_VERIFICATION_TOKEN" },
   };
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body>
           {children}
           <Script
             src="https://app.feedblox.net/widget.js"
             strategy="afterInteractive"
             data-site-id="YOUR_SITE_ID"
             data-token="YOUR_EMBED_TOKEN"
             data-api-url="https://api.feedblox.net"
             data-position="middle-right"
           />
         </body>
       </html>
     );
   }

3. 3

   Pages Router: Edit pages/_document.tsx

   On the Pages Router, put both tags in the custom document instead.

   pages/_document.tsx Copy

   import { Head, Html, Main, NextScript } from "next/document";
   
   export default function Document() {
     return (
       <Html lang="en">
         <Head>
           <meta name="feedblox-site-verification" content="YOUR_VERIFICATION_TOKEN" />
         </Head>
         <body>
           <Main />
           <NextScript />
           <script
             src="https://app.feedblox.net/widget.js"
             async
             data-site-id="YOUR_SITE_ID"
             data-token="YOUR_EMBED_TOKEN"
             data-api-url="https://api.feedblox.net"
             data-position="middle-right"
           />
         </body>
       </Html>
     );
   }

4. 4

   Verify and Send a Test Report

   Back on the Widget page, click Verify Site. Then open your live site, click the launcher, and send a test report. It reaches your inbox with the console output and failed requests captured on that page. To include errors from before a visitor opens the widget, turn on Start Capturing Client Debug Early in Widget settings.

Good to Know

• Do not add the meta tag from a client component or useEffect. Verification reads the HTML the server sends.
• The widget stays mounted across client-side navigation, so one script in the root layout covers every route.
• To test on Vercel preview deployments, add their origin under Additional Embed Origins in FeedBlox site settings.

Troubleshooting

Other Platforms

WordPress , Webflow , Shopify , Framer , Wix , Squarespace , React and Vite , Lovable , Bolt , v0 , Vue , Astro , SvelteKit , Nuxt , Remix and React Router , Ghost , Bubble , Laravel , Django , or the generic install guide for any site where you can edit the HTML.