Feedback-Button in der Website

[deleonio]

Todos:

• Button einbauen
• Auch auf Englisch

---

Alles klar, ich fasse kurz zusammen, was du möchtest:

• Button rechts oben auf eurer Doku-Website.
• Beim Klick soll ein Popover aufgehen (ähnlich wie im Bild).
• Darin ein kurzer, motivierender Text, passend zum KoliBri Webcomponents-Design.
• Der Link öffnet eine E-Mail an kolibri@itzbund.de, mit vorbereitetem Betreff und Inhalt (Mail-Template).
• feedback-Icon von Codicon verwenden

Ich schlage folgendes für den Text im Popover vor:

Feedback geben

Ihre Meinung zählt! Helfen Sie uns, KoliBri noch besser zu machen.
Mit nur wenigen Klicks senden Sie uns Ihre Ideen, Anmerkungen oder Probleme.

Position auf der Seite:

Und der Link wäre dann ein sogenannter mailto-Link, z.B.:

<a href="mailto:kolibri@itzbund.de?subject=Feedback%20zu%20KoliBri-Webcomponents&body=Hallo%20KoliBri-Team,%0A%0Ahier%20ist%20mein%20Feedback%20zur%20Dokumentation%20oder%20den%20Webcomponents:%0A%0A%5BEinfach%20hier%20Ihr%20Feedback%20einfügen%5D%0A%0AVielen%20Dank!">
    Feedback senden
</a>

➡️ Dadurch wird beim Klicken eine E-Mail geöffnet mit:

• Empfänger: kolibri@itzbund.de
• Betreff: Feedback zu KoliBri-Webcomponents
• Body: eine kleine Vorlage, in die man direkt reinschreiben kann.

[deleonio]

Draft:

<!-- Feedback Button + Popover mit KoliBri KolPopoverButton -->

<kol-popover-button label="Feedback" placement="bottom-end" style="position: fixed; top: 1rem; right: 1rem; z-index: 1000;">
  <div style="width: 300px; padding: 1rem;">
    <h3 style="margin-top: 0;">Feedback geben</h3>
    <p style="font-size: 0.9rem;">Ihre Meinung zählt! Helfen Sie uns, KoliBri noch besser zu machen. Mit nur wenigen Klicks senden Sie uns Ihre Ideen, Anmerkungen oder Probleme.</p>
    <a href="mailto:kolibri@itzbund.de?subject=Feedback%20zu%20KoliBri-Webcomponents&body=Hallo%20KoliBri-Team,%0A%0Ahier%20ist%20mein%20Feedback%20zur%20Dokumentation%20oder%20den%20Webcomponents:%0A%0A%5BEinfach%20hier%20Ihr%20Feedback%20einfügen%5D%0A%0AVielen%20Dank!" 
       style="display: inline-block; margin-top: 0.5rem; padding: 0.5rem 1rem; background-color: var(--kolibri-color-primary); color: white; border-radius: 9999px; text-decoration: none;">
      E-Mail senden
    </a>
  </div>
</kol-popover-button>

[aTTiCuZ-CodingPage]

Hallo @anicyne - Ich würde mir dieses Ticket als nächstes anschauen.