BugDrop

O que é BugDrop?

BugDrop é um widget de feedback gratuito e open source para sites que coleta problemas reportados por usuários diretamente do seu site e os transforma automaticamente em GitHub Issues. Ele fornece um botão flutuante “Bug” que permite aos usuários capturar screenshots, anotar o que está errado e enviar contexto para depuração.

O widget se integra a um repositório GitHub por meio de um GitHub App e tag de script. Quando alguém envia feedback, o BugDrop cria um GitHub issue totalmente formatado que inclui os screenshots do usuário e informações do sistema.

Principais Recursos

• Botão de feedback flutuante no seu site: facilita para os visitantes reportarem problemas sem sair da página.
• Captura de screenshot (página inteira ou elemento específico): ajuda a preservar evidências visuais para bugs e problemas de UI.
• Ferramentas de anotação (desenhar, setas, retângulos): permite que os remetentes destaquem exatamente onde o problema ocorre.
• Categorias de feedback com labels GitHub automáticos (Bug, Feature, Question): organiza envios para aparecerem no GitHub com tags consistentes.
• Captura automática de informações do sistema: registra navegador, SO, viewport e outros detalhes para auxiliar no triage.
• UI do widget estilizável via atributos data: personalize fontes, cores, bordas, sombras, raio e outras configurações de apresentação para combinar com seu sistema de design.
• Tratamento priorizando privacidade: sem rastreamento, sem cookies e URLs são redigidas.

Como Usar o BugDrop

1. Instale o GitHub App do GitHub Marketplace para o seu repositório (a fonte lista “bugdrop-in-app-feedback-to-github-issues”).
2. Adicione o script do widget ao seu site e defina o atributo data-repo para o seu owner/repo.
   • Exemplo:

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

3. Verifique se o widget aparece e os usuários podem enviar feedback.
4. (Opcional) Configure estilo e comportamento do widget usando os atributos data-* documentados (tema, posição, texto/rotulo do botão, cores, bordas, sombras e mais).

Casos de Uso

• Coletar relatórios visuais de bugs para problemas de UI web: usuários podem capturar screenshots de página inteira ou direcionados e anotar a área exata que parece errada.
• Triar feedback de múltiplos tipos de envios: categorize relatórios recebidos como Bug, Feature ou Question para chegarem no GitHub com labels correspondentes.
• Depurar problemas de ambiente do usuário: inclua navegador/SO/viewport e informações relacionadas do sistema em todo GitHub issue para acelerar tentativas de reprodução.
• Combinar o widget ao design do seu produto: aplique temas e tokens de estilo diferentes (fontes, cores, raio de borda, estilos de sombra) usando atributos data.
• Reduzir fricção em comparação à criação manual de issues: visitantes enviam feedback da página, e o BugDrop cria o GitHub issue correspondente com screenshots.

FAQ

O BugDrop cria GitHub issues automaticamente?

Sim. O widget envia feedback para o seu repositório GitHub como um GitHub issue formatado que inclui screenshots e informações do sistema.

Quais informações o BugDrop inclui com um envio?

O BugDrop captura screenshots (página inteira ou elemento específico), anotações e informações do sistema como navegador e SO, além de detalhes de viewport.

Posso personalizar a aparência e posição do widget?

Sim. O widget suporta personalização via atributos data-*, incluindo tema (light/dark/auto), posição (bottom-right/bottom-left) e opções de estilo como fontes, cores, bordas, raio e sombra.

Há rastreamento ou cookies envolvidos?

O BugDrop é descrito como priorizando privacidade: não usa rastreamento nem cookies, e redige URLs.

Como conecto o widget ao meu repositório?

Você instala o GitHub App para o seu repositório e adiciona a tag de script ao seu site com o atributo data-repo="owner/repo".

Alternativas

• Outro widget de feedback para sites que cria tickets/issues: fluxo de trabalho similar (coletar feedback de uma página), mas pode usar um rastreador de issues diferente ou aceitar formatos de envio diferentes.
• Ferramentas gerais de relatório de bugs que dependem de screenshots manuais e formulários: em vez de capturar screenshots e criar GitHub issues automaticamente, geralmente exigem que usuários preencham um formulário e/ou anexam arquivos.
• Fluxos nativos do GitHub para intake de issues (ex.: templates de issue ou formulários de issue): mantêm tudo dentro do GitHub, mas deslocam o passo de relatório para fora de um widget embutido na página.
• Widgets de ticketing de suporte ao cliente: fornecem feedback embutido no site, mas frequentemente roteiam envios para uma inbox de suporte em vez de GitHub Issues.