BugDrop

Cos'è BugDrop?

BugDrop è un widget di feedback web gratuito e open source che raccoglie i problemi segnalati dagli utenti direttamente dal tuo sito e li trasforma automaticamente in Issue GitHub. Fornisce un pulsante flottante “Bug” che permette agli utenti di catturare screenshot, annotare cosa non va e inviare contesto per il debug.

Il widget si integra con un repository GitHub tramite una GitHub App e un tag script. Quando qualcuno invia feedback, BugDrop crea un'issue GitHub completamente formattata che include gli screenshot dell'utente e le informazioni di sistema.

Caratteristiche Principali

• Pulsante di feedback flottante sul tuo sito: rende facile per i visitatori segnalare problemi senza navigare via dalla pagina.
• Cattura screenshot (pagina intera o specifica per elemento): aiuta a preservare le prove visive per bug e problemi UI.
• Strumenti di annotazione (disegna, frecce, rettangoli): permette ai mittenti di evidenziare esattamente dove si verifica il problema.
• Categorie di feedback con etichette GitHub automatiche (Bug, Feature, Question): organizza le submission in modo che appaiano in GitHub con tagging coerente.
• Cattura automatica info di sistema: registra browser, OS, viewport e altri dettagli per supportare il triage.
• UI del widget personalizzabile via attributi data: personalizza font, colori, bordi, ombre, raggio e altre impostazioni di presentazione per adattarsi al tuo design system.
• Gestione privacy-first: nessun tracking, nessun cookie, e gli URL sono anonimizzati.

Come Usare BugDrop

1. Installa la GitHub App dal GitHub Marketplace per il tuo repository (la sorgente elenca “bugdrop-in-app-feedback-to-github-issues”).
2. Aggiungi lo script del widget al tuo sito e imposta l'attributo data-repo al tuo owner/repo.
   • Esempio:

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

3. Verifica che il widget appaia e che gli utenti possano inviare feedback.
4. (Opzionale) Configura stile e comportamento del widget usando gli attributi data-* documentati (theme, position, button text/label, colori, bordi, ombre e altro).

Casi d'Uso

• Raccogli report visivi di bug per problemi UI web: gli utenti possono catturare screenshot a pagina intera o mirati e annotare l'area esatta che appare sbagliata.
• Triage feedback per vari tipi di submission: categorizza i report in arrivo come Bug, Feature o Question in modo che arrivino in GitHub con etichette corrispondenti.
• Debug problemi di ambiente utente: includi browser/OS/viewport e info di sistema correlate in ogni issue GitHub per accelerare i tentativi di riproduzione.
• Adatta il widget al design del tuo prodotto: applica temi e token di stile diversi (font, colori, raggio bordi, stili ombre) usando attributi data.
• Riduci frizioni rispetto alla creazione manuale di issue: i visitatori inviano feedback dalla pagina, e BugDrop crea l'issue GitHub corrispondente con screenshot.

FAQ

BugDrop crea Issue GitHub automaticamente?

Sì. Il widget invia il feedback al tuo repository GitHub come un'issue GitHub formattata che include screenshot e informazioni di sistema.

Quali informazioni include BugDrop con una submission?

BugDrop cattura screenshot (pagina intera o specifica per elemento), annotazioni e info di sistema come browser e OS, più dettagli viewport.

Posso personalizzare l'aspetto e la posizione del widget?

Sì. Il widget supporta personalizzazione via attributi data-*, inclusi theme (light/dark/auto), position (bottom-right/bottom-left) e opzioni di stile come font, colori, bordi, raggio e ombre.

È coinvolto tracking o cookie?

BugDrop è descritto come privacy-first: non usa tracking né cookie, e anonimizza gli URL.

Come collego il widget al mio repository?

Installi la GitHub App per il tuo repository e aggiungi il tag script al tuo sito con l'attributo data-repo="owner/repo".

Alternative

• Un altro widget di feedback web che crea ticket/issue: workflow simile (raccoglie feedback da una pagina), ma potrebbe usare un tracker di issue diverso o accettare formati di submission differenti.
• Strumenti generali di report bug che si basano su screenshot manuali e form: invece di catturare screenshot e creare issue GitHub automaticamente, tipicamente richiedono agli utenti di compilare un form e/o allegare file.
• Workflow nativi GitHub per intake issue (es. template issue o issue forms): mantengono tutto dentro GitHub ma spostano il passo di reporting via da un widget embeddato nella pagina.
• Widget di ticketing supporto clienti: forniscono feedback embeddato nel sito, ma spesso instradano le submission a una inbox di supporto anziché a Issue GitHub.