Ergebnis-Badge für E-Mail und README

Das Ergebnis-Badge zeigt das aktuelle Ergebnis einer Umfrage als Bild – überall dort, wo kein JavaScript läuft: Newsletter, E-Mails, GitHub-READMEs, Wikis. Ein Klick darauf führt zum Direktlink, wo man selbst abstimmen kann.

https://app.pollyou.org/s/AbC123xyz0/badge.png
https://app.pollyou.org/s/AbC123xyz0/badge.svg

Den fertigen Code gibt es im Dashboard unter Einbetten → Badge (E-Mail/README):

<!-- E-Mail, Newsletter: PNG (viele E-Mail-Programme blockieren SVG) -->
<a href="https://app.pollyou.org/s/AbC123xyz0">
  <img
    src="https://app.pollyou.org/s/AbC123xyz0/badge.png"
    alt="Teamevent – aktuelles Ergebnis"
    width="420"
    style="max-width: 100%; height: auto; border: 0"
  />
</a>

<!-- README, Wiki: SVG (gestochen scharf) -->

[![Teamevent – aktuelles Ergebnis](https://app.pollyou.org/s/AbC123xyz0/badge.svg)](https://app.pollyou.org/s/AbC123xyz0)

Was das Badge zeigt

• Die erste Frage der veröffentlichten Version, mit ?q=<fragen-schlüssel> eine bestimmte Frage.
• Auswahlfragen und Ja/Nein als Balken mit Prozentwerten (bei mehr als fünf Optionen die fünf häufigsten), Bewertungen als Durchschnitt plus Verteilung, NPS als Score plus Promotoren/Passive/Kritiker.
• Unten die Zahl der Teilnahmen. Gezählt werden alle abgeschlossenen Teilnahmen ohne verdächtige Antworten – dieselben Zahlen wie in der Auswertung.
• Sprache: die des Betrachters (Accept-Language), mit ?locale=de bzw. ?locale=en fest (im Dashboard über die Option „Sprache“).
• Das SVG ist barrierefrei: role="img" mit <title> (Frage) und <desc> (alle Werte als Text); im Snippet steht ein sprechender alt-Text. Das PNG wird in doppelter Auflösung erzeugt (840 px breit, angezeigt mit 420 px).

Nur öffentliche Ergebnisse

Das Badge respektiert die Einstellung Ergebnis-Sichtbarkeit der Umfrage – genau wie die Ergebnisse in Einbettungen und die Live-Ergebnisse:

Ergebnis-Sichtbarkeit	Badge
Immer sichtbar	zeigt das Ergebnis
Nach dem Ende	erst, wenn die Umfrage beendet ist
Nach der Teilnahme	nie (es gibt keine Teilnahme im Bild)
Nie	nie

Sonst liefert die Adresse ein neutrales Bild „Die Ergebnisse dieser Umfrage sind nicht öffentlich“ (HTTP 403), für unbekannte oder nicht veröffentlichte Umfragen „Diese Umfrage gibt es nicht (mehr)“ (HTTP 404). Das Dashboard weist im Badge-Tab darauf hin.

Aktualität und Caching

Das Badge ist für E-Mail-Programme und Bild-Proxys (z. B. Gmail) gemacht: keine Cookies, keine Anmeldung, absolute Adresse.

• Cache-Control: public, max-age=60: Programme und Proxys dürfen das Bild eine Minute zwischenspeichern.
• Ein ETag hängt an der Datenversion der Auswertung. Jede neue Teilnahme ändert sie; danach liefert eine Nachfrage mit If-None-Match das neue Bild statt 304 Not Modified. Solange sich nichts ändert, kostet eine Nachfrage praktisch nichts.
• Eine neue Stimme erscheint, sobald der Hintergrund-Worker sie gezählt hat (üblicherweise innerhalb von Sekunden) und der Zwischenspeicher des Programms abgelaufen ist. Manche E-Mail-Programme laden Bilder nur beim ersten Öffnen und zeigen danach immer dieses Bild.

So wurde es geprüft

Der E2E-Test e2e/share-links.spec.ts („the result badge in an e-mail …“) verschickt den Badge-Code aus dem Dashboard über die Send-API von Mailpit (lokal http://localhost:8482) als HTML-Mail und prüft:

1. Die Bildadresse in der empfangenen Mail ist absolut (http://…/s/<publicId>/badge.png).
2. Sie lädt in einem frischen Browser-Kontext ohne Cookies (200, image/png, kein Set-Cookie), eine Wiederholung mit dem ETag ergibt 304.
3. Mailpits HTML-Ansicht der Mail zeigt das Bild (840 px Originalbreite).
4. Nach einer neuen Stimme (und deren Verarbeitung durch den Worker) liefert dieselbe Adresse mit dem alten ETag 200 mit neuem ETag und den neuen Zahlen („2 Teilnahmen“, 50 %/50 %); die Mail zeigt beim erneuten Öffnen das neue Ergebnis.

Von Hand: Snippet aus dem Badge-Tab in eine Mail an Mailpit kopieren (z. B. curl -X POST http://localhost:8482/api/v1/send -d '{"From":{"Email":"a@example.com"},"To":[{"Email":"b@example.com"}],"Subject":"Badge","HTML":"<Snippet>"}'), Mail öffnen, abstimmen, Mail nach einer Minute erneut öffnen.

Eigene Installation

Die Bilder erzeugt das Backend: SVG mit Twig, PNG mit der PHP-Erweiterung gd (mit FreeType) und den DejaVu-Schriften aus fonts-dejavu-core – beides ist im PHP-Image (backend/docker/php/Dockerfile) enthalten. BADGE_FONT_DIR (Standard /usr/share/fonts/truetype/dejavu) zeigt auf die Schriften; fehlen sie, nutzt das PNG die eingebaute Bitmap-Schrift von gd (nur ASCII). Ohne gd antwortet badge.png mit 501, das SVG funktioniert weiter.