Want to create a site-wide popup in Divi 5 with advanced triggers — without using extra plugins?
In the video above, I’ll show you how to build a popup using the Divi 5 Canvas, add exit-intent, scroll-based, and time-based triggers, and make everything session-based for a better user experience.
Exit-intent, scroll percentage and timed trigger
Place the following code in Divi > Theme Options > Integration > Add code to the < head > of your blog.
<script>
document.addEventListener('DOMContentLoaded', function () {
/* =========================================================
CONFIG (edit these two values)
========================================================= */
const STORAGE_KEY = 'divi5_popup_shown_v1'; // Change this if you have multiple popups
const TRIGGER_ID = 'diviExitTrigger'; // CSS ID of your hidden Divi trigger element
/* =========================================================
DO NOT EDIT (core "show once per session" logic)
========================================================= */
function showPopupOncePerSession() {
if (sessionStorage.getItem(STORAGE_KEY) === '1') return; // already shown
sessionStorage.setItem(STORAGE_KEY, '1'); // mark as shown
document.getElementById(TRIGGER_ID)?.click(); // open popup via Divi interaction
}
/* =========================================================
TRIGGERS (enable any combination you want)
To DISABLE a trigger: comment out its whole block.
========================================================= */
/* ----- TRIGGER A: EXIT INTENT (desktop only) ----------
Disable by commenting out this entire block.
------------------------------------------------------------ */
if (window.matchMedia('(pointer:fine)').matches) {
document.addEventListener('mouseleave', function (e) {
if (e.clientY <= 0) showPopupOncePerSession();
});
}
/* ----- TRIGGER B: SCROLL PERCENTAGE (all devices) -----
Change 60 to whatever percent you want.
Disable by commenting out this entire block.
------------------------------------------------------------ */
window.addEventListener('scroll', function () {
if (sessionStorage.getItem(STORAGE_KEY) === '1') return;
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
if (docHeight <= 0) return;
const scrolled = (scrollTop / docHeight) * 100;
if (scrolled >= 60) showPopupOncePerSession();
}, { passive: true });
/* ----- TRIGGER C: TIME DELAY (all devices) ------------
Change 12 to the number of seconds you want.
Disable by commenting out this entire block.
------------------------------------------------------------ */
setTimeout(function () {
showPopupOncePerSession();
}, 12 * 1000);
}); // ← NOT part of block C, do not comment out)
</script>
