How to add a feedback widget to a SvelteKit app

Where the Bopmigo line goes in a SvelteKit app (src/app.html), with code you can copy, and how to test it locally.

Short answer: paste your Bopmigo line into src/app.html, after %sveltekit.body%. Build and deploy.

Add it to SvelteKit

1. 1

   Create your Bopmigo project

   Sign up at bopmigo.com, choose Website, and add your SvelteKit address. Copy your line from Install snippet:

   HTMLCopy

   <script src="https://bopmigo.com/widget.js"
     data-project="YOUR-PROJECT-ID" defer></script>

2. 2

   Open it

   Open src/app.html.

3. 3

   Add your line

   Add the line after %sveltekit.body%, before </body>.

   HTMLCopy

   <!-- src/app.html -->
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
     <script src="https://bopmigo.com/widget.js"
       data-project="YOUR-PROJECT-ID" defer></script>
   </body>

4. 4

   Go live

   Build and deploy.

5. 5

   Send yourself a test

   Open the live page, choose Feedback and send a short report. It arrives in your Bopmigo inbox (and by email, if you turned that on). Reply, then open Feedback again to see your answer.

SvelteKit tips

• app.html wraps every page, so it loads once for the whole app.
• Client-side navigation is picked up automatically.
• Works with every adapter (Vercel, Netlify, Node, static).

Single-page apps and client-side routing

Load the script once in the root layout, not per page. Bopmigo notes the page people are on when they report, including after client-side navigation, so there’s nothing to re-run on route changes.

Testing locally

Add your local address (for example http://localhost:3000) to the project in Bopmigo, alongside your production address. Reports are only accepted from addresses you list.

What SvelteKit users tend to report

• Form actions that fail without feedback.
• Navigation that skips a loading state.
• Layout shifts on smaller screens.

Your first week

1. 1

   Day 1: test locally and in production

   Send a report from localhost and from your live site, and check both arrive in the same inbox.

2. 2

   Days 2 to 5: identify signed-in users

   Pass the user ID and any useful context, such as plan or account, so each report says who it came from.

3. 3

   Days 6 and 7: route reports to your tracker

   Copy reports that need code changes into your issue tracker, and reply when the fix ships.

Questions

More: all install guides · website options · install with a coding agent