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 using App.use to install it into the global scope under $userback:

Vue Example

import Userback from '@userback/widget';

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

// Initialize Userback before mounting the app
Userback(token, options).then((userback) => {
  const app = createApp(App);
  // Make Userback instance globally available
  app.config.globalProperties.$userback = userback;
  app.mount("#app");
});

import { createApp } from 'vue';
import Userback, { UserbackOptions, UserbackWidget } from '@userback/widget';
import App from './App.vue';  // Assuming App.vue is the entry component

const token: string = "**Userback Access Token**";

const options: UserbackOptions = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "[email protected]",
    }
  }
};

// Initialize Userback before mounting the app
Userback(token, options).then((userback: UserbackWidget) => {
  const app = createApp(App);

  // Make Userback instance globally available
  app.config.globalProperties.$userback = userback;

  // Mount the app
  app.mount("#app");
});

Using Userback in Vue 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().

Examples

Example 1: Using Userback inside a Vue Component

You can access the $userback instance from inside any Vue component via this.$userback:

<template>
  <div>
    <h1>Welcome to the Feedback App</h1>
    <button @click="openFeedback">Give Feedback</button>
  </div>
</template>

<script>
export default {
  name: 'FeedbackButton',
  methods: {
    openFeedback() {
      this.$userback.open('bug');
    }
  }
};
</script>

Example 2: Using Userback with the Composition API

If you’re using Vue 3’s Composition API, you can access $userback via getCurrentInstance:

<template>
  <div>
    <h1>Welcome to the Feedback App</h1>
    <button @click="openFeedback">Give Feedback</button>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  name: 'FeedbackButton',
  setup() {
    const { proxy } = getCurrentInstance();

    function openFeedback() {
      proxy.$userback.open('bug');
    }

    return { openFeedback };
  }
};
</script>

Example 3: Using Userback Globally (e.g., in a Store or Service)

If you prefer to use Userback inside a Vuex store, Pinia store, or any service, you can simply inject or access the instance globally:

// userback.js
import { getCurrentInstance } from 'vue';

export function useUserback() {
  const instance = getCurrentInstance();
  if (!instance || !instance.proxy) {
    throw new Error('useUserback must be called within a Vue component setup.');
  }

  const userback = instance.proxy.$userback;
  if (!userback) {
    throw new Error('Userback is not initialized. Make sure initUserback was called.');
  }

  return userback;
}

Usage inside a component:

import { getUserback } from './userback';

export default {
  setup() {
    function openFeedback() {
      const userback = getUserback();
      userback.open('bug');
    }

    return { openFeedback };
  }
};

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.