¿Te vas ya?
Te guardamos el carrito durante 48 horas.
Te lo hemos enviado
Revisa tu correo para volver al carrito.
Aviso al intentar salir de la página
Cuando el cursor se acerca al borde de arriba se enciende una línea y, si sale, baja un modal que ofrece guardarte el carrito.
Ajustes
Código
<div class="uvq13-ext"><div class="ez" aria-hidden="true"><span>Saca el cursor por arriba</span></div><header class="nv"><b>Brisa</b><span class="ct"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h12l-1 12H7zM9 8V6.5a3 3 0 0 1 6 0V8"/></svg><i>2</i></span></header><div class="gr" aria-hidden="true"><span><i class="p"></i><i></i><i class="s"></i></span><span><i class="p"></i><i></i><i class="s"></i></span><span><i class="p"></i><i></i><i class="s"></i></span></div><button type="button" class="fire" aria-haspopup="dialog">Simular salida</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-ext-t"><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" id="uvq13-ext-t">¿Te vas ya?</p><p class="ds">Te guardamos el carrito durante 48 horas.</p><div class="its" aria-hidden="true"><i style="--c:#fb923c"></i><i style="--c:#38bdf8"></i></div><form class="fm"><input type="email" placeholder="tu@correo.es" aria-label="Correo electrónico" autocomplete="email"><button type="submit">Guárdamelo</button></form><button type="button" class="no">No, gracias</button></div><div class="v2" aria-live="polite"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7l8 6 8-6M4 6.5h16v11H4z"/></svg></span><p class="ti">Te lo hemos enviado</p><p class="ds">Revisa tu correo para volver al carrito.</p></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
Los avisos de salida suelen parecer una emboscada, así que este enseña su disparador. Una línea fina arriba brilla más cuanto más se acerca el cursor, y al salir por ese borde baja un modal cálido que ofrece guardar el carrito 48 horas por correo, con un no gracias bien visible. Encaja en tiendas, registros y reservas donde la gente duda.
El color principal es el borde que brilla, la insignia y el botón, y el secundario el papel del modal. Espera unos segundos antes de volver a salir, y en pantallas táctiles o con teclado el botón de simular lo abre igual.