Co to jest exit popup
Exit popup to komunikat wyświetlany w momencie, gdy użytkownik zamierza opuścić stronę. Zamiast losowego momentu — popup pojawia się dokładnie wtedy, gdy klient sięga do paska adresu, przełącza kartę lub przesuwa kursor w górę ekranu.
Cel: nie blokować użytkownika, a dać mu powód do pozostania — czy to niedokończony koszyk, czy zniżka za zapis do newslettera.
Jak działa w Witly
Exit popup automatycznie dobiera treść w zależności od stanu koszyka:
- Nagłówek: „Zapomniałeś o czymś?”
- Lista do 3 nazw produktów z koszyka
- Przycisk „Wróć do koszyka” otwiera sidebar checkout
- Nagłówek: „Zanim wyjdziesz...”
- Formularz zapisu do newslettera
- Obietnica zniżki na pierwsze zakupy
Jak wykrywamy zamiar wyjścia
- Zdarzenie
mouseleavena elemencie<html> - Trigger tylko gdy kursor wychodzi górą (
clientY ≤ 0) - Dodatkowy guard:
relatedTarget === null— potwierdza, że kursor opuścił okno przeglądarki
- Zdarzenie
visibilitychange - Strona staje się
hidden→ uzbrojenie - Powrót do
visiblepo ≥300ms → popup (widoczny dopiero po powrocie)
popstate koliduje z routingiem Gatsby (SPA). Rapid scroll-up odrzuciliśmy po testach — za dużo fałszywych alarmów.Kiedy popup NIE wyskakuje
Exit popup ma 7 guardów, które zapobiegają irytowaniu użytkowników:
Jeden raz na sesję
Ref shownThisSession — po wyświetleniu popup nie pojawi się ponownie do zamknięcia karty.
7 dni ciszy
witly:exit_popup_shown_at w localStorage — jeśli popup był wyświetlony w ciągu ostatnich 7 dni, jest ukryty.
Nigdy po konwersji
witly:exit_popup_converted w localStorage — po zapisie do newslettera popup nigdy więcej się nie pojawi.
Minimum 5 sekund na stronie
Ochrona przed natychmiastowym wyskoczeniem (bounce protection).
Formularz aktywny
Jeśli użytkownik wypełnia input, textarea lub select — popup nie przerywa.
Checkout otwarty
Sidebar checkout lub strona /checkout, /koszyk — popup nie przeszkadza w składaniu zamówienia.
Inny modal otwarty
Login modal lub popup newslettera — nie nakładamy dialogów.
Każdy guard jest sprawdzany przed wyświetleniem popupu. Jeśli którykolwiek zwróci true — popup się nie pojawi.
Flow wyświetlania
Użytkownik zamierza wyjść
Kursor w górę (desktop) lub przełączenie karty (mobile).
Guardy przepuszczają
Wszystkie 7 guardów zwraca false — popup może się wyświetlić.
Popup się pojawia
Wariant dobrany automatycznie: koszyk lub newsletter. Focus przeniesiony do popupu.
Użytkownik decyduje
Klika CTA (wrót do koszyka / zapis) lub zamyka popup (ESC, przycisk, klik w overlay).
Zgodność z WCAG 2.2 AA
- Focus trap — Tab i Shift+Tab krążą wewnątrz popupu, nie uciekają na stronę
- ESC zamyka — standard dla dialogów modalnych
- Powrót focusu — po zamknięciu focus wraca do ostatnio aktywnego elementu
role="dialog",aria-modal="true",aria-labelledby- Animacja wyłączona przy
prefers-reduced-motion: reduce - Przycisk zamknięcia ma
aria-label="Zamknij"
Podsumowanie
Exit popup to mikroaplikacja, która działa w tle — nie wymaga konfiguracji, nie blokuje strony, nie wyskakuje losowo. Jeden popup na sesję, 7 dni ciszy po zamknięciu, nigdy więcej po konwersji. Dwa warianty dopasowane do kontekstu użytkownika.
Chcesz sprawdzić? Skontaktuj się z nami — włączymy exit popup na Twoim sklepie.
Źródła
- Beeketing (2018) — Exit Intent Technology: Definition & How It Works
beeketing.com/blog/exit-intent - W3C WAI — ARIA: dialog role
developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role - Page Visibility API — MDN
developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API