Bugfeed Documentation
Learn how to install and configure Bugfeed to collect visual bug reports from your website visitors.
Start with the Quick Start guide below to get up and running in under 2 minutes.
Quick Start
Add Bugfeed to your website in just two steps:
Add the configuration
Add this script tag before the closing </body> tag:
<script>
window.BugfeedConfig = {
projectId: 'YOUR_PROJECT_ID',
endpoint: 'https://api.bugfeed.co.uk/api/feedback'
};
</script>Load the widget
Add the Bugfeed script right after the configuration:
<script src="https://cdn.bugfeed.co.uk/widget.js"></script>That's it! A feedback button will appear in the bottom-right corner of your website.
Installation
There are multiple ways to add Bugfeed to your project:
Script Tag (Recommended)
The simplest way to add Bugfeed is via a script tag. This works with any website or web application.
<!-- Bugfeed Widget -->
<script>
window.BugfeedConfig = {
projectId: 'YOUR_PROJECT_ID',
endpoint: 'https://api.bugfeed.co.uk/api/feedback',
position: 'bottom-right',
primaryColor: '#ff6b47'
};
</script>
<script src="https://cdn.bugfeed.co.uk/widget.js"></script>NPM Package
For React, Vue, or other JavaScript frameworks:
npm install @bugfeed/widgetThen initialize in your app:
import Bugfeed from '@bugfeed/widget';
Bugfeed.init({
projectId: 'YOUR_PROJECT_ID',
endpoint: 'https://api.bugfeed.co.uk/api/feedback'
});Basic Configuration
Configure Bugfeed using the BugfeedConfig object:
| Option | Type | Default | Description |
|---|---|---|---|
projectId | string | - | Your unique project identifier (required) |
endpoint | string | - | API endpoint URL (required) |
position | string | 'bottom-right' | Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left' |
primaryColor | string | '#ff6b47' | Primary accent color (hex) |
theme | string | 'light' | Color theme: 'light' or 'dark' |
showFloatingButton | boolean | true | Show the floating feedback button |
includeScreenshot | boolean | true | Enable screenshot capture |
includeDiagnostics | boolean | true | Collect browser/device info |
triggerClass | string | 'bugfeed-trigger' | CSS class for custom trigger elements |
Customization
Customize the widget appearance to match your brand. The easiest way is through your Bugfeed dashboard:
Go to Settings → Widget in your dashboard to customize colors, position, theme, button text, and more - no code required!
Advanced: Code Configuration
For advanced use cases, you can also override settings via JavaScript:
window.BugfeedConfig = {
projectId: 'YOUR_PROJECT_ID',
endpoint: 'https://api.bugfeed.co.uk/api/feedback',
// Appearance
primaryColor: '#6366f1', // Your brand color
theme: 'dark', // 'light' or 'dark'
position: 'bottom-left', // Widget position
// Behavior
showFloatingButton: true, // Show/hide floating button
includeScreenshot: true, // Enable screenshots
includeDiagnostics: true, // Collect device info
// Custom text
buttonText: 'Report Bug',
successMessage: 'Thanks! We\'ll look into this.',
// Callbacks
onSubmit: function(data) {
console.log('Feedback submitted:', data);
},
onOpen: function() {
console.log('Widget opened');
},
onClose: function() {
console.log('Widget closed');
}
};Custom Triggers
Open the feedback widget from any element on your page:
<!-- Any element with this class will open the widget -->
<button class="bugfeed-trigger">Report a Bug</button>
<!-- Works on any element -->
<a href="#" class="bugfeed-trigger">Send Feedback</a>
<span class="bugfeed-trigger">Having issues?</span>Or use the JavaScript API:
// Open the widget programmatically
Bugfeed.open();
// Close the widget
Bugfeed.close();
// Toggle the widget
Bugfeed.toggle();Slack Integration
Get bug reports delivered directly to your Slack channel. Set this up in seconds from your dashboard.
Open Integrations
In your Bugfeed dashboard, go to Settings → Integrations → Slack.
Connect to Slack
Click "Connect to Slack" and authorize Bugfeed to post to your workspace. Select the channel where you want to receive bug reports.
That's it! You'll now receive formatted bug reports with screenshots directly in your Slack channel.
Discord Integration
Send bug reports to your Discord server. Set this up in seconds from your dashboard.
Open Integrations
In your Bugfeed dashboard, go to Settings → Integrations → Discord.
Connect to Discord
Click "Connect to Discord" and authorize Bugfeed to post to your server. Select the channel where you want to receive bug reports.
Done! Bug reports will now appear in your Discord channel with full details and screenshots.
Webhooks
Send bug reports to any endpoint via webhooks.
Configure your webhook URL in the dashboard. Bugfeed will POST the following payload:
{
"id": "fb_abc123",
"projectId": "your-project",
"type": "bug",
"message": "Button doesn't work on mobile",
"email": "user@example.com",
"url": "https://example.com/page",
"screenshot": "https://cdn.bugfeed.co.uk/screenshots/abc123.png",
"diagnostics": {
"browser": "Chrome 120",
"os": "macOS 14.2",
"viewport": "1920x1080",
"userAgent": "..."
},
"createdAt": "2024-01-15T10:30:00Z"
}Chrome Extension
Use the Bugfeed Chrome extension for internal QA and testing.
Screenshot any page
Capture screenshots on any website, even without the widget installed.
Annotate & highlight
Draw on screenshots to highlight issues before submitting.
Auto diagnostics
Automatically captures browser, OS, and viewport information.
API Reference
Access your bug reports programmatically via the Bugfeed API.
Authentication
Include your API key in the header:
Authorization: Bearer YOUR_API_KEYEndpoints
/api/feedback List all feedback for your project
/api/feedback/:id Get a single feedback item
/api/feedback Submit new feedback
/api/feedback/:id Delete a feedback item
Example Request
curl -X GET \
https://api.bugfeed.co.uk/api/feedback \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json"Need Help?
Can't find what you're looking for?