Widget installieren

Das Cirlo-Widget ist ein einzelnes Script-Tag. Es rendert einen Feedback-Button unten in deiner App, kapselt sein Styling im Shadow DOM und meldet sich beim ersten Laden automatisch.

Einbauen

Vor dem schliessenden </body> einfügen:

<script src="https://cirlo.dev/widget.js" data-key="DEIN_WIDGET_KEY" data-accent="#e64bc8" data-position="bottom-right" data-lang="de" defer></script>

• data-key (Pflicht): dein Projekt-Key, beginnt mit w_.
• data-accent (optional): Akzentfarbe deiner App als Hex-Wert.
• data-position (optional): bottom-right oder bottom-left.
• data-lang (optional): de oder en.
• data-repro (optional): off schaltet die Browser-Erfassung komplett ab.

Wenn deine App eine Content-Security-Policy hat

Dann blockiert dein Browser das Widget stillschweigend: der Knopf erscheint nicht, und in der Konsole steht eine CSP-Meldung. Trag https://cirlo.dev an zwei Stellen deiner Policy ein:

script-src  ... https://cirlo.dev;   damit das Widget geladen werden darf
connect-src ... https://cirlo.dev;   damit es Meldungen senden darf

Beides ist noetig. Fehlt nur connect-src, laedt das Widget und der Knopf erscheint, aber jede abgeschickte Meldung verschwindet. Keine CSP im Einsatz? Dann ist hier nichts zu tun.

Was das Widget kostet

6,7 KB über die Leitung (gzip), 17,1 KB unkomprimierter Quelltext. Kein Framework, keine weiteren Requests, kein Session-Replay. Die Zahl kannst du selbst nachrechnen: node scripts/widget-size.mjs im Cirlo-Repo. Zum Vergleich: Werkzeuge mit Session-Replay laden ein Vielfaches davon, weil sie die Seite dauerhaft mitschneiden. Cirlo schneidet nichts dauerhaft mit.

Was das Widget erfasst

Bei einem Bug-Report (nie bei Idee oder Lob) schickt das Widget ein Repro-Paket mit: die letzten 40 Ereignisse vor der Meldung, ausschliesslich im Arbeitsspeicher gehalten.

• Klicks: Beschreibung des Elements (Tag, id oder erste Klasse, sichtbarer Text). Bei Formularfeldern nur der Feldname, nie der eingegebene Wert.
• Navigation: nur der Pfad, ohne Query-String.
• JS-Fehler: Meldung und Fundstelle (console.error, unbehandelte Fehler, abgelehnte Promises).
• Fehlgeschlagene Requests: Methode, URL ohne Query-String, Statuscode, Dauer. Nur ab Status 400 oder bei Netzwerkfehlern.

Nie erfasst: Tastatureingaben, Feldinhalte, Inhalte von Requests oder Antworten, Header, Cookies, Screenshots, Video. Secret-verdächtige Zeichenketten werden serverseitig entfernt, das Paket ist auf 8 KB begrenzt. In den Projekt-Einstellungen abschaltbar.

Eingeloggten Nutzer erkennen (optional)

window.cirlo.identify({
  email: "user@example.com",
  name: "Alex",
  paying: true,      // optional
  plan: "Pro",       // optional, max. 40 Zeichen
});

paying und plan sind freiwillig. Sind sie gesetzt, zeigen Fallliste und Tagesüberblick zusätzlich, wie viele zahlende Kunden ein Fehler getroffen hat. Fehlen sie, steht dort nichts: Cirlo leitet daraus nie ab, dass jemand nicht zahlt. Beides sind Angaben über deine Nutzer und fallen unter dieselbe Auftragsverarbeitung wie die Adresse eines Melders.

Maschinenlesbare Kurzfassung: https://cirlo.dev/llms.txt