Install · Angular

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

Add an Angular feedback widget and bug report button with one script tag in index.html. No module to import, no provider, nothing in your bundle.
Start freeNo credit card required.

Where it goes

In src/index.html, just before the closing body tag and after the app-root element.

Setup

Adding the widget to Angular

  1. 01

    Copy your widget key

    From the Widget tab of your project in UserWants. The key starts with uw_pk_ and is public by design: it is served in your HTML to every visitor, and what restricts it is the domain allowlist rather than keeping it hidden.

  2. 02

    Add the tag to src/index.html

    This is the shell the Angular CLI copies into your build output, so the tag survives every build without appearing in a bundle. Put it after app-root, outside anything Angular renders into.

    html
    <!-- src/index.html -->
<body>
  <app-root></app-root>
  <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 the widget runs on localhost only until you add the domain. Add your staging hostname too if testers use it.

  4. 04

    Identify signed-in users

    If you have an auth service, subscribe to it once in your root component and pass the id you already hold. The widget then stops asking the reporter for an email, and reports arrive attached to a known account.

    ts
    declare const UserWants: any;

ngOnInit() {
  this.auth.user$.subscribe((user) => {
    if (!user) return;
    (window as any).UserWants?.identify({
      identifier: user.id,
      name: user.name,
      email: user.email
    });
  });
}

Worth knowing

What bites on Angular

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

  • Do not add it to the scripts array in angular.json

    That would pull the file into your build output and serve it from your own origin, which breaks updates and gains nothing. Leave it as a remote tag in index.html.

  • TypeScript will not know about window.UserWants

    Cast through any, as above, or add a declaration file to src/typings.d.ts. Both are fine; the widget exposes no types package because there is no package.

  • Zone.js does not need to know either

    The widget runs entirely outside Angular, so its event listeners never trigger change detection and never cause an ExpressionChangedAfterItHasBeenCheckedError.

FAQ

Questions

Is there an Angular module or NgRx integration?
No. Nothing is imported into your application, so there is no module, no provider and no store integration. The widget attaches to the document itself, and the only call you might make is identify for signed-in users.
Does it work with Angular Universal server-side rendering?
Yes. The tag is inert markup during server rendering and executes only in the browser once the document loads. Guard any identify call with a platform check so it never runs on the server, where window does not exist.

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 Angular 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