BugDrop

Was ist BugDrop?

BugDrop ist ein kostenloses, quelloffenes Feedback-Widget für Websites, das nutzerberichtete Probleme direkt von Ihrer Site erfasst und automatisch in GitHub Issues umwandelt. Es stellt einen schwebenden „Bug“-Button bereit, mit dem Nutzer Screenshots aufnehmen, Probleme annotieren und Kontext für das Debugging übermitteln können.

Das Widget integriert sich über eine GitHub App und ein Script-Tag in ein GitHub-Repository. Bei eingereichtem Feedback erstellt BugDrop ein vollständig formatiertes GitHub Issue mit den Screenshots des Nutzers und Systeminformationen.

Wichtige Funktionen

• Schwebender Feedback-Button auf Ihrer Site: erleichtert Besuchern das Melden von Problemen, ohne die Seite zu verlassen.
• Screenshot-Aufnahme (volle Seite oder elementenspezifisch): erhält visuelle Belege für Bugs und UI-Probleme.
• Annotationstools (Zeichnen, Pfeile, Rechtecke): ermöglicht Submittern, genau den Problemort hervorzuheben.
• Feedback-Kategorien mit automatischen GitHub-Labels (Bug, Feature, Question): organisiert Einreichungen mit einheitlicher Tagging in GitHub.
• Automatische Erfassung von Systeminfos: protokolliert Browser, Betriebssystem, Viewport und weitere Details für die Triage.
• Anpassbare Widget-Oberfläche via Data-Attributen: passen Sie Schriftarten, Farben, Rahmen, Schatten, Radius und weitere Darstellungseinstellungen an Ihr Designsystem an.
• Datenschutzorientierte Handhabung: keine Tracking, keine Cookies, URLs werden geschwärzt.

So verwenden Sie BugDrop

1. Installieren Sie die GitHub App aus dem GitHub Marketplace für Ihr Repository (die Quelle nennt „bugdrop-in-app-feedback-to-github-issues“).
2. Fügen Sie das Widget-Script zu Ihrer Site hinzu und setzen Sie das data-repo-Attribut auf Ihr owner/repo.
   • Beispiel:

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

3. Überprüfen Sie, ob das Widget erscheint und Nutzer Feedback einreichen können.
4. (Optional) Konfigurieren Sie Styling und Widget-Verhalten mit den dokumentierten data-*-Attributen (Theme, Position, Button-Text/Label, Farben, Rahmen, Schatten usw.).

Anwendungsfälle

• Visuelle Bug-Meldungen für Web-UI-Probleme sammeln: Nutzer nehmen Vollseiten- oder gezielte Screenshots auf und annotieren den genauen fehlerhaften Bereich.
• Feedback für verschiedene Einreichungstypen triagieren: Kategorisieren Sie eingehende Berichte als Bug, Feature oder Question, damit sie mit passenden Labels in GitHub ankommen.
• Nutzerumgebungsprobleme debuggen: Schließen Sie Browser/Betriebssystem/Viewport und verwandte Systeminfos in jedes GitHub Issue ein, um Reproduktionsversuche zu beschleunigen.
• Widget an Ihr Produkt-Design anpassen: Wenden Sie Themes und Styling-Token (Schriftarten, Farben, Border-Radius, Schattenstile) via Data-Attribute an.
• Reibung bei manueller Issue-Erstellung reduzieren: Besucher reichen Feedback direkt von der Seite ein, BugDrop erstellt das passende GitHub Issue mit Screenshots.

FAQ

Erstellt BugDrop GitHub Issues automatisch?

Ja. Das Widget sendet Feedback als formatiertes GitHub Issue an Ihr Repository, inklusive Screenshots und Systeminformationen.

Welche Informationen enthält BugDrop bei einer Einreichung?

BugDrop erfasst Screenshots (volle Seite oder elementenspezifisch), Annotationen und Systeminfos wie Browser und Betriebssystem sowie Viewport-Details.

Kann ich das Aussehen und die Position des Widgets anpassen?

Ja. Das Widget unterstützt Anpassungen via data-*-Attribute, einschließlich Theme (light/dark/auto), Position (bottom-right/bottom-left) und Styling-Optionen wie Schriftarten, Farben, Rahmen, Radius und Schatten.

Gibt es Tracking oder Cookies?

BugDrop ist datenschutzorientiert: Es verwendet kein Tracking und keine Cookies, und URLs werden geschwärzt.

Wie verbinde ich das Widget mit meinem Repository?

Sie installieren die GitHub App für Ihr Repository und fügen das Script-Tag mit dem Attribut data-repo="owner/repo" zu Ihrer Site hinzu.

Alternativen

• Ein weiteres Website-Feedback-Widget, das Tickets/Issues erstellt: ähnlicher Workflow (Feedback von einer Seite sammeln), aber möglicherweise mit anderem Issue-Tracker oder anderen Einreichungsformaten.
• Allgemeine Bug-Reporting-Tools mit manuellen Screenshots und Formularen: Statt automatischer Screenshot-Aufnahme und GitHub-Issue-Erstellung verlangen diese typischerweise ausgefüllte Formulare und/oder Dateianhänge.
• GitHub-native Issue-Intake-Workflows (z. B. Issue-Templates oder Issue-Forms): Bleiben innerhalb von GitHub, verlagern aber den Melde-Schritt weg von einem seitenintegrierten Widget.
• Customer-Support-Ticketing-Widgets: Bieten seitenintegriertes Feedback, leiten Einreichungen aber oft an einen Support-Inbox statt an GitHub Issues weiter.