The Visual Editor's No-code Widgets have trigger conditions including Exit Intent. This document describes the events we hook into.
Note that exit intent is a combination of the below factors, not a selection of one.
Visual Editor widget exit intent triggers
Below are the conditions we use by default in the Visual Editor.
Trigger: document.onmouseout
Devices: Desktop
This tracks the mouse cursor, and fires when it leaves the "document", i.e. the area of the browser where the web page is.
On desktops, this includes the start menu, bookmarks bar, address bar, close butons, etc.
Trigger: window.onblur
Devices: Desktop, Mobile
The window.onblur event fires when the page loses focus.
On desktop, this could be things like clicking into an address bar, start menu, clicking on tabs, etc.
For mobile, tihs would fire when you click off the page, onto the address bar, browser buttons, etc.
Dwell
Devices: Desktop, Mobile
This is defined separately as "After x seconds" in the widget builder, but you have the option to target users based on dwell - staying on the page for an abnormally long period of time.
We see this be a useful trigger for "need help?" messaging.
Looking for more conditions?
It is possible to track far more conditions. They have varying levels of effectiveness/relevancy, based on the users, the website, etc.
Where we haven't documented how to run these, please ask if you need help.
For a larger-scale exit project, you can consider triggers like:
Battery level
It's common that users have low-battery warning thresholds set at 20%, and that these warnings would cause users to drop off anything non-essential.
You can hook into two important values - battery level and if the device is charging. Both are important - if battery is 10% but it is charging, users likely can't leave where they are and might not leave the website as quickly.
navigator.getBattery().then((battery) => {
console.log(battery.level);
console.log(battery.charging);
});
This returns:
You could ether detect the state when the page loads, or hook into onlevelchange if you expect users to be on the page for a while.
Inactivity
Users who don't scroll, click, type, etc.
const inactivityLimit = 10_000; // 10 seconds
let inactivityTimer;
const resetInactivityTimer = () => {
clearTimeout(inactivityTimer);
inactivityTimer = setTimeout(() => {
console.log('π΄ User is inactive');
// You can trigger a callback or event here
}, inactivityLimit);
};
// Events to track
['click', 'mousedown', 'keydown', 'scroll'].forEach(event => {
document.addEventListener(event, resetInactivityTimer, { passive: true });
});
// Start the timer initially
resetInactivityTimer();
Negative scroll
Users scrolling back up the page is typically a sign of not finding what they need. You can pick a size (by pixels) or percentage of the page, and trigger if a user matches that amount of negative scroll.
let thresholdScrollPX = 100; // how far we want users to negatively scroll
let lastScrollY = window.scrollY;
let scrollUpAccumulated = 0;
window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;
const delta = currentScrollY - lastScrollY;
if (delta < 0) {
scrollUpAccumulated += Math.abs(delta);
if (scrollUpAccumulated > thresholdScrollPX ) {
const event = new CustomEvent('wto_exit_negativescroll');
window.dispatchEvent(event);
scrollUpAccumulated = 0; // reset after firing
}
} else {
scrollUpAccumulated = 0; // reset on downward scroll
}
lastScrollY = currentScrollY;
});
// Example usage
window.addEventListener('wto_exit_negativescroll', rateLimiter);
Aggressive scroll
Whether up or down, aggressive scrolls a lack of interest in the page content and users either tired or frustrated.
End of page
If users reach the end of the page, typically a site footer, it's often a sign that they didn't find what they wanted. This could be combined with aggressive negative scroll as a strong trigger.
Change in viewport height
Some mobile browsers shrink the viewport when users scroll up enough to make the address bar show up (hidden as you scroll down).
We can detect the address bar becoming visible and use that as a strong exit trigger.
Dead clicks
Users clicking on elements that aren't links often leads to frustration and exit.
Rage clicks
If users click on an element several times, it shows a level of frustration or broken experience that is very likely to lead to exit.
const rageClickThreshold = 3; // N times
const rageClickWindow = 1000; // X milliseconds
let lastTarget = null;
let clickCount = 0;
let firstClickTime = 0;
document.addEventListener('click', (e) => {
const now = Date.now();
const currentTarget = e.target;
if (currentTarget === lastTarget) {
if (now - firstClickTime <= rageClickWindow) {
clickCount++;
} else {
// Time window expired
clickCount = 1;
firstClickTime = now;
}
} else {
// Different element clicked β reset
lastTarget = currentTarget;
clickCount = 1;
firstClickTime = now;
}
if (clickCount >= rageClickThreshold) {
console.log('π‘ Rage click detected on: ', currentTarget);
clickCount = 0; // reset after detection
lastTarget = null;
}
});
Going back
If a user goes back, they failed to find what they wanted. You can detect that this happened and trigger an experince on the next page.
Highlighting text
If a user copies your product name, what do you think they'll do next? Copy/paste it into amazon, google shopping, ebay, etc. You can capture the moment this happens.
document.addEventListener('selectionchange', () => {
const selection = window.getSelection();
if (selection && selection.toString().trim().length > 0) {
console.log('ποΈ User highlighted text:', selection.toString());
}
});
Losing network connection
You can detect whether or not a user is online, and listen for changes. With many travellers commuting underground in big cities, this could be a reason to prompt users to take a screenshot or bookmark the page and come back to it later.
window.addEventListener('offline', () => {
console.log('π‘ User went offline');
});
And if you want to know when they come back online:
window.addEventListener('online', () => {
console.log('π User is back online');
});
Session duration exceeds threshold
If a session lasts longer than X (your 95% value, found from your Analytics platform), you could trigger a message.
To track this:
When the user loads any page, if there isn't a session timestamp in either sessionstorage or a session cookie, create one
At any time, measure the difference between Date.now() and that timestamp
You could also add a setTimeout for the remaining time, so if the user stays on the page (or browses through a SPA), the timeout will be accurate to the milisecond.