Docs / Install the Widget / Vue

Add a Feedback Widget to Vue

A Vue single-page app built with Vite has one index.html for every route. Both tags go there, and nothing changes in your components.

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

   Add the meta tag inside head and the widget script just before the closing body tag, next to your app's entry script. Then build and 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="app"></div>
       <script type="module" src="/src/main.ts"></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

• Using Nuxt instead? Follow the Nuxt guide, which renders the meta tag on the server.
• Vue Router navigation keeps the widget on screen and records the page each report came from.
• Adding the meta tag with a client-side head manager does not work for verification, because it is not in the HTML the server returns.

Troubleshooting

Other Platforms

WordPress , Webflow , Shopify , Framer , Wix , Squarespace , Next.js , React and Vite , Lovable , Bolt , v0 , 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.