Overview

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

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

Prerequisites

Before you begin, ensure the following:

Userback Workspace: A workspace is needed to collect and manage feedback.
Access Token: Retrieve your token via the Code Icon in your workspace.
Plan Requirements: Available on all plans.

Installation

Install the Userback package for Vue using the following command:

NPM Installation

npm i @userback/widget

Quickstart

Set up the Userback plugin in main.ts after bootstrapping the app.

Code Example

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("**Userback Access Token**", options)
      .then(() => {
        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 } 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("**Userback Access Token**", options)
      .then(() => {
        console.log("Userback successfully initialized");
      })
  })

Using Userback in AngularJs 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 open(), identify(), or startSessionReplay().

Example

Step 1: Create the Userback Service

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;
  }
}

Step 2: Using the service in Components

Now, you can inject the UserbackService into any component to use the widget.

Example: Using Userback in AppComponent

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() {
    this.userbackService.openFeedback('bug');
  }
}

For advanced customisation, refer to the Userback Npm docs.

🛟 Support

Need help? Here’s how to get assistance:

Log in to your Userback workspace.
Click the Help Center icon in the top-right corner.
Select Contact us to start a chat with our support team.