Feedback

El componente Feedback es un widget interactivo que permite a los usuarios enviar comentarios, reportar problemas o sugerir mejoras directamente desde tu aplicación. Incluye funcionalidad de captura de pantalla y personalización de estilos.

Características

• Múltiples tipos de comentarios (sugerencias y reportes de errores)
• Captura de pantalla integrada
• Apariencia y posición personalizables
• Diseño responsivo
• Fácil integración
• Huella digital del usuario para seguimiento

Instalación

npm install @fingerprintjs/fingerprintjs html2canvas

import { Feedback } from './ruta-al/feedback';

Uso Básico

// Inicialización con configuración por defecto
const feedback = new Feedback({
  tracker: tuInstanciaTracker,
  position: 'bottom-right',
  themeColor: '#4f46e5',
  buttonText: 'Comentarios',
  autoOpen: false
});

Opciones de Configuración

Opción	Tipo	Predeterminado	Descripción
tracker	SystemTracker	Requerido	Instancia del tracker para análisis
position	`'bottom-right'	'bottom-left'	'bottom-center'`
themeColor	string	'#4f46e5'	Color principal del widget
buttonText	string	'Comentarios'	Texto del botón de comentarios
autoOpen	boolean	false	Si se debe abrir automáticamente el formulario de comentarios

Métodos

toggleFeedbackWindow()

Alterna la visibilidad del formulario de comentarios.

feedback.toggleFeedbackWindow();

Ejemplos

Implementación Básica

const feedback = new Feedback({
  tracker: tuInstanciaTracker,
  themeColor: '#3b82f6',
  buttonText: 'Enviar Comentario'
});

Con Posición Personalizada

const feedback = new Feedback({
  tracker: tuInstanciaTracker,
  position: 'bottom-left',
  themeColor: '#10b981',
  autoOpen: true
});

Datos Recolectados

Cuando un usuario envía comentarios, se envían los siguientes datos al servidor:

• Tipo de comentario (sugerencia/error)
• Descripción del usuario
• URL actual
• ID del negocio
• Huella digital del usuario (encriptada)
• ID de usuario (si está disponible)
• Captura de pantalla opcional

Estilos

El componente incluye estilos predeterminados pero puede personalizarse usando las siguientes clases CSS:

• .pt-btn - Botón de comentarios
• .pt-window - Ventana principal de comentarios
• .pt-header - Sección de encabezado
• .pt-body - Área de contenido principal
• .pt-options - Selección de tipo de comentario
• .pt-primary - Botones de acción primarios
• .pt-secondary - Botones de acción secundarios
• .pt-badge - Insignia del tipo de comentario seleccionado

Navegadores Compatibles

• Chrome (última versión)
• Firefox (última versión)
• Safari (última versión)
• Edge (última versión)

Manejo de Errores

El componente incluye manejo básico de errores para:

• Instancia de tracker faltante
• Envíos de comentarios vacíos
• Fallos en la captura de pantalla

Seguridad

• Los datos del usuario se envían mediante HTTPS
• Se utiliza huella digital para identificación anónima de usuarios
• No se recopilan datos sensibles sin el consentimiento del usuario

Personalización

Puedes personalizar la apariencia sobrescribiendo los estilos predeterminados. El componente utiliza las siguientes variables CSS:

:root {
  --pt-primary: #4f46e5; /* Color principal del tema */
  --pt-text: #333;       /* Color del texto */
  --pt-border: #eee;     /* Color del borde */
  --pt-radius: 8px;      /* Radio del borde */
}