BugDrop

What is BugDrop?

BugDrop is a free, open source website feedback widget that collects user-reported issues directly from your site and turns them into GitHub Issues automatically. It provides a floating “Bug” button that lets users capture screenshots, annotate what’s wrong, and submit context for debugging.

The widget integrates with a GitHub repository through a GitHub App and script tag. When someone submits feedback, BugDrop creates a fully formatted GitHub issue that includes the user’s screenshots and system information.

Key Features

• Floating feedback button on your site: makes it easy for visitors to report problems without navigating away from the page.
• Screenshot capture (full page or element-specific): helps preserve visual evidence for bugs and UI issues.
• Annotation tools (draw, arrows, rectangles): lets submitters highlight exactly where the problem occurs.
• Feedback categories with automatic GitHub labels (Bug, Feature, Question): organizes submissions so they appear in GitHub with consistent tagging.
• Automatic system info capture: records browser, OS, viewport, and other details to support triage.
• Stylable widget UI via data attributes: customize fonts, colors, borders, shadows, radius, and other presentation settings to match your design system.
• Privacy-first handling: no tracking, no cookies, and URLs are redacted.

How to Use BugDrop

1. Install the GitHub App from GitHub Marketplace for your repository (the source lists “bugdrop-in-app-feedback-to-github-issues”).
2. Add the widget script to your site and set the data-repo attribute to your owner/repo.
   • Example:

     <script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>
     

3. Verify the widget appears and users can submit feedback.
4. (Optional) Configure styling and widget behavior using the documented data-* attributes (theme, position, button text/label, colors, borders, shadows, and more).

Use Cases

• Collect visual bug reports for web UI issues: users can capture full-page or targeted screenshots and annotate the exact area that looks wrong.
• Triage feedback for multiple types of submissions: categorize incoming reports as Bug, Feature, or Question so they arrive in GitHub with matching labels.
• Debug user-environment problems: include browser/OS/viewport and related system info in every GitHub issue to speed up reproduction attempts.
• Match the widget to your product design: apply different themes and styling tokens (fonts, colors, border radius, shadow styles) using data attributes.
• Reduce friction compared to manual issue creation: visitors submit feedback from the page, and BugDrop creates the corresponding GitHub issue with screenshots.

FAQ

Does BugDrop create GitHub issues automatically?

Yes. The widget sends feedback to your GitHub repository as a formatted GitHub issue that includes screenshots and system information.

What information does BugDrop include with a submission?

BugDrop captures screenshots (full page or element-specific), annotations, and system info such as browser and OS, plus viewport details.

Can I customize the widget’s look and placement?

Yes. The widget supports customization via data-* attributes, including theme (light/dark/auto), position (bottom-right/bottom-left), and styling options like fonts, colors, borders, radius, and shadow.

Is any tracking or cookies involved?

BugDrop is described as privacy-first: it uses no tracking and no cookies, and it redacts URLs.

How do I connect the widget to my repository?

You install the GitHub App for your repository and add the script tag to your site with the data-repo="owner/repo" attribute.

Alternatives

• Another website feedback widget that creates tickets/issues: similar workflow (collect feedback from a page), but may use a different issue tracker or accept different submission formats.
• General bug reporting tools that rely on manual screenshots and forms: instead of capturing screenshots and creating GitHub issues automatically, these typically require users to fill out a form and/or attach files.
• GitHub-native issue intake workflows (e.g., issue templates or issue forms): these keep everything inside GitHub but shift the reporting step away from a page-embedded widget.
• Customer support ticketing widgets: provide website-embedded feedback, but often route submissions to a support inbox rather than GitHub Issues.