Utiliser votre propre bouton

1Désactiver le bouton flottant

Passez feedbackWidget: false à init. Seul le bouton disparaît ; le rapporteur charge toujours les réglages du widget de votre projet à l’ouverture.

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

2Ouvrir le rapporteur depuis n’importe quel élément

attachReport(element) ouvre le rapporteur au clic sur l’élément. openReport() l’ouvre depuis votre propre code, par exemple depuis un élément de menu ou un raccourci clavier.

<button id="report-bug">Report a bug</button>
<script>
  Blipit.attachReport(document.getElementById("report-bug"));
</script>

menu.on("report", () => Blipit.openReport());

3React et Next.js

@blipit/nextjs et @blipit/browser exportent openReport et attachReport. Passez feedbackWidget={false} au composant Blipit, puis appelez openReport() depuis n’importe quel composant client.

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

4Ou garder le bouton flottant, en icône seule

Si vous gardez le bouton flottant mais le voulez plus petit, choisissez « Icône seule » sous Style du bouton dans les réglages du widget de signalement du projet dans le tableau de bord, ou définissez style dans le code. Le bouton devient une icône ronde de la même couleur ; son texte reste en infobulle et en libellé pour les lecteurs d’écran. Les options du code priment sur le tableau de bord.

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

Bon à savoir

• Le rapporteur (blipit-report.js) se charge à la première ouverture depuis le même dossier que blipit.js : ajoutez https://blipit.io à script-src si votre site a une Content Security Policy.
• Masquer le bouton dans le tableau de bord le masque sur tous les sites qui utilisent la clé ; openReport() et attachReport() y fonctionnent toujours.