BugDrop

¿Qué es BugDrop?

BugDrop es un widget de feedback web gratuito y de código abierto que recopila problemas reportados por usuarios directamente desde tu sitio y los convierte automáticamente en GitHub Issues. Proporciona un botón flotante “Bug” que permite a los usuarios capturar capturas de pantalla, anotar qué está mal y enviar contexto para depuración.

El widget se integra con un repositorio de GitHub mediante una GitHub App y una etiqueta script. Cuando alguien envía feedback, BugDrop crea un GitHub issue completamente formateado que incluye las capturas de pantalla del usuario e información del sistema.

Características principales

• Botón de feedback flotante en tu sitio: facilita a los visitantes reportar problemas sin salir de la página.
• Captura de capturas de pantalla (página completa o específica de un elemento): ayuda a preservar evidencia visual de bugs y problemas de UI.
• Herramientas de anotación (dibujar, flechas, rectángulos): permite a los remitentes resaltar exactamente dónde ocurre el problema.
• Categorías de feedback con etiquetas automáticas de GitHub (Bug, Feature, Question): organiza las envíos para que aparezcan en GitHub con etiquetado consistente.
• Captura automática de información del sistema: registra navegador, SO, viewport y otros detalles para apoyar el triage.
• UI del widget personalizable vía atributos data: ajusta fuentes, colores, bordes, sombras, radio y otros ajustes de presentación para que coincidan con tu sistema de diseño.
• Manejo priorizando la privacidad: sin seguimiento, sin cookies y las URLs se redactan.

Cómo usar BugDrop

1. Instala la GitHub App desde GitHub Marketplace para tu repositorio (la fuente lista “bugdrop-in-app-feedback-to-github-issues”).
2. Añade el script del widget a tu sitio y configura el atributo data-repo con tu owner/repo.
   • Ejemplo:

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

3. Verifica que el widget aparezca y los usuarios puedan enviar feedback.
4. (Opcional) Configura el estilo y comportamiento del widget usando los atributos data-* documentados (tema, posición, texto/etiqueta del botón, colores, bordes, sombras y más).

Casos de uso

• Recopila reportes visuales de bugs para problemas de UI web: los usuarios pueden capturar capturas de página completa o dirigidas y anotar el área exacta que se ve mal.
• Clasifica feedback de múltiples tipos de envíos: categoriza reportes entrantes como Bug, Feature o Question para que lleguen a GitHub con etiquetas coincidentes.
• Depura problemas de entorno de usuario: incluye navegador/SO/viewport e información del sistema relacionada en cada GitHub issue para acelerar intentos de reproducción.
• Adapta el widget a tu diseño de producto: aplica temas y tokens de estilo diferentes (fuentes, colores, radio de borde, estilos de sombra) usando atributos data.
• Reduce fricción comparado con creación manual de issues: los visitantes envían feedback desde la página, y BugDrop crea el GitHub issue correspondiente con capturas.

Preguntas frecuentes

¿BugDrop crea GitHub issues automáticamente?

Sí. El widget envía el feedback a tu repositorio de GitHub como un GitHub issue formateado que incluye capturas de pantalla e información del sistema.

¿Qué información incluye BugDrop con un envío?

BugDrop captura capturas de pantalla (página completa o específica de un elemento), anotaciones e información del sistema como navegador y SO, más detalles de viewport.

¿Puedo personalizar la apariencia y posición del widget?

Sí. El widget soporta personalización vía atributos data-*, incluyendo tema (light/dark/auto), posición (bottom-right/bottom-left) y opciones de estilo como fuentes, colores, bordes, radio y sombra.

¿Involucra algún seguimiento o cookies?

BugDrop se describe como priorizando la privacidad: no usa seguimiento ni cookies, y redacta las URLs.

¿Cómo conecto el widget a mi repositorio?

Instalas la GitHub App para tu repositorio y añades la etiqueta script a tu sitio con el atributo data-repo="owner/repo".

Alternativas

• Otro widget de feedback web que crea tickets/issues: flujo de trabajo similar (recopila feedback desde una página), pero puede usar un rastreador de issues diferente o aceptar formatos de envío distintos.
• Herramientas generales de reporte de bugs que dependen de capturas manuales y formularios: en lugar de capturar capturas y crear GitHub issues automáticamente, suelen requerir que los usuarios completen un formulario y/o adjunten archivos.
• Flujos de ingesta de issues nativos de GitHub (p. ej., plantillas de issues o formularios de issues): mantienen todo dentro de GitHub pero desplazan el paso de reporte fuera de un widget embebido en la página.
• Widgets de ticketing de soporte al cliente: proporcionan feedback embebido en el sitio web, pero a menudo enrutan los envíos a un inbox de soporte en lugar de GitHub Issues.