¿Te ha sido útil esta página?

Gracias por tu opinión

HTML + CSSOverlays

Widget de opinión flotante

Una pestaña flotante que abre una tarjeta con caras para valorar, un comentario opcional y un mensaje de gracias.

Ajustes

16px
1x

Código

<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>Opinión</button><form class="cd" id="uv-ofw-c"><button type="button" class="x" aria-label="Cerrar"><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">¿Te ha sido útil esta página?</p><div class="fc" role="radiogroup" aria-label="Valoración"><label><input type="radio" name="uv-ofw"><span aria-label="Nada">😞</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Algo">😐</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Bastante">🙂</span></label><label><input type="radio" name="uv-ofw"><span aria-label="Mucho">🤩</span></label></div><textarea rows="2" placeholder="¿Algo que añadir? (opcional)" aria-label="Comentario"></textarea><button type="submit" class="go" disabled>Enviar</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">Gracias por tu opinión</p></div></form></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: Overlays

Dónde usarlo

La documentación, los centros de ayuda y las páginas de producto mejoran más rápido cuando se puede opinar en el momento. Este widget vive en la esquina como una pequeña píldora de Opinión; al abrirla crece una tarjeta desde esa esquina con cuatro caras para valorar la página, un comentario opcional y un botón que sigue desactivado hasta elegir cara y luego enseña un check de gracias.

Las caras son radios nativos y la tarjeta un formulario real, así que es fácil enviarla a tu servidor. Escape o la X la cierran y devuelven el foco a la pestaña.