Vue

The official NPM module for embedding the Userback Widget into your Vue 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 Vue using the following command.

npm i @userback/widget

Quickstart

Set up the Userback plugin using App.use to install it into the global scope under $userback.

import Userback from '@userback/widget';

const token = 'YOUR_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 = 'YOUR_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 your 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 openForm(), identify(), or startSessionReplay().

Examples

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.openForm('bug');
    }
  }
};
</script>

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.openForm('bug');
    }

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

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.openForm('bug');
    }

    return { openFeedback };
  }
};

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.