Docs / Install the Widget / Remix and React Router

Add a Feedback Widget to Remix and React Router

Remix and React Router framework mode render the whole document from app/root.tsx on the server, so both tags go in its Layout.

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

   Edit app/root.tsx

   Add the meta tag next to <Meta /> in head and the widget script after <Scripts /> in body. Keep your existing imports and components.

   app/root.tsx Copy

   // app/root.tsx: add these to the Layout you already have
   export function Layout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           <meta name="feedblox-site-verification" content="YOUR_VERIFICATION_TOKEN" />
           <Meta />
           <Links />
         </head>
         <body>
           {children}
           <ScrollRestoration />
           <Scripts />
           <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>
     );
   }

3. 3

   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

• Client-side navigation does not reload the widget, so reports from any route reach the same inbox.
• To attach the signed-in user, call window.FeedBlox.setMetadata({ userId, plan }) once your loader data is available on the client.

Troubleshooting

Other Platforms

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