Angular

The official NPM module for embedding the Userback Widget into your Angular application.

Official NPM Package: @userback/widget
Official GitHub Repository: Userback Widget SDK

📘
Before you start
You'll need your Userback access token. Click the Code icon in the top-right corner of your workspace to find it.

Installation

Install the Userback package for Angular using the following command.

npm i @userback/widget

Quickstart

Initialize Userback in main.ts after bootstrapping your Angular app.

import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";
import Userback from "@userback/widget";

// Identify your logged-in users (optional)
const options = {
  user_data: {
    id: "123456", // Unique user ID
    info: {
      name: "someone", // User's name
      email: "[email protected]" // User's email
    }
  }
};

// Bootstrapping the Angular application
bootstrapApplication(AppComponent, appConfig)
  .then(() => {
    // After app is bootstrapped, initialize Userback
    Userback('YOUR_ACCESS_TOKEN', options)
      .then((userback_instance) => {
        console.log("Userback successfully initialized");
      })
  });

import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component"; 
import Userback from "@userback/widget";
import type { UserbackOptions, UserbackWidget } from "@userback/widget";

// identify your logged-in users (optional)
const options: UserbackOptions = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "[email protected]"
    }
  }
};

bootstrapApplication(AppComponent, appConfig)
  .then(() => {
    // After app is bootstrapped, initialize Userback
    Userback('YOUR_ACCESS_TOKEN', options)
      .then((userback_instance: UserbackWidget) => {
        console.log("Userback successfully initialized");
      })
  })

Using Userback in your Angular app

General approach

Initialize the Userback widget once — for example, in your root file or when the user logs in.
Store the instance (returned as a Promise) in a context, global store, or a simple module.
Use the instance in any component or hook to trigger actions like openForm(), identify(), or startSessionReplay().

Example: Using a shared Userback service

Create a service to manage the Userback instance:

import { Injectable } from '@angular/core';
import type { UserbackWidget } from '@userback/widget';

@Injectable({
  providedIn: 'root',
})
export class UserbackService {
  private userbackInstance?: UserbackWidget;

  setInstance(instance: UserbackWidget) {
    this.userbackInstance = instance;
  }

  getInstance(): UserbackWidget | undefined {
    return this.userbackInstance;
  }
}

Then inject it into any component:

import { Component } from '@angular/core';
import { UserbackService } from './userback.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to the Feedback App</h1>
    <button (click)="openFeedback()">Give Feedback</button>
  `,
})
export class AppComponent {
  constructor(private userbackService: UserbackService) {}

  openFeedback() {
    const userback = this.userbackService.getInstance();
    if (userback) userback.openForm('bug');
  }
}

For advanced customization, refer to the Userback npm docs.

Need help? Visit the Help Center or use the chat bubble on this page to contact our support team.