Documentación del widget

1. Lista de solicitudes más votadas

Renderiza un mini-ranking inline donde pongas el div. Ideal para footers, landings y páginas "Roadmap". Cada clic lleva al tablero público para votar.

<div data-mejorable-board="tu-handle/tu-tablero" data-variant="list" data-limit="5"></div>
<script async src="https://mejorable.chasquillaengineer.com/embed.js"></script>

2. Botón flotante

Un FAB siempre visible que abre tu tablero público en una pestaña nueva. Personalizable en posición, texto, color de acento y tema.

<script async src="https://mejorable.chasquillaengineer.com/embed.js"
  data-mejorable-board="tu-handle/tu-tablero"
  data-variant="button"
  data-position="bottom-right"
  data-label="Sugerir idea"></script>

3. Badge inline

Un chip pequeño tipo "N ideas en Mejorable" ideal para footers o navbars.

<a data-mejorable-board="tu-handle/tu-tablero" data-variant="badge"></a>
<script async src="https://mejorable.chasquillaengineer.com/embed.js"></script>

4. Reportar problema

Un botón flotante que abre un modal en el propio sitio. El visitante describe el problema y el widget adjunta automáticamente: URL actual, navegador, sistema operativo, tamaño de pantalla, errores de consola recientes y un registro de los últimos clics y navegaciones. Nunca se envían cookies ni valores de formularios.

<script async src="https://mejorable.chasquillaengineer.com/embed.js"
  data-mejorable-board="tu-handle/tu-tablero"
  data-variant="bug"
  data-position="bottom-right"
  data-label="Reportar problema"></script>

5. Personalización avanzada

El widget de reporte de bugs admite 12 variables de texto y 5 grupos visuales. Todas son opcionales: si no las usas, se mantienen los valores por defecto.

data-font="system"
data-font="serif"
data-font="mono"
data-font="inherit"
data-font-family="Inter, sans-serif"

data-radius="pill"
data-radius="rounded"
data-radius="square"

data-size="sm"
data-size="md"
data-size="lg"

data-icon="bug"
data-icon="alert"
data-icon="chat"
data-icon="none"
data-icon="🐞"
data-bg="#f0fdf4"

data-modal-title="Reportar un problema"
data-modal-subtitle="Cuéntanos qué pasó..."
data-field-title-label="¿Qué pasó? *"
data-field-title-placeholder="El botón Comprar no responde..."
data-field-expected-label="¿Qué esperabas que pasara? (opcional)"
data-field-expected-placeholder="Esperaba ir al checkout..."
data-privacy-note="📎 Se adjuntará automáticamente..."
data-submit-label="Enviar reporte"
data-cancel-label="Cancelar"
data-success-title="¡Gracias por avisar!"
data-success-body="Recibimos tu reporte con el contexto técnico."
data-success-link-label="Ver tu reporte →"

6. Ejemplo completo

Widget de reporte de bugs con tipografía heredada del sitio, botón cuadrado grande, icono de alerta y texto personalizado:

<script async src="https://mejorable.chasquillaengineer.com/embed.js"
  data-mejorable-board="tu-handle/tu-tablero"
  data-variant="bug"
  data-position="bottom-left"
  data-label="Feedback"
  data-font="inherit"
  data-radius="square"
  data-size="lg"
  data-icon="alert"
  data-bg="#fef3c7"
  data-modal-title="Ayúdanos a mejorar"
  data-submit-label="Enviar feedback"
  data-success-title="¡Gracias!"></script>

Tabla de atributos

Requisitos

• El tablero debe tener activada la opción Mostrar en /explorar desde el dashboard.
• Los widgets list, button y badge no permiten votar dentro del sitio externo: cada clic lleva al tablero público para evitar abuso.
• El widget bug sí permite enviar reportes directamente desde el sitio embebido.
• Endpoint público con CORS abierto: /api/public/embed/{handle}/{slug}.
• Endpoint de reportes: /api/public/embed/{handle}/{slug}.report (POST).