Usa tu propio botón

Instalar feedbackWidget: false + Blipit.openReport()

El SDK del navegador pone un botón «Reportar un error» en la esquina de cada página. Si tu app ya tiene un menú de ayuda o un botón en la cabecera, desactiva el botón flotante y abre el mismo reportador desde ahí: la captura, las anotaciones, el selector de elementos, la grabación y el contexto funcionan igual.

1Desactiva el botón flotante

Pasa feedbackWidget: false a init. Solo desaparece el botón; el reportador sigue cargando la configuración del widget de tu proyecto al abrirse.

html
<script src="https://blipit.io/sdk/0.3.2/blipit.js"></script>
<script>
  Blipit.init({ key: "<public key>", feedbackWidget: false });
</script>

2Abre el reportador desde cualquier elemento

attachReport(element) abre el reportador al hacer clic en el elemento. openReport() lo abre desde tu propio código, por ejemplo desde un elemento de menú o un atajo de teclado.

html
<button id="report-bug">Report a bug</button>
<script>
  Blipit.attachReport(document.getElementById("report-bug"));
</script>
Desde tu propio código
menu.on("report", () => Blipit.openReport());

3React y Next.js

@blipit/nextjs y @blipit/browser exportan openReport y attachReport. Pasa feedbackWidget={false} al componente Blipit y llama a openReport() desde cualquier componente de cliente.

tsx
"use client";
import { Blipit, openReport } from "@blipit/nextjs";

export function Monitoring() {
  return <Blipit publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!} feedbackWidget={false} />;
}

export function ReportBug() {
  return <button onClick={() => openReport()}>Report a bug</button>;
}

4O mantén el botón flotante, solo con icono

Si mantienes el botón flotante pero lo quieres más pequeño, elige «Solo icono» en Estilo del botón, en la configuración del widget de reporte de errores del proyecto en el panel, o define style en el código. El botón pasa a ser un icono redondo del mismo color; su texto queda como tooltip y etiqueta para lectores de pantalla. Las opciones en el código tienen prioridad sobre el panel.

js
Blipit.init({ key: "<public key>", feedbackWidget: { style: "icon" } });

Conviene saber

  • El reportador (blipit-report.js) se carga la primera vez que se abre desde la misma carpeta que blipit.js, así que añade https://blipit.io a script-src si tu sitio tiene una Content Security Policy.
  • Ocultar el botón en el panel lo oculta en todos los sitios que usan la clave; openReport() y attachReport() siguen funcionando también ahí.

¿Atascado? Escribe a support@blipit.io. Las claves y el DSN exacto de cada proyecto están en Claves API en app.blipit.io.