Documentation

Bugfeed helps you collect visual feedback from your users. Add a feedback widget to your website in minutes and start receiving bug reports with screenshots, browser info, and device diagnostics.

Quick Start

1. Create an account and add your first site in the dashboard.
2. Copy your site key from the dashboard.
3. Add the widget script to your website (see Installation below).
4. Start receiving feedback in your dashboard!

Installation

Add the following script tag to your website, just before the closing </body> tag:

<script>
  window.BugFeedConfig = {
    siteKey: 'YOUR_SITE_KEY',
    // Optional settings
    position: 'bottom-right',
    theme: 'light',
  };
</script>
<script src="https://cdn.bugfeed.co.uk/widget.js" defer></script>

Replace YOUR_SITE_KEY with the site key from your dashboard.

Configuration

Configure the widget behavior using the BugFeedConfig object:

window.BugFeedConfig = {
  // Required
  siteKey: 'YOUR_SITE_KEY',

  // Widget position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  position: 'bottom-right',

  // Theme: 'light' | 'dark' | 'auto'
  theme: 'light',

  // Primary color (hex)
  primaryColor: '#6366f1',

  // Show floating button (default: true)
  showButton: true,

  // Button text
  buttonText: 'Feedback',

  // Enable screenshot capture (default: true)
  enableScreenshot: true,

  // Enable device diagnostics (default: true)
  enableDiagnostics: true,

  // Callback after successful submission
  onSubmit: (feedback) => {
    // Handle feedback submission (e.g., show toast, track analytics)
  },
};

Configuration Options

Feedback Types

Bugfeed supports three types of feedback, each styled differently to help you quickly identify and prioritize incoming reports:

How Users Select a Type

When users open the feedback widget, they can select the type of feedback before submitting. The widget displays clear icons and labels for each type, making it easy for users to categorize their report.

Filtering by Type

In your dashboard inbox, you can filter feedback by type to focus on specific categories. This helps you prioritize bugs while still tracking feature requests and general feedback.

Customization

Customize the widget appearance to match your brand. You can adjust colors, position, and text from your dashboard settings or via the configuration object.

Custom CSS

Override widget styles with custom CSS using the .bugfeed- prefix:

/* Custom button style */
.bugfeed-button {
  border-radius: 100px !important;
}

/* Custom modal style */
.bugfeed-modal {
  font-family: 'Your Font', sans-serif !important;
}

Custom Triggers

Hide the default button and trigger the widget from your own UI elements:

// Disable default button
window.BugFeedConfig = {
  siteKey: 'YOUR_SITE_KEY',
  showButton: false,
};

// Open widget programmatically
document.querySelector('#my-feedback-btn').addEventListener('click', () => {
  window.BugFeed.open();
});

// Or use the CSS class trigger
<button class="bugfeed-trigger">Send Feedback</button>

Integrations

Send bug reports to Slack, Discord, GitHub, Linear, Trello, or any webhook.

// Webhook payload format
{
  "id": "fb_123abc",
  "type": "bug",
  "message": "Button doesn't work",
  "email": "user@example.com",
  "url": "https://yoursite.com/page",
  "screenshot_url": "https://cdn.bugfeed.co.uk/screenshots/...",
  "diagnostics": {
    "browser": "Chrome 120",
    "os": "macOS 14",
    "screen": "1920x1080"
  },
  "created_at": "2024-12-20T10:30:00Z"
}

Chrome Extension

Capture feedback from any website without installing the widget.

Installation

1. Install the extension from the Chrome Web Store
2. Click the extension icon and sign in
3. Select a site to capture feedback for

Usage

• Click the extension icon to open the feedback form
• Use Ctrl+Shift+F (or Cmd+Shift+F on Mac) as a shortcut
• Screenshots are captured automatically
• View your feedback history in the extension popup

API Reference

Access your feedback programmatically via our REST API.

Authentication

API requests require an API key passed in the Authorization header:

curl -H "Authorization: Bearer YOUR_API_KEY" \
  https://api.bugfeed.co.uk/v1/feedback

List Feedback

GET /v1/feedback?site_id=SITE_ID&limit=20&offset=0

Response:
{
  "data": [...],
  "total": 150,
  "limit": 20,
  "offset": 0
}

Get Single Feedback

GET /v1/feedback/:id

Response:
{
  "id": "fb_123abc",
  "type": "bug",
  "message": "...",
  "screenshot_url": "...",
  ...
}

FAQ

Troubleshooting