Usa il tuo pulsante

Installazione feedbackWidget: false + Blipit.openReport()

L’SDK browser mette un pulsante «Segnala un bug» nell’angolo di ogni pagina. Se la tua app ha già un menu di aiuto o un pulsante nell’intestazione, disattiva il pulsante flottante e apri lo stesso reporter da lì: screenshot, annotazioni, selettore di elementi, registrazione e contesto funzionano allo stesso modo.

1Disattiva il pulsante flottante

Passa feedbackWidget: false a init. Sparisce solo il pulsante; all’apertura il reporter carica comunque le impostazioni del widget del progetto.

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

2Apri il reporter da qualsiasi elemento

attachReport(element) apre il reporter al clic sull’elemento. openReport() lo apre dal tuo codice, per esempio da una voce di menu o da una scorciatoia da tastiera.

html
<button id="report-bug">Report a bug</button>
<script>
  Blipit.attachReport(document.getElementById("report-bug"));
</script>
Dal tuo codice
menu.on("report", () => Blipit.openReport());

3React e Next.js

@blipit/nextjs e @blipit/browser esportano openReport e attachReport. Passa feedbackWidget={false} al componente Blipit, poi chiama openReport() da qualsiasi componente client.

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>;
}

4Oppure tieni il pulsante flottante, solo icona

Se tieni il pulsante flottante ma lo vuoi più piccolo, scegli «Solo icona» in Stile del pulsante nelle impostazioni del widget di segnalazione del progetto nella dashboard, oppure imposta style nel codice. Il pulsante diventa un’icona rotonda dello stesso colore; il testo resta come tooltip ed etichetta per i lettori di schermo. Le opzioni nel codice prevalgono sulla dashboard.

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

Buono a sapersi

  • Il reporter (blipit-report.js) si carica alla prima apertura dalla stessa cartella di blipit.js, quindi aggiungi https://blipit.io a script-src se il tuo sito ha una Content Security Policy.
  • Nascondere il pulsante nella dashboard lo nasconde su tutti i siti che usano la chiave; openReport() e attachReport() funzionano comunque.

Bloccato? Scrivi a support@blipit.io. Le chiavi e il DSN esatto di ogni progetto sono sotto Chiavi API in app.blipit.io.