@newsoftglobal/feedbackkit-vue

🎯 Collect user feedback with screenshots directly from your Vue.js app.

A lightweight Vue 3 plugin that adds a feedback widget to your app. Users can select a screen region, capture a screenshot, submit feedback, and track their submissions — all without leaving your app.

Features

• 📸 Screen Capture — Drag to select any area, auto-capture with html2canvas
• 💬 Feedback Form — Title, description, type (bug/feature/improvement), email
• 📋 My Feedbacks — Users can view their submitted feedbacks and status
• 🗨️ Comments — Two-way conversation between users and admin
• 🔑 User Identity — setUser / clearUser pattern for delayed auth
• 🎨 Dark Theme — Premium dark UI that blends with any app
• ⚡ Lightweight — ~60KB gzipped (includes html2canvas)

Installation

npm install @newsoftglobal/feedbackkit-vue

Quick Start

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import FeedbackKit from '@newsoftglobal/feedbackkit-vue'
import '@newsoftglobal/feedbackkit-vue/style.css'

const app = createApp(App)

app.use(FeedbackKit, {
  apiKey: 'your-api-key'
})

app.mount('#app')

Add the widget to your root component:

<template>
  <div>
    <!-- Your app content -->
    <FeedbackWidget />
  </div>
</template>

That's it! A purple floating button will appear at the bottom-right corner.

User Identity

FeedbackKit supports init first, set user later — perfect for apps where login happens after page load.

import { useFeedbackKit } from '@newsoftglobal/feedbackkit-vue'

// In your login handler:
const { setUser, clearUser } = useFeedbackKit()

// After user logs in
setUser({
  id: 'user-123',         // required
  name: 'John Doe',       // optional
  email: '[email protected]' // optional
})

// On logout
clearUser()

Or via Options API:

// In any component
this.$feedbackKit.setUser({ id: 'user-123', name: 'John' })
this.$feedbackKit.clearUser()

How It Works

1. User clicks the floating button → Panel opens with two tabs
2. "New Feedback" tab → Click "Select Area & Capture"
3. Drag to select a region on the screen → Click "✓ Capture"
4. Fill in the feedback form → Submit
5. "My Feedbacks" tab → View all submitted feedbacks with status
6. Click a feedback → See detail & comments (chat with admin)

Configuration

app.use(FeedbackKit, {
  apiKey: string,      // Required - API key from your FeedbackKit admin
  serverUrl: string    // Required - Your FeedbackKit backend URL
})

API

useFeedbackKit() (Composition API)

const { setUser, clearUser, user, hasUser } = useFeedbackKit()

| Method | Description | |---|---| | setUser({ id, name?, email? }) | Set current user identity | | clearUser() | Clear user identity (on logout) | | user | Reactive user object | | hasUser | Boolean — whether a user is set |

this.$feedbackKit (Options API)

Same methods available on this.$feedbackKit in any component.

Backend

This SDK requires a FeedbackKit backend server. The SDK communicates via:

| Endpoint | Method | Auth | Description | |---|---|---|---| | /api/feedbacks | POST | API Key | Submit feedback | | /api/feedbacks/user | GET | API Key | List user's feedbacks | | /api/feedbacks/user/:id | GET | API Key | Get feedback detail | | /api/feedbacks/user/:id/comments | POST | API Key | Add user comment |

All requests include x-api-key header automatically.

Environment Variables (Vite)

VITE_FEEDBACKKIT_API_KEY=your-api-key
VITE_FEEDBACKKIT_SERVER_URL=http://localhost:3000

app.use(FeedbackKit, {
  apiKey: import.meta.env.VITE_FEEDBACKKIT_API_KEY,
  serverUrl: import.meta.env.VITE_FEEDBACKKIT_SERVER_URL
})

License

MIT