Skip to Main Content

New accounts get 30 days of Pro free. No credit card. Start Free

Docs / Install the Widget / Lovable

Add a Feedback Widget to Lovable

Lovable apps are React and Vite projects, so both tags belong in index.html. You can ask Lovable to make the change, or edit the file yourself in code view.

Two tags, about ten minutes. The meta tag proves you own the site, and the script adds the launcher. Verification reads the HTML your server returns, so the meta tag has to be in the page source, not added later by JavaScript.

New to FeedBlox? Read how bug reports work for Lovable apps first.

Steps

  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. Paste This Prompt Into Lovable

    Replace the placeholders with your values first. Leave the widget step out until you have verified, if you prefer to do it in two passes.

    Prompt 
    Add FeedBlox to this app. Edit index.html directly, not a React component:
1. Inside <head>, add exactly:
<meta name="feedblox-site-verification" content="YOUR_VERIFICATION_TOKEN" />
2. Just before </body>, add exactly:
<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>
Do not change any other file.

  3. Check the Change and Publish

    Open index.html in code view and confirm the meta tag is inside head and the script is before </body>. Then publish.

  4. Use the Published URL as Your Site URL

    In FeedBlox, the Site URL should be your published address (your lovable.app subdomain or custom domain), not the editor preview.

  5. 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

  • The editor preview runs on a different address. To see the widget there too, add that origin under Additional Embed Origins in FeedBlox site settings.
  • Reports include the console output from the visitor's session, which is often the fastest way to describe a bug back to Lovable.

Troubleshooting

Verification says the meta tag was not found

Open your live site, view the page source, and search for feedblox-site-verification. If it is missing, the change is not published yet, a cache is serving the old page, or the tag is being added by JavaScript after load. The Site URL in FeedBlox must be the public address, not localhost or an editor preview.

The launcher does not appear

Check that the site is verified and that the page's address matches the Site URL or one of your Additional Embed Origins. Then open the browser console and look for errors loading widget.js.

Other Platforms

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