Overlays conversionmodaloverlay

Exit Intent Popup

Modal triggered when the user moves to close the tab.

Wait! Before you go...

Get 20% off your first order when you join our mailing list.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { ExitIntentPopup } from 'astro-component-kit';
---

<ExitIntentOverlay>Content</ExitIntentOverlay>
--- import { ExitIntentPopup } from 'astro-component-kit'; --- <ExitIntentOverlay>Content</ExitIntentOverlay>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ExitIntentPopup.astro and paste the following code:

astro 
---
---
<div class="exit-modal">
  <div class="exit-card">
    <h2>Wait! Before you go...</h2>
    <p>Get 20% off your first order when you join our mailing list.</p>
    <input type="email" placeholder="Your email" />
    <button>Get My Code</button>
  </div>
</div>
<style>
  .exit-modal { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; }
  .exit-card { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
  h2 { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; }
  p { color: #64748b; margin-bottom: 2rem; line-height: 1.5; }
  input { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; }
  button { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
  button:hover { background: #4f46e5; }
</style>
--- --- <div class="exit-modal"> <div class="exit-card"> <h2>Wait! Before you go...</h2> <p>Get 20% off your first order when you join our mailing list.</p> <input type="email" placeholder="Your email" /> <button>Get My Code</button> </div> </div> <style> .exit-modal { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; } .exit-card { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); } h2 { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; } p { color: #64748b; margin-bottom: 2rem; line-height: 1.5; } input { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; } button { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; } button:hover { background: #4f46e5; } </style>

Quick Info

Category
Overlays
Filename
ExitIntentPopup.astro
Dependencies
None — pure Astro + CSS
Tags
conversionmodaloverlay