Je eigen knop gebruiken

1Zet de zwevende knop uit

Geef feedbackWidget: false mee aan init. Alleen de knop verdwijnt; de melder laadt bij het openen nog steeds de widgetinstellingen van je project.

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

2Open de melder vanuit elk element

attachReport(element) opent de melder als op het element wordt geklikt. openReport() opent hem vanuit je eigen code, bijvoorbeeld een menu-item of een sneltoets.

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

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

3React en Next.js

@blipit/nextjs en @blipit/browser exporteren openReport en attachReport. Geef feedbackWidget={false} mee aan de Blipit-component en roep openReport() aan vanuit elke clientcomponent.

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

4Of houd de zwevende knop, alleen als pictogram

Wil je de zwevende knop houden maar kleiner, kies dan ‘Alleen pictogram’ onder Knopstijl in de instellingen van de bugmeldwidget van het project in het dashboard, of zet style in de code. De knop wordt een rond pictogram in dezelfde kleur; de tekst blijft als tooltip en label voor schermlezers. Opties in de code gaan voor het dashboard.

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

Goed om te weten

• De melder zelf (blipit-report.js) wordt bij de eerste keer openen geladen uit dezelfde map als blipit.js, dus voeg https://blipit.io toe aan script-src als je site een Content Security Policy heeft.
• De knop verbergen in het dashboard verbergt hem op elke site die de sleutel gebruikt; openReport() en attachReport() werken daar nog steeds.