@robertdima/feedback-toolbar

A Vercel-like feedback toolbar for Nuxt 4 projects with Supabase backend. Allow clients to click anywhere on your dev deployments and leave feedback (bugs, feature requests, comments).

Features

• 🎯 Click-to-comment: Click anywhere on the page to leave contextual feedback
• 📸 Screenshot capture: Automatically captures screenshots with html2canvas
• 📍 Position tracking: Records click coordinates and CSS selectors
• 📱 Device info: Captures browser, OS, viewport, and device pixel ratio
• 🔐 Password protection: Simple password gate via environment variable
• 📬 Inbox sidebar: Quick access to view and manage tickets
• 📊 Full dashboard: Dedicated /_feedback route for complete ticket management
• ⚡ Real-time updates: Supabase realtime subscriptions for live updates
• ⌨️ Keyboard shortcuts: Press Cmd/Ctrl + . to enter comment mode
• 🎨 Beautiful UI: Dark glass-morphism design with smooth animations

Installation

npm install @robertdima/feedback-toolbar

Setup

1. Configure Nuxt Module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@robertdima/feedback-toolbar'],

  feedbackToolbar: {
    // Required: Supabase connection
    supabaseUrl: process.env.SUPABASE_URL,
    supabaseKey: process.env.SUPABASE_ANON_KEY,

    // Required: Project identifier
    projectId: 'my-project',

    // Optional: Password protection
    password: process.env.FEEDBACK_PASSWORD,

    // Optional: UI configuration
    position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
    enableScreenshots: true,
    enableKeyboardShortcut: true,
    dashboardPath: '/_feedback', // Set to false to disable

    // Optional: Environment control (defaults to enabled in development only)
    enabled: process.env.NODE_ENV !== 'production',
  }
})

2. Set Up Supabase Database

Run the SQL schema in your Supabase SQL Editor:

# Copy the schema from
packages/feedback-toolbar/supabase/schema.sql

The schema creates:

• tickets table with all feedback data
• ticket_comments table for threaded discussions
• Indexes for efficient queries
• Row-level security policies
• Realtime subscriptions
• Automatic updated_at timestamps

3. Set Up Supabase Storage (Optional)

If you want screenshot uploads, create a storage bucket:

1. Go to Supabase Dashboard > Storage
2. Create a new bucket named feedback-screenshots
3. Make it public for read access
4. Add the following policies:
   • Public read: Allow SELECT for everyone
   • Authenticated upload: Allow INSERT for authenticated/anon users

4. Add Environment Variables

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
FEEDBACK_PASSWORD=your-secret-password

Usage

Basic Usage

The toolbar automatically appears on your site. Users can:

1. Click the floating button (or press Cmd + .)
2. Click anywhere on the page to place a comment
3. Fill in the feedback form
4. Submit to create a ticket

Accessing the Dashboard

Navigate to /_feedback (or your configured dashboardPath) to access the full ticket management dashboard.

Composables

The module provides composables for custom integrations:

// Access toolbar state
const {
  isOpen,
  mode,
  startCommenting,
  openInbox
} = useToolbar()

// Access tickets
const {
  tickets,
  createTicket,
  updateTicket
} = useTickets()

// Access auth state
const {
  isAuthenticated,
  authenticate
} = useAuth()

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | supabaseUrl | string | - | Your Supabase project URL (required) | | supabaseKey | string | - | Your Supabase anon key (required) | | projectId | string | 'default' | Unique identifier for your project | | password | string | - | Password for access (optional) | | position | string | 'bottom-right' | Button position | | enableScreenshots | boolean | true | Enable screenshot capture | | enableKeyboardShortcut | boolean | true | Enable Cmd/Ctrl + . shortcut | | dashboardPath | string \| false | '/_feedback' | Dashboard route path | | enabled | boolean | !production | Enable/disable the module |

Ticket Types

• 🐛 Bug: Something isn't working
• ✨ Feature: New functionality request
• 💡 Improvement: Enhancement to existing features
• ❓ Question: Need clarification

Development

# Install dependencies
pnpm install

# Prepare for development
pnpm dev:prepare

# Run playground
pnpm dev

# Build the module
pnpm build

License

MIT