Install · SvelteKit

Bug reports and feedback from your SvelteKit site, in one script tag.

Add a SvelteKit feedback widget and bug report button with one script tag in app.html. No package, no build step, nothing added to your bundle.
Start freeNo credit card required.

Where it goes

In src/app.html, just before the closing body tag — the template SvelteKit renders every page into.

Setup

Adding the widget to SvelteKit

  1. 01

    Copy your widget key

    Take the snippet from the Widget tab of your project. The key starts with uw_pk_ and is public by design: it is served in your HTML to every visitor, and the domain allowlist is the control that matters.

  2. 02

    Edit src/app.html

    This is the one file every SvelteKit route is rendered into, which makes it the right place for anything that should load exactly once. Put the tag after the %sveltekit.body% placeholder so it never competes with hydration.

    html
    <!-- src/app.html -->
<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
  <script
    src="https://userwants.app/widget.js"
    data-userwants-key="uw_pk_..."
    defer
  ></script>
</body>
  3. 03

    Allow your domain

    Add your production hostname under Allowed domains in the Widget tab. The list fails closed, so until you add it the widget only appears on localhost — including on any preview deployment, which each get their own hostname.

  4. 04

    Identify signed-in users

    If your load function already returns a user, pass the id you have and nobody is asked for an email. Do it in a browser guard so it never runs during server rendering.

    js
    import { browser } from '$app/environment';

$: if (browser && data.user) {
  window.UserWants?.identify({
    identifier: data.user.id,
    name: data.user.name,
    email: data.user.email
  });
}

Worth knowing

What bites on SvelteKit

The things that are specific to a JavaScript framework, rather than true of every install.

  • SvelteKit ships a CSP config, and it will block the tag

    If you set kit.csp in svelte.config.js, add https://userwants.app to both script-src and connect-src. Without connect-src the widget renders and then fails silently when a report is submitted.

  • Do not put it in +layout.svelte

    A script element in a Svelte template is created but not executed. The layout is also re-run on navigation in some configurations, and the widget refuses to initialise twice, so you get nothing either way.

  • Adapter-static works the same

    app.html is baked into every prerendered page, so a fully static build carries the tag on every route with no extra step.

FAQ

Questions

Does it work with a prerendered or fully static SvelteKit site?
Yes. The tag is part of app.html, so it is written into every prerendered page at build time. The widget is entirely client-side and needs no server route, no endpoint and no runtime from your app.
Will it run during server-side rendering?
No. It is a deferred browser script, so it never executes on the server. Guard any identify call with the browser check from $app/environment, since window does not exist during SSR.

The full reference — every field the widget collects, the domain allowlist rules and the JavaScript API — is in the widget docs.

Try it on your SvelteKit site.

Paste the tag, add your domain, and the next report arrives with the screenshot and the JavaScript error already attached.

Start freeRead the docs