Exit-Intent Popup
Shows a popup with your offer or newsletter link when a desktop visitor moves the mouse toward closing the tab, at most once every 30 days.
Opens WPIDE on
Code
<div id="wpide-exit" hidden role="dialog" aria-modal="true" aria-labelledby="wpide-exit-title" style="position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);">
<div style="position:relative;max-width:440px;width:100%;padding:32px 28px;border-radius:10px;background:#fff;color:#1e1e1e;text-align:center;">
<button type="button" data-close aria-label="Close" style="position:absolute;top:8px;right:12px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;">×</button>
<h2 id="wpide-exit-title" style="margin-top:0;">Before you go...</h2>
<p>Get 10% off your first order when you join our newsletter.</p>
<p style="margin-bottom:0;"><a class="wp-element-button button" href="/newsletter/">Get my discount</a></p>
</div>
</div>
<script>
(function () {
var box = document.getElementById('wpide-exit'), days = 30, key = 'wpide-exit-shown';
if (!box || window.matchMedia('(pointer: coarse)').matches) { return; }
try { var last = parseInt(localStorage.getItem(key), 10); if (last && Date.now() - last < days * 86400000) { return; } } catch (e) {}
function show() {
document.removeEventListener('mouseout', onOut);
box.hidden = false;
try { localStorage.setItem(key, String(Date.now())); } catch (e) {}
}
function onOut(e) { if (!e.relatedTarget && e.clientY <= 0) { show(); } }
setTimeout(function () { document.addEventListener('mouseout', onOut); }, 5000);
box.addEventListener('click', function (e) { if (e.target === box || e.target.hasAttribute('data-close')) { box.hidden = true; } });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { box.hidden = true; } });
})();
</script>Notes
Edit the heading, text and link. Change the 30 in the script to show it more or less often.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.