Docs / Install the Widget / React and Vite

Add a Feedback Widget to React and Vite

For a single-page React app, put both tags in index.html. The widget runs outside React, so there is no component or package to install.

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 index.html

   Vite keeps it in the project root; Create React App keeps it in public/. Add the meta tag inside head and the widget script just before the closing body tag, then deploy.

   index.html Copy

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="feedblox-site-verification" content="YOUR_VERIFICATION_TOKEN" />
       <!-- your existing tags -->
     </head>
     <body>
       <div id="root"></div>
       <script type="module" src="/src/main.tsx"></script>
       <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"
       ></script>
     </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

• Adding the meta tag with react-helmet or another client-side head manager does not work for verification, because the tag is not in the HTML the server returns.
• Routing with React Router is fine: the widget stays on screen and records the page a report came from.
• To attach the signed-in user or app version to reports, call window.FeedBlox.setMetadata({ userId, plan }) once you know them.

Troubleshooting

Other Platforms

WordPress , Webflow , Shopify , Framer , Wix , Squarespace , Next.js , 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.