Introducción
Una capa de comentarios lista para usar en aplicaciones web — haz clic donde sea para dejar un comentario anclado a ese elemento, con una captura de pantalla y el entorno registrados por ti.
HellDots pone una capa de comentarios sobre tu aplicación. Alguien de tu equipo hace clic en un botón, en un encabezado, en una tarjeta rota — donde sea —, escribe qué está mal con eso, y el comentario queda anclado a ese elemento. Lo que recibes de vuelta no es una frase en un hilo de chat; es un registro que ya responde las preguntas que habrías tenido que hacer.
npm install helldotsimport { createCommentOverlay } from 'helldots';
createCommentOverlay({
user: { name: 'Ana' },
persistence: 'localStorage',
});Dos líneas y aparece una barra de herramientas al pie de la página. Alt+C activa el modo comentario; haz clic para colocar un comentario, o arrastra para seleccionar una región y adjuntar un recorte de ella.
Lo estás viendo
Este sitio de documentación usa HellDots sobre sí mismo. La barra al pie de esta página es real — deja un comentario en cualquier punto de esta documentación y seguirá aquí cuando vuelvas. Mira el Playground.
Qué lleva un comentario
Un comentario nunca es solo su texto. Cada uno registra:
Una captura de pantalla
La página tal como la vio quien comenta — JPEG a media escala, con la propia interfaz del widget excluida. Si arrastras una región, además obtienes un recorte PNG a resolución completa de exactamente lo que seleccionaste.
El entorno
URL, viewport, resolución de pantalla, densidad de píxeles, navegador, sistema operativo e idioma. Un bug reportado a 390×844 en iOS Safari lo dice solo, sin que nadie tenga que preguntarlo.
Dónde estaba
Un selector CSS, una ruta del DOM y una huella estructural del elemento — lo suficiente para volver a encontrarlo después de que la página cambie.
Quién y cuándo
La identidad que declaró tu aplicación, más un registro de auditoría de solo anexado con cada edición, cambio de estado y reclasificación.
Comentarios que sobreviven a la página
El problema interesante en una capa como esta no es dibujar un punto. Es que la página debajo del punto no deja de cambiar.
HellDots guarda tres cosas por ancla — un selector único en la medida de lo
posible, el selector del elemento exacto donde se hizo clic, y una huella del
elemento (etiqueta, un fragmento de su texto, sus atributos estables, su
posición entre hermanos). En la siguiente carga resuelve el comentario contra el
nuevo DOM. Si el elemento se movió o se reconstruyó, el comentario se vuelve a
anclar a él. Si de verdad desapareció, el comentario se marca como orphaned y
se muestra en la bandeja en lugar de descartarse en silencio.
Los tres estados en los que puede estar un ancla:
| Estado | Significado |
|---|---|
anchored | El elemento se encontró en esta página; el marcador está sobre él |
orphaned | Esta es la página del comentario, pero su elemento ya no existe |
inactive | El comentario pertenece a una página distinta de la que estás viendo |
Tus datos siguen siendo tuyos
No se envía nada a ninguna parte. No hay backend de HellDots, ni cuenta, ni telemetría. Eliges una de dos formas de conservar los comentarios:
Pon persistence: "localStorage" y el widget guarda y restaura todo por sí
mismo, en el navegador de quien visita. Lo adecuado para un entorno de staging,
una demo o una ronda de revisión en solitario.
createCommentOverlay({ persistence: 'localStorage' });