π Simple Bug Reporter
A lightweight, self-hosted bug reporting tool for any website
Integration Example - Look for the floating button in bottom-right!
π 3-Minute Setup
Upload backend files, add script tag, and you're done! No complex configuration needed.
π Privacy-First
Self-hosted solution. All data stays on your server. GDPR compliant by design.
πΈ Built-in Screenshots
Automatic screen capture functionality with drag & drop and clipboard support.
π¨ Fully Customizable
Themes, colors, positioning, languages, and features can all be configured.
π± Mobile-Friendly
Responsive design that works perfectly on desktop, tablet, and mobile devices.
π¨βπΌ Admin Dashboard
Beautiful management interface to view, edit, and organize bug reports.
βοΈ Configuration Options
Here's how this example is configured:
// Configuration for this example
new SimpleBugReporter({
apiEndpoint: '../backend/php/bugs.php',
position: 'bottom-right',
theme: 'auto',
language: 'en',
company: 'Simple Bug Reporter Demo',
// Features
allowScreenshots: true,
allowSystemInfo: true,
autoSave: true,
// Customization
categories: ['bug', 'feature', 'ui', 'performance', 'other'],
maxScreenshots: 5,
// Colors
colors: {
primary: '#667eea',
secondary: '#764ba2',
success: '#48bb78',
warning: '#ed8936',
error: '#f56565'
},
// Callbacks
onSubmit: (data) => {
console.log('Bug submitted:', data);
alert('Thanks for your feedback!');
},
onError: (error) => {
console.error('Bug reporter error:', error);
}
});
π§ Quick Integration Examples
Basic Integration
<script src="simple-bug-reporter.js"></script>
<link rel="stylesheet" href="simple-bug-reporter.css">
<script>
new SimpleBugReporter({
apiEndpoint: '/api/bugs.php'
});
</script>
CDN Integration
<script src="https://cdn.jsdelivr.net/npm/simple-bug-reporter@1.0.0/dist/simple-bug-reporter.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-bug-reporter@1.0.0/dist/simple-bug-reporter.min.css">
<script>
new SimpleBugReporter({ apiEndpoint: '/api/bugs.php' });
</script>
Auto-Initialize with Data Attributes
<script
src="simple-bug-reporter.js"
data-sbr-auto-init="true"
data-sbr-apiendpoint="/api/bugs.php"
data-sbr-theme="dark"
data-sbr-position="bottom-left">
</script>