Popup

Scena typu Popup renderuje się jako overlay nad stroną. To domyślny typ sceny i to po nią sięgniesz zawsze, gdy kampania ma przerwać odwiedzającemu czynność (ogłoszenie wyprzedaży, informacja o cookie, prośba o zapis do newslettera). Wybrany przy tworzeniu wariant wyświetlania decyduje gdzie na ekranie pojawia się popup i jak się animuje.

Warianty wyświetlania

Dziś dostępnych jest dziewięć wariantów. Wszystkie korzystają z tej samej maszynerii płótna / warstw / osi czasu / targetowania — różnią się tylko pozycjonowaniem, animacją i zachowaniem przy zamykaniu.

modal — domyślny. Renderuje się wycentrowany w viewport nad przyciemnionym overlayem. Kliknięcie na overlay (jeśli Close on overlay click jest włączony) albo X zamyka popup. Wjeżdża fade’em.

Stosuj gdy: prompt potrzebuje pełnej uwagi — start wyprzedaży, formularze newslettera, age gate, post-konwersyjne podziękowanie. Nie używaj, jeśli odwiedzający jest w środku flow na koszyku albo checkoucie.

banner_top / banner_bottom — pasek pełnej szerokości przyklejony do górnej albo dolnej krawędzi viewport. Shell zachowuje swój zaprojektowany wymiar; pasmo wokół niego jest puste. Wjeżdża z góry (top) albo z dołu (bottom).

Stosuj gdy: informacje wysyłkowe, progi darmowej wysyłki, cookie bannery, niskoobciążające ogłoszenia, które mają być widoczne bez przyciemniania reszty strony.

Slide-in — left / right

slide_in_left / slide_in_right — pasek pełnej wysokości na lewej albo prawej krawędzi. Shell zachowuje zaprojektowany wymiar wycentrowany pionowo wewnątrz. Wjeżdża z boku.

Stosuj gdy: drugorzędne prompty, które mają być mniej inwazyjne niż modal, ale bardziej widoczne niż toast. Zapisy do newslettera, kółka “spin to win”, lead magnety.

Toast — cztery rogi

toast_top_right / toast_top_left / toast_bottom_right / toast_bottom_left — mały popup przyklejony do rogu, 20 px od krawędzi. Bez ograniczenia wysokości; shell dostosowuje się do zawartości. Wjeżdża od najbliższej krawędzi.

Stosuj gdy: lekkie komunikaty — kody kuponów, alerty o stanie magazynu, social proof “X osób właśnie kupiło to”. Toasty współistnieją ze stroną (bez overlay, niska waga wizualna), więc odwiedzający może dalej przeglądać.

Mechanizmy zamykania

Każdy wariant popupu wystawia trzy niezależnie włączane mechanizmy zamykania (konfigurowane w zakładce Overview, karta Frequency & dismissal):

Show close (X) button — mały X w rogu shella. Zalecany ze względu na dostępność.
Close on overlay click — kliknięcie poza shellem na przyciemnionym overlay zamyka popup. Istotne tylko dla modal (inne warianty nie mają overlay do kliknięcia).
Show permanent dismiss button — button “Don’t show again” (.p2lab-stage__permanent). Wymagany gdy częstotliwość to Until permanently dismissed; wyłączony (i ignorowany) gdy częstotliwość to Always show.

Kliknięcie X albo overlay rejestruje event close. Kliknięcie permanent dismiss rejestruje event permanent_dismiss i zapisuje flagę suppression po stronie klienta.

Jak warianty wpływają na storefront

We wszystkich wariantach popup renderuje się wewnątrz tego samego rootu .p2lab-stage z modifierem klasy specyficznym dla wariantu (.p2lab-stage--modal, .p2lab-stage--banner_top, itd.). SCSS pluginu obsługuje pozycjonowanie i animację wejścia per modifier. Skalowanie shella (transform: scale) jest stosowane tylko do wariantu modal — warianty banner / slide-in / toast zachowują shell w zaprojektowanych wymiarach pikselowych i polegają na max-width: 100vw, żeby zmieścić się w viewport.

Wybór właściwego wariantu — szybki przewodnik

Cel	Wariant
Informacja cookie / prywatności	`banner_top` lub `banner_bottom`
Duże ogłoszenie przerywające przeglądanie	`modal`
Newsletter / lead magnet bez przyciemniania	`slide_in_*`
Kupon po akcji odwiedzającego	`toast_*`
Social proof / activity feed	`toast_bottom_*`
Exit-style prompt (obecnie przez długie opóźnienie / scroll)	`modal`

Powiązane

Edytor → Stage Settings — szerokość/wysokość shella, padding, ramka, intensywność parallax (wszystkie warianty).
Targetowanie → Triggers — kiedy każdy popup się wyzwala.
Targetowanie → Frequency — jak często ten sam odwiedzający go widzi.
Storefront → Customizacja CSS — nadpisywanie stylów .p2lab-stage--<variant> z poziomu motywu.