¿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?
App rating request modal
A modal that asks for stars: four or five says thanks with confetti, fewer asks what to improve.
Settings
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">Rate</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">How are you liking the app?</p><p class="ds">Your feedback helps us improve it.</p><div class="st" role="radiogroup" aria-label="Rating"><button type="button" role="radio" aria-checked="false" aria-label="1 of 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 of 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 of 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 of 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 of 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">Not now</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">Thank you!</p><p class="ds">We’re glad you like it. Would you leave a review in the store?</p><button type="button" class="go">Write a review</button></div><div class="v3"><p class="ti">What can we improve?</p><textarea rows="3" placeholder="Tell us what you’re missing" aria-label="What can we improve"></textarea><button type="button" class="go">Send</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Asking for a review at the right moment helps your store rating, and routing unhappy users to feedback helps your product. This modal shows the app icon and five stars that fill as you hover; four or five stars switch to a thank you view with a burst of confetti and a button to write a review, while one to three opens a short feedback box instead.
Stars are radio-like buttons with clear labels, Not now closes without nagging, and Escape works at every step. Change the question with the text control and connect the buttons to your store link and feedback endpoint.