¿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?
Pedir valoración de la app
Un modal que pide estrellas: con cuatro o cinco da las gracias con confeti y con menos pregunta qué mejorar.
Ajustes
Código
<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">Valorar</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">¿Qué te está pareciendo la app?</p><p class="ds">Tu opinión nos ayuda a mejorarla.</p><div class="st" role="radiogroup" aria-label="Valoración"><button type="button" role="radio" aria-checked="false" aria-label="1 de 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 de 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 de 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 de 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 de 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">Ahora no</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">¡Gracias!</p><p class="ds">Nos alegra que te guste. ¿Nos dejas una reseña en la tienda?</p><button type="button" class="go">Escribir reseña</button></div><div class="v3"><p class="ti">¿Qué podemos mejorar?</p><textarea rows="3" placeholder="Cuéntanos qué echas en falta" aria-label="Qué podemos mejorar"></textarea><button type="button" class="go">Enviar</button></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Pedir una reseña en el momento justo ayuda a la nota en la tienda, y llevar a quien no está contento a un formulario ayuda al producto. Este modal muestra el icono de la app y cinco estrellas que se llenan al pasar el ratón; con cuatro o cinco da las gracias con confeti y un botón de reseña, y con una a tres abre una caja de comentarios.
Las estrellas son botones con etiquetas claras, Ahora no cierra sin insistir y Escape funciona en cada paso. Cambia la pregunta con el control de texto y conecta los botones a tu tienda y a tu formulario.