Product Logo
Tools & Services

Feedback einrichten

Wir richten gemeinsam ein Feedback-Formular ein, über das Besucher:innen direkt von der Webseite Rückmeldungen als GitLab-Issues senden können.

Was wir erreichen werden

Am Ende dieses Tutorials erscheint auf jeder Unterseite deiner Webseite ein Feedback-Formular. Eingereichte Rückmeldungen werden automatisch als Issues in deinem GitLab-Projekt erstellt.

Voraussetzungen

  • Ein laufendes easyWebsite-Projekt
  • Eine GitLab-Projekt-ID (findest du unter Settings → General in deinem Projekt)
  • Zugriff auf einen mit der GitLab-Projekt-ID konfigurierten Feedback-Server
Info

Du kannst Zugriff auf den managed openCode Feedback-Server beantragen. Kontaktiere dazu das openCode-Team opencode.de/de/kontakt.

Easy Mode

Im Easy Mode konfigurierst du Feedback über die CI/CD-Pipeline.

1. GitLab-Projekt-ID ermitteln

  1. Öffne dein Projekt auf openCode
  2. Navigiere zu Settings → General
  3. Kopiere die Project ID (eine Zahl, z. B. 12345)

2. CI-Konfiguration ergänzen

Öffne die .gitlab-ci.yml und ergänze die Feedback-Parameter:

3. Optionale Parameter

Du kannst Titel und Beschreibung des Formulars anpassen:

Info

Im Developer Mode heißt diese Option shouldCreateConfidentialIssue. Im Easy Mode setzt du stattdessen den Input feedback-confidential-issue: "true" in der .gitlab-ci.yml.

4. Pipeline ausführen

Committe die Änderung. Die Pipeline baut die Webseite neu — das Feedback-Formular erscheint am Seitenende.

Developer Mode

Im Developer Mode konfigurierst du Feedback in der theme.config.tsx.

1. Feedback-Block hinzufügen

Das Feedback-Formular wird automatisch am Seitenende vor dem Footer gerendert.

2. Auswahlfelder hinzufügen (optional)

Neben Text- und E-Mail-Feldern unterstützt das Formular Auswahlfelder. Mit type: 'select' wählen Nutzer:innen genau einen Wert aus, mit type: 'multiselect' mehrere. Die auswählbaren Werte gibst du in options an. Bei multiselect blendet allowCustom: true zusätzlich den Eintrag „Sonstige (bitte nennen)“ ein, über den ein eigener Freitext eingegeben werden kann:

Info

options ist nur bei type: 'select' und type: 'multiselect' wirksam. allowCustom wirkt ausschließlich bei multiselect: Wählt eine Nutzer:in „Sonstige“, wird das eingeblendete Freitextfeld vor dem Absenden validiert. Auswahlfelder stehen nur im Developer Mode zur Verfügung.

3. Ergebnis prüfen

Starte den Entwicklungsserver mit npm run dev und scrolle ans Seitenende. Du siehst das Feedback-Formular. Fülle es testweise aus — ein neues Issue wird in deinem GitLab-Projekt erstellt.

Info

Im Developer Mode kannst du das Formular auch manuell pro Seite einbinden: import { Feedback } from '@document-writing-tools/kernux-theme' und <Feedback ... /> verwenden.

Feedback auf einzelnen Seiten ausblenden

Standardmäßig erscheint das Formular auf jeder Unterseite. Möchtest du es auf einer bestimmten Seite ausblenden, setze disableFeedback: true im Frontmatter dieser Seite:

Das überschreibt die globale feedback-Konfiguration nur für diese Seite und funktioniert in Easy Mode und Developer Mode gleichermaßen.

Nächste Schritte