¿Te ha sido útil esta página?

Gracias por tu opinión

HTML + CSSOverlays

Schwebendes Feedback-Widget

Ein schwebender Tab, der eine Karte mit Gesichtern zur Bewertung, optionalem Kommentar und Dankesnachricht öffnet.

Einstellungen

16px
1x

Code

<div class="uv-ofw"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="tab" aria-expanded="false" aria-controls="uv-ofw-c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Feedback</button><form class="cd" id="uv-ofw-c"><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><div class="v1"><p class="ti">War diese Seite hilfreich?</p><div class="fc" role="radiogroup" aria-label="Bewertung"><label><input type="radio" name="uv-ofw"><span aria-label="Gar nicht">😞</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Etwas">😐</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Ziemlich">🙂</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Sehr">🤩</span></label></div><textarea rows="2" placeholder="Noch etwas? (optional)" aria-label="Kommentar"></textarea><button type="submit" class="go" disabled>Senden</button></div><div class="v2" aria-live="polite"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><p class="ti">Danke für dein Feedback</p></div></form></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Dokus, Hilfecenter und Produktseiten verbessern sich am schnellsten, wenn Leser direkt reagieren können. Dieses Widget sitzt als kleine Feedback-Pille in der Ecke. Beim Öffnen wächst aus derselben Ecke eine Karte mit vier Gesichtern zur Bewertung, einem optionalen Kommentar und einem Senden-Button, der erst nach der Wahl eines Gesichts aktiv wird und dann einen Dankes-Haken zeigt.

Die Gesichter sind native Radiobuttons, die Karte ein echtes Formular, das sich leicht an deinen Server senden lässt. Escape oder das X schließen und geben den Fokus an den Tab zurück.