¿Qué te está pareciendo la app?
Tu opinión nos ayuda a mejorarla.
¡Gracias!
Nos alegra que te guste. ¿Nos dejas una reseña en la tienda?
¿Qué podemos mejorar?
Modal zur App-Bewertung
Ein Modal, das nach Sternen fragt: Bei vier oder fünf gibt es Dank mit Konfetti, bei weniger eine Frage nach Verbesserungen.
Einstellungen
Code
<div class="uv-orr"><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="fire">Bewerten</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uv-orr-t"><div class="v1"><span class="ap" aria-hidden="true"></span><p class="ti" id="uv-orr-t">Wie gefällt dir die App?</p><p class="ds">Deine Meinung hilft uns, sie zu verbessern.</p><div class="st" role="radiogroup" aria-label="Bewertung"><button type="button" role="radio" aria-checked="false" aria-label="1 von 5" style="--i:0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></button><button type="button" role="radio" aria-checked="false" aria-label="2 von 5" style="--i:1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></button><button type="button" role="radio" aria-checked="false" aria-label="3 von 5" style="--i:2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></button><button type="button" role="radio" aria-checked="false" aria-label="4 von 5" style="--i:3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></button><button type="button" role="radio" aria-checked="false" aria-label="5 von 5" style="--i:4"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></button></div><button type="button" class="lt">Nicht jetzt</button></div><div class="v2"><span class="cf" aria-hidden="true"><b style="--a:0deg;--c:#f59e0b"></b><b style="--a:26deg;--c:#ec4899"></b><b style="--a:52deg;--c:#22c55e"></b><b style="--a:78deg;--c:#3b82f6"></b><b style="--a:104deg;--c:#f59e0b"></b><b style="--a:130deg;--c:#ec4899"></b><b style="--a:156deg;--c:#22c55e"></b><b style="--a:182deg;--c:#3b82f6"></b><b style="--a:208deg;--c:#f59e0b"></b><b style="--a:234deg;--c:#ec4899"></b><b style="--a:260deg;--c:#22c55e"></b><b style="--a:286deg;--c:#3b82f6"></b><b style="--a:312deg;--c:#f59e0b"></b><b style="--a:338deg;--c:#ec4899"></b></span><p class="ti">Danke!</p><p class="ds">Schön, dass sie dir gefällt. Schreibst du uns eine Bewertung im Store?</p><button type="button" class="go">Bewertung schreiben</button></div><div class="v3"><p class="ti">Was können wir verbessern?</p><textarea rows="3" placeholder="Sag uns, was dir fehlt" aria-label="Was wir verbessern können"></textarea><button type="button" class="go">Senden</button></div></div></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: OverlaysWofür du ihn nutzen kannst
Im richtigen Moment um eine Bewertung zu bitten hilft der Store-Note, und Unzufriedene zum Feedback zu leiten hilft dem Produkt. Dieses Modal zeigt das App-Icon und fünf Sterne, die sich beim Hover füllen. Vier oder fünf Sterne führen zu einer Danke-Ansicht mit Konfetti und Bewertungs-Button, eins bis drei öffnen stattdessen ein kurzes Feedbackfeld.
Die Sterne sind Buttons mit klaren Labels, Jetzt nicht schließt ohne Nachhaken, und Escape funktioniert in jedem Schritt. Die Frage änderst du im Textfeld, die Buttons verbindest du mit Store und Feedback.