v2

Feedback Widget

Un pixel que integras en cualquier app. Tu equipo marca elementos, adjunta capturas y envía el reporte — sin instalar nada.

1 · Instalación

Pega este <script> antes de </body> en tu app:

<script
  src="https://overlay-comentarios.vercel.app/widget.js"
  data-project="mi-app"
  data-key="pk_xxxxxxxx"
  data-shortcut="ctrl+shift+f"></script>

Atributos

data-projectIdentificador del proyecto. El backend etiqueta el feedback con él.
data-keyAPI key publishable del proyecto. El acceso real se valida por el dominio de origen.
data-shortcutOpcional. Atajo para abrir el overlay. Por defecto ctrl+shift+f.
data-tabOpt-in, apagado por defecto. Si lo añades, muestra una pestaña lateral fija en el borde derecho para abrir el overlay con un clic. Sin el atributo no aparece ninguna pestaña.

2 · Uso

Pulsa Ctrl+Shift+F —o haz clic en la pestaña lateral si activaste data-tab— para desplegar el overlay.
Activa el modo selección y haz clic en cualquier elemento.
Elige categoría (Bug, Mejora, Pregunta…), escribe el comentario y guarda.
Pulsa Enviar: el reporte se sube y el equipo recibe un correo con el enlace.

Qué incluye

🏷️ CategoríasBug, Mejora, Pregunta, Elogio u Otro.
📸 ScreenshotsCaptura del elemento marcado, adjunta al comentario.
📌 Pins ancladosNumerados sobre cada elemento, con tooltip.
🔒 AisladoShadow DOM: no choca con el CSS de tu app.
📨 Envío directoSube a S3 y notifica por correo con el reporte.
💾 AutoguardadoLos comentarios persisten por dominio.
📑 Pestaña lateralDisparador opcional al borde derecho (data-tab).

3 · Pruébalo aquí

Esta misma página tiene el widget cargado. Pulsa Ctrl+Shift+F y marca un elemento. (¿Quieres además una pestaña lateral siempre visible? Añade data-tab al <script>: es opt-in y por defecto está apagada.) El envío real requiere registrar este dominio como proyecto.