Typical scenario: an e‑commerce store with 2,000 visitors per day and a conversion rate of 0.3%. After implementing behavioral pop-ups with exit intent and scroll depth, conversion rose to 1.2%. Many developers make the mistake of showing a pop-up by timer—this annoys 70% of users. We use a combination of 4–5 behavioral pop-ups that take context into account. Our engineers are JavaScript certified with 5 years of experience and have completed over 150 successful projects. We guarantee quality and 30 days of support.
How to configure an exit intent trigger without false positives?
The most effective trigger for landing pages is exit intent. It fires when a user sharply moves the cursor toward the top edge of the screen. The key parameter is the sensitivity threshold: 10 pixels from the edge and upward velocity >50 px/ms. Without this filter, the pop-up will show on every random movement. For mobile devices, exit intent does not work—there we use the popstate event on the back button.
class ExitIntentDetector {
private threshold = 10;
private sensitivity = 50;
private triggered = false;
private lastY = 0;
private lastTime = 0;
constructor(private onExit: () => void) {
document.addEventListener('mousemove', this.handleMouseMove.bind(this));
// Mobile fallback
history.pushState({ popup: true }, '');
window.addEventListener('popstate', () => {
if (!this.triggered) {
this.triggered = true;
this.onExit();
history.pushState({ popup: true }, '');
}
});
}
private handleMouseMove(e: MouseEvent): void {
if (this.triggered) return;
const now = Date.now();
const deltaY = e.clientY - this.lastY;
const deltaTime = now - this.lastTime;
const velocityY = deltaY / deltaTime;
if (e.clientY < this.threshold && velocityY < -this.sensitivity) {
this.triggered = true;
this.onExit();
}
this.lastY = e.clientY;
this.lastTime = now;
}
reset(): void {
this.triggered = false;
}
}
const detector = new ExitIntentDetector(() => {
showPopup('exit_offer');
});
Why is it important to manage pop-up queue?
If you do not control the display, a user will see two or three windows at the same time—this is annoying and reduces conversion. The PopupManager state manager solves the problem: it stores shown window markers in localStorage and blocks simultaneous opening. Additionally, a cooldown is set—default 7 days—after which the window can appear again.
class PopupManager {
private shown = new Set<string>(
JSON.parse(localStorage.getItem('shown_popups') ?? '[]')
);
private currentPopup: string | null = null;
canShow(id: string, cooldownDays = 7): boolean {
if (this.currentPopup) return false;
const key = `popup_shown_${id}`;
const lastShown = localStorage.getItem(key);
if (!lastShown) return true;
const daysSince = (Date.now() - parseInt(lastShown)) / 86400000;
return daysSince >= cooldownDays;
}
show(id: string): void {
if (!this.canShow(id)) return;
this.currentPopup = id;
localStorage.setItem(`popup_shown_${id}`, Date.now().toString());
this.shown.add(id);
localStorage.setItem('shown_popups', JSON.stringify([...this.shown]));
document.getElementById(`popup-${id}`)?.classList.add('popup--visible');
document.body.classList.add('popup-open');
}
close(id: string): void {
this.currentPopup = null;
document.getElementById(`popup-${id}`)?.classList.remove('popup--visible');
document.body.classList.remove('popup-open');
}
}
const popups = new PopupManager();
Trigger comparison
Exit intent by conversion (up to 5%) outperforms timer pop-ups (0.5-1%) by 5 times. Scroll depth is also 3-4 times more effective than timer on long pages.
| Trigger | Implementation complexity | Effectiveness | Typical use |
|---|---|---|---|
| Exit intent | Medium | High | Discount offer on exit |
| Scroll depth | Low | Medium | Show content after reading |
| Time on page | Low | Low | General offer |
| Inactivity | Medium | Medium | Recapture attention |
| Element visibility | Medium | High | Contextual hints |
Step-by-step implementation process
| Stage | Duration | Result |
|---|---|---|
| Behavior analytics | 1-2 days | Trigger and segment map |
| Trigger development | 2-4 days | Working exit intent, scroll depth detectors, etc. |
| Pop-up layout & design | 1-2 days | Responsive mockups |
| CRM/ESP integration | 1-2 days | Automatic lead transfer |
| A/B testing | 2-3 days | Conversion optimization |
| Documentation & training | 1 day | Instructions for the team |
What's included in the work
- Analytics: heatmaps, segmentation, trigger selection for your audience.
- Development: all triggers (exit intent, scroll depth, element visibility, inactivity timer) with PopupManager.
- Design: responsive mockups in your site style—up to 5 variants.
- Integration: CRM, ESP, analytics systems (Google Analytics, Yandex.Metrica).
- Tracking: automatic recording of impressions, clicks, closes in dataLayer.
- Documentation: trigger descriptions, code, marketer instructions.
- Support: 30 days after launch—fixes, fine-tuning, consultations.
How A/B testing increases conversion?
We run A/B tests: compare a timer pop-up versus a behavioral one. Result—behavioral gives +180% conversion with the same traffic. We test different offers, headlines, colors. Order a pop-up system implementation with A/B testing.
How to configure scroll depth and element visibility
These triggers require minimal code but give a noticeable conversion boost on pages with long content.
function onScrollDepth(percentage: number, callback: () => void): () => void {
let fired = false;
const handler = () => {
if (fired) return;
const scrolled = window.scrollY + window.innerHeight;
const total = document.documentElement.scrollHeight;
if (scrolled / total >= percentage / 100) {
fired = true;
callback();
}
};
window.addEventListener('scroll', handler, { passive: true });
return () => window.removeEventListener('scroll', handler);
}
onScrollDepth(70, () => showPopup('mid_page_offer'));
function onElementVisible(selector: string, callback: () => void): void {
const el = document.querySelector(selector);
if (!el) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
observer.disconnect();
callback();
}
},
{ threshold: 0.5 }
);
observer.observe(el);
}
onElementVisible('#pricing-section', () => showPopup('pricing_helper'));
For more details, see IntersectionObserver.
Impression tracking
Each pop-up must record impressions, clicks, and closes. We integrate this via gtag or dataLayer events without additional code—tracking is automatically connected to PopupManager. Get a consultation to assess your project. Contact us for further details.
Economic effect
Replacing timer pop-ups with behavioral ones increases conversion by 3–5 times with the same traffic costs. Payback occurs within the first week due to reduced bounce rate and increased leads. We implement a turnkey system in 3–5 days.
What typical mistakes are made during configuration?
- Showing pop-up without cooldown—user sees the same thing on every visit.
- Ignoring mobile devices—exit intent doesn't work; need popstate.
- Lack of a queue manager—two pop-ups simultaneously.
- Too aggressive exit intent—fires on normal scrolling.
Avoiding these mistakes will yield conversion growth without hurting UX. We will assess your project for free.