BugDrop

Qu'est-ce que BugDrop ?

BugDrop est un widget gratuit open source pour recueillir les retours sur site web qui collecte les problèmes signalés par les utilisateurs directement depuis votre site et les transforme automatiquement en GitHub Issues. Il fournit un bouton flottant « Bug » qui permet aux utilisateurs de capturer des captures d'écran, d'annoter ce qui ne va pas et de soumettre un contexte pour le débogage.

Le widget s'intègre à un dépôt GitHub via une GitHub App et une balise script. Quand quelqu'un soumet un retour, BugDrop crée un GitHub issue entièrement formaté qui inclut les captures d'écran de l'utilisateur et les informations système.

Fonctionnalités principales

• Bouton de retour flottant sur votre site : facilite le signalement de problèmes par les visiteurs sans quitter la page.
• Capture de captures d'écran (page complète ou élément spécifique) : aide à conserver les preuves visuelles pour les bugs et problèmes d'UI.
• Outils d'annotation (dessin, flèches, rectangles) : permet aux soumissionnaires de mettre en évidence l'endroit exact du problème.
• Catégories de retours avec étiquettes GitHub automatiques (Bug, Feature, Question) : organise les soumissions pour qu'elles apparaissent dans GitHub avec un balisage cohérent.
• Capture automatique des infos système : enregistre le navigateur, l'OS, la viewport et d'autres détails pour faciliter le triage.
• Interface widget personnalisable via attributs data : adaptez polices, couleurs, bordures, ombres, rayon et autres paramètres de présentation à votre système de design.
• Gestion priorisant la confidentialité : pas de suivi, pas de cookies, et les URL sont masquées.

Comment utiliser BugDrop

1. Installez la GitHub App depuis le GitHub Marketplace pour votre dépôt (la source liste « bugdrop-in-app-feedback-to-github-issues »).
2. Ajoutez le script du widget à votre site et définissez l'attribut data-repo sur votre owner/repo.
   • Exemple :

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

3. Vérifiez que le widget apparaît et que les utilisateurs peuvent soumettre des retours.
4. (Optionnel) Configurez le style et le comportement du widget via les attributs data-* documentés (thème, position, texte/libellé du bouton, couleurs, bordures, ombres, etc.).

Cas d'usage

• Recueillir des rapports de bugs visuels pour les problèmes d'UI web : les utilisateurs capturent des captures d'écran pleine page ou ciblées et annotent la zone exacte défectueuse.
• Trier les retours de types multiples : catégorisez les rapports entrants en Bug, Feature ou Question pour qu'ils arrivent dans GitHub avec les étiquettes correspondantes.
• Déboguer les problèmes d'environnement utilisateur : incluez navigateur/OS/viewport et infos système associées dans chaque GitHub issue pour accélérer les tentatives de reproduction.
• Adapter le widget à votre design produit : appliquez thèmes et tokens de style différents (polices, couleurs, rayon de bordure, styles d'ombre) via attributs data.
• Réduire les frictions par rapport à la création manuelle d'issues : les visiteurs soumettent des retours depuis la page, et BugDrop crée le GitHub issue correspondant avec captures d'écran.

FAQ

BugDrop crée-t-il automatiquement des GitHub issues ?

Oui. Le widget envoie les retours à votre dépôt GitHub sous forme de GitHub issue formaté incluant captures d'écran et informations système.

Quelles informations BugDrop inclut-il avec une soumission ?

BugDrop capture des captures d'écran (page complète ou élément spécifique), annotations et infos système comme le navigateur et l'OS, plus détails de viewport.

Puis-je personnaliser l'apparence et le positionnement du widget ?

Oui. Le widget supporte la personnalisation via attributs data-*, incluant thème (light/dark/auto), position (bottom-right/bottom-left) et options de style comme polices, couleurs, bordures, rayon et ombre.

Y a-t-il du suivi ou des cookies impliqués ?

BugDrop est conçu priorisant la confidentialité : pas de suivi, pas de cookies, et les URL sont masquées.

Comment connecter le widget à mon dépôt ?

Vous installez la GitHub App pour votre dépôt et ajoutez la balise script à votre site avec l'attribut data-repo="owner/repo".

Alternatives

• Un autre widget de retours sur site web qui crée des tickets/issues : flux de travail similaire (recueillir retours depuis une page), mais peut utiliser un tracker d'issues différent ou accepter des formats de soumission variés.
• Outils généraux de rapport de bugs reposant sur captures d'écran manuelles et formulaires : au lieu de capturer captures d'écran et créer des GitHub issues automatiquement, ils requièrent généralement un formulaire et/ou pièces jointes.
• Flux de réception d'issues natifs GitHub (ex. templates d'issues ou formulaires d'issues) : gardent tout dans GitHub mais déportent l'étape de rapport hors du widget intégré à la page.
• Widgets de ticketing support client : fournissent retours intégrés au site web, mais routent souvent les soumissions vers une boîte de support plutôt que GitHub Issues.