In-app feedback → GitHub Issues. Screenshots, annotations, the works.
Featured on Product Hunt and ranked #6 Product of the Day on May 9, 2026.
Works with both public and private repositories!
1. Install the GitHub App on your repository:
https://github.com/marketplace/bugdrop-in-app-feedback-to-github-issues
2. Add the script to your website:
<script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>That's it! Users can now click the bug button to submit feedback as GitHub Issues.
Important: Do not add
asyncordeferto the script tag — the widget needs synchronous loading to read its configuration.
CSP note: If your site uses a Content Security Policy, add
https://bugdrop.neonwatty.workers.devto yourscript-srcdirective to enable the widget.
Branch protection: BugDrop works with repos that have branch protection rules (required PRs, merge queues). Screenshots are stored on a dedicated
bugdrop-screenshotsbranch that is auto-created on first use — no manual setup needed.
Security note: BugDrop is not a spam or malware filtering service. Treat feedback and screenshots as unauthenticated user-generated content. Exclude
bugdrop-screenshotsfrom CI/deploy workflows, and self-host behind your own WAF/CAPTCHA/content controls for stricter environments.
- 🔒 Privacy masking — tag sensitive elements with
data-bugdrop-maskand BugDrop visually covers them in supported screenshot modes before submission. Passwords and credit-card inputs are masked automatically.
| Attribute | Values | Default |
|---|---|---|
data-repo |
owner/repo |
required |
data-theme |
light, dark, auto |
auto |
data-locale |
de, en, nl, pl (region subtags accepted) |
<html lang> or en |
data-position |
bottom-right, bottom-left |
bottom-right |
data-color |
Accent color for buttons/highlights (e.g. #FF6B35) |
#14b8a6 (teal) |
data-label |
Any string | localized label |
data-category-labels |
JSON mapping for self-hosted category labels | built-in labels |
data-button |
true, false |
true |
data-send-console-logs |
true, false |
false |
data-element-context-max-area |
Viewport-area multiplier for Select Element context | 0 |
See full documentation for all options including styling, submitter info, and dismissible button.
Build the widget and start the local server:
npm run build:widget && npm run devThen open the live site, open the browser console, and paste the script below. Change the
script.dataset.repo value if the site should use a different repository.
(() => {
const localBase = 'http://127.0.0.1:8787';
// Local development normally has no GitHub App credentials, so allow the
// widget to open while leaving every other request unchanged.
window.__bugdropRealFetch ??= window.fetch.bind(window);
window.fetch = (input, options) => {
if (String(input).startsWith(`${localBase}/api/check/`)) {
return Promise.resolve(
new Response(JSON.stringify({ installed: true }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
})
);
}
return window.__bugdropRealFetch(input, options);
};
document.querySelector('#bugdrop-host')?.remove();
delete window.BugDrop;
document
.querySelectorAll('script[data-bugdrop-local-test="true"]')
.forEach(script => script.remove());
const script = document.createElement('script');
script.src = `${localBase}/widget.js`;
script.dataset.repo = 'owner/repo';
script.dataset.welcome = 'never';
script.dataset.theme = 'light';
script.dataset.bugdropLocalTest = 'true';
script.onload = () => window.BugDrop?.open();
document.body.appendChild(script);
})();This is intended for testing the widget and screenshot flow only. Submitting feedback still
requires valid GitHub App credentials on the local server. If Chrome asks whether the page may
access devices or services on the local network, allow it so the page can load widget.js. Reload
the live page after testing to restore its original widget and fetch implementation.
- Full Documentation
- Built with BugDrop Showcase
- GitHub Marketplace
- Configuration
- Styling
- JavaScript API
- Version Pinning
- CI Testing
- Security & Rate Limiting
- Self-Hosting
- FAQ
User clicks bug button → Widget captures screenshot → Worker authenticates via GitHub App → Issue created in your repo
- Widget loads in a Shadow DOM (isolated from your page styles)
- Screenshot captured client-side using html-to-image
- Worker (Cloudflare) exchanges GitHub App credentials for an installation token
- GitHub API creates the issue with the screenshot stored in
.bugdrop/on a dedicatedbugdrop-screenshotsbranch (auto-created on first use)
Try it on WienerMatch — click the bug button in the bottom right corner.
MIT