Szablony popupów dla witryn: 16 gotowych projektów do każdego celu

Popup jest tylko tak dobry jak moment, w którym się pojawia. Projekt ma znaczenie, ale o tym, czy konwertuje, czy irytuje, decydują targetowanie, moment wyświetlenia i dopasowanie formatu do komunikatu — cienki pasek dla informacji o dostawie, pełnoekranowa nakładka dla premiery.

Poniżej znajdziesz 16 szablonów popupów dla witryn obejmujących wszystkie popularne formaty: paski, okna modalne, nakładki, powiadomienia, interakcje grywalizacyjne i wskaźniki postępu. Każdy to działający szablon, który możesz skonfigurować — tekst, kolory, targetowanie i częstotliwość — bez pisania kodu. Każdy prowadzi do pełnego przewodnika konfiguracji.

Co decyduje o dobrym projekcie popupu

Zanim przejdziemy do szablonów — kryteria, które odróżniają popup, na który ludzie reagują, od takiego, który zamykają:

• Jedno zadanie. Popup, który prosi o adres e-mail, promuje wyprzedaż i ogłasza nową funkcję, nie osiągnie żadnego z tych celów.
• Format dopasowany do wagi. Mały komunikat, mała powierzchnia. Pełnoekranowe nakładki zostaw na chwile, które naprawdę zasługują na przerwanie.
• Widoczne wyjście. Popup, który trudno zamknąć, zamienia odejście ze strony w urazę, a na urządzeniach mobilnych grozi karą od Google.
• Limit częstotliwości. Drugie wyświetlenie tego samego komunikatu działa gorzej niż pierwsze; piąte wyrządza szkody.
• Targetowanie ważniejsze niż czas. „Po 5 sekundach” to toporna reguła. „Powracający odwiedzający, koszyk powyżej 50 $, nie widział jeszcze tej oferty” to powód, by się pojawić.

Paski: trwałe komunikaty, które nie przeszkadzają

Paski umieszcza się u góry lub u dołu strony, bez zasłaniania treści — to właściwy wybór dla wszystkiego, co ma pozostać widoczne, a nie wymagać decyzji.

Pasek ogłoszeń — cienki pasek na całą szerokość dla komunikatów obowiązujących w całej witrynie: ofert dostawy, wyprzedaży, nowości produktowych lub informacji o zasadach. U góry lub u dołu, przyklejony lub statyczny.

Rotujący pasek ogłoszeń — ten sam pasek z maksymalnie pięcioma zmieniającymi się komunikatami, każdy z własnym linkiem, sterowany licznikiem, z nawigacją kropkami i przejściem przez przenikanie lub przesunięcie. Przydatny, gdy kilka rzeczy konkuruje o jedno miejsce.

Pasek statusu darmowej dostawy — pasek postępu na żywo, który odczytuje wartość z profilu odwiedzającego — „Brakuje Ci 65 $ do darmowej dostawy” — i wypełnia się wraz ze wzrostem koszyka.

Pasek statusu z poziomami — wersja lojalnościowa: pokazuje obecny poziom, postęp do kolejnego i to, co się na nim odblokowuje, na podstawie punktów, wydatków lub zamówień.

Popupy i okna modalne: konkretne prośby

Wyśrodkowane okno modalne — wyśrodkowany popup na ciemnej nakładce, z czterema układami obrazu w jednym szablonie i kontrolą nad położeniem obrazu na urządzeniach mobilnych. Domyślny wybór dla jednej, jasnej oferty.

Nakładka pełnoekranowa — ekran powitalny zajmujący cały widok, z tłem w kolorze, gradiencie lub obrazie na całą powierzchnię. Na premiery, kampanie sezonowe i powitanie przy pierwszej wizycie.

Powiadomienie w rogu — kompaktowa karta powiadomienia łącząca obraz z nagłówkiem, krótkim komunikatem i wezwaniem do działania. Nienachalna — idealna do dowodu społecznego, delikatnych promocji i zachęt do korzystania z funkcji.

Popup z kuponem — kod promocyjny z wyborem stylu odsłaniania: kliknij, by skopiować, kliknij, by odsłonić, lub zawsze widoczny, a do tego obraz, nagłówek, CTA i drobny druk.

Formularz pozyskiwania leadów — zbiera dane odwiedzającego i zapisuje je w profilu Personyze, abyś mógł wrócić z ofertą, segmentować lub personalizować to, co zobaczy dalej. Układ obok siebie lub jeden pod drugim.

Formaty interaktywne i grywalizacyjne

Te formaty wymagają od odwiedzającego działania. Zaangażowanie jest znacznie wyższe — podobnie jak koszt ich nadużywania.

Koło nagród — grywalizacyjne koło nagród z szansami, które kontrolujesz, w układzie pionowym lub pełnoekranowym. To, co wygra każdy odwiedzający, zapisuje się w jego profilu na potrzeby późniejszego targetowania.

Quiz rekomendacyjny — kilka pytań, w których każda odpowiedź głosuje na jedną grupę wyników, zakończonych dopasowaną rekomendacją i wezwaniem do działania.

Obie mechaniki opisujemy dokładniej w przewodniku po marketingu grywalizacyjnym.

Koło nagród w szczegółach

Spośród szablonów interaktywnych to właśnie Koło nagród najbardziej zasługuje na dokładne omówienie — dobrze konwertuje, bo rabat wydaje się zasłużony zamiast podarowany, i zbiera znacznie więcej niż samo wykorzystanie kuponu, jeśli dobrze je skonfigurujesz.

Ustawiasz od czterech do ośmiu segmentów, każdy z etykietą, kolorem, komunikatem o nagrodzie i kodem kuponu. Odwiedzający klika, koło zwalnia, a komunikat zwycięskiego segmentu pojawia się z konfetti lub poświatą.

• Ty kontrolujesz szanse. Każdy segment ma względną wagę szansy wygranej — wagi 35/25/20/12/5 stają się po prostu tymi procentami. Niech duże nagrody będą rzadkie, a małe częste.
• Dodaj pole bez wygranej dla emocji. Nadaj segmentowi etykietę, np. Spróbuj ponownie i zostaw kupon pusty, a będzie liczony jako pole bez wygranej.
• Kontroluj ponowne obroty. Tryb prób to Pojedynczy (jeden obrót, wynik zablokowany), Ponów (ponowny obrót tylko po trafieniu w pole bez wygranej, aż do wygranej) lub Wielokrotny (stała liczba obrotów).
• Osadzone lub pełnoekranowe. Osadź je na stronie lub wyśrodkuj na przyciemnionej nakładce — szanse są takie same w obu przypadkach.
• Zapisz wynik w profilu. To element, którego brakuje większości kół nagród — zwycięska nagroda i kod trafiają do profilu odwiedzającego, więc możesz wrócić z ofertą do osób, które wygrały darmową dostawę, ale nigdy nie złożyły zamówienia, albo wykluczyć tych, którzy już odebrali nagrodę.

Wersja z formularzem, gdy chcesz zdobyć adres e-mail

Standardowe koło celowo nie blokuje obrotu formularzem — nagrodą jest sam obrót, co utrzymuje niski próg wejścia. Gdy lead jest ważniejszy niż zabawa, koło nagród z formularzem stawia przed nim formularz.

Koło jest widoczne od pierwszej chwili, ale wyszarzone i z kłódką, więc odwiedzający widzi dokładnie, za co oddaje swój adres. Po wysłaniu formularz zastępuje podziękowanie, koło się odblokowuje i kręci — a adres e-mail i wygrana nagroda trafiają do tego samego profilu. Jedno zastrzeżenie: gdy ktoś „zapłacił” swoim adresem, pole bez wygranej boli, więc niech takich pól będzie mało albo niech każde pole coś daje.

Pełna konfiguracja jest opisana w dokumentacji szablonu Koło nagród, a obszerniejszy artykuł znajdziesz w poradniku o kołach nagród.

Postęp, status i pilność

Karta statusu — karta mechaniki postępu — pokazuje, jak blisko odwiedzający jest darmowej dostawy lub nagrody, jako wyśrodkowana karta lub popup zasilany wartością z profilu na żywo.

Karta statusu z poziomami — ta sama karta pokazująca postęp w poziomach lojalnościowych: Brąz, Srebro, Platyna, z informacją, ile brakuje do kolejnego poziomu.

Szablony odliczania — trzy warianty — karta, pasek i pasek wydarzenia — korzystające z jednego silnika licznika, na koniec wyprzedaży, wzrost ceny lub początek wydarzenia.

Odliczanie z postępem wydarzenia — pasek, który wypełnia się wraz ze zbliżaniem się daty, zamiast opierać się tylko na liczbach, z przyciskiem rejestracji. Stworzony na webinary, premiery i sesje na żywo.

Na stronie: sekcja hero

Slider hero — rotujący baner hero z maksymalnie czterema slajdami, każdy z własnym obrazem, nagłówkiem, podtytułem i przyciskiem — tekst obok obrazu lub na tle na całą powierzchnię.

Przykłady popupów według celu

Jeśli wiesz, jaki efekt chcesz osiągnąć, to najkrótsza droga do formatu:

• Powiększ listę mailingową — Formularz pozyskiwania leadów, Koło nagród, które prosi o adres po wygranej, albo Koło nagród z formularzem z prośbą przed obrotem.
• Zwiększ średnią wartość zamówienia — Pasek statusu darmowej dostawy lub Karta statusu.
• Wypromuj akcję — Popup z kuponem, z odliczaniem, jeśli termin jest prawdziwy.
• Ogłoś coś w całej witrynie — Pasek ogłoszeń lub jego rotująca wersja przy kilku komunikatach.
• Pomóż odwiedzającym wybrać — Quiz rekomendacyjny.
• Zwiększ liczbę zapisów na wydarzenia — Odliczanie z postępem wydarzenia.
• Zatrzymuj i nagradzaj — Pasek lub Karta statusu z poziomami.

Nie musisz w ogóle wybierać szablonu

Wszystko powyżej zakłada, że przeglądasz bibliotekę i wybierasz. Jest szybsza droga: opisz popup, którego potrzebujesz, i pozwól agentowi AI go zbudować. Twoja praca zmienia się wtedy z wybierania szablonu i zmiany jego stylu na przegląd czegoś, co jest już gotowe.

Trzy rzeczy sprawiają, że to coś więcej niż generator szablonów:

• Stylizuje na podstawie Twojej prawdziwej witryny. Przed zbudowaniem agent skanuje Twoje strony pod kątem kolorów marki, czcionek, stylu przycisków i tonu tekstów. Efekt wygląda jak Twoja witryna, a nie jak szablon doklejony na wierzch — i odwiedzający nie pozna, że został wygenerowany.
• Zwykłe słowa stają się prawdziwym targetowaniem. Powiedz „nowi odwiedzający na urządzeniach mobilnych, którzy dotarli do strony z cennikiem”, a zamieni to w prawdziwe reguły targetowania, a potem odczyta Ci skompilowane reguły, abyś mógł je sprawdzić.
• Nic nie trafia do ruchu na żywo. Wszystko, co zbuduje, powstaje w środowisku staging — widocznym tylko dla odwiedzających z adresu IP stagingu. Podgląd sprawdzasz na prawdziwych stronach, a publikujesz samodzielnie.

Jak to wygląda w praktyce

Możesz zacząć z dowolnej strony. „Zbuduj popup z ofertą powitalną dla nowych odwiedzających” daje gotowy popup w stylu Twojej marki z przypisanym targetowaniem. Możesz też wybrać szablon z powyższej biblioteki i pozwolić agentowi dopasować go do marki, zachowując Twoją ofertę. W obu przypadkach wprowadzasz zmiany w rozmowie — „zrób z tego pasek”, „spróbuj innego koloru”, „uwzględnij też powracających odwiedzających” — bez otwierania panelu CSS.

Działa to też w drugą stronę: zapytaj „co powinienem poprawić w tym tygodniu?” i dostaniesz uszeregowane możliwości dla wszystkich stron i kampanii, każdą z akcją wykonywaną jednym dotknięciem. W witrynie liczącej kilkaset stron wiedza o tym, gdzie warto dodać popup, to zwykle trudniejsza połowa zadania.

Agent działa w panelu Personyze — szczegóły: agent personalizacji AI — a te same możliwości są dostępne z poziomu Claude lub ChatGPT, jeśli wolisz pracować w asystencie, którego już używasz. Więcej szczegółów w przewodniku po agencie marketingowym AI.

Wolisz pracować w Claude? Zainstaluj konektor z katalogu: Personyze w katalogu Claude.

Dobre praktyki dotyczące popupów

• Szanuj urządzenia mobilne. Google traktuje natrętne interstitiale na urządzeniach mobilnych jako problem rankingowy. Paski i powiadomienia są tam bezpieczniejsze niż nakładki.
• Wyzwalaj na podstawie intencji, nie tylko czasu. Zamiar wyjścia, głębokość przewinięcia, wartość koszyka i powtórne wizyty są lepsze niż arbitralne opóźnienie.
• Wyciszaj po wykonaniu akcji. Ktoś, kto się zapisał, nie powinien już nigdy zobaczyć popupu zapisu.
• Testuj ofertę przed projektem. Zmiana zachęty wpływa na konwersję znacznie mocniej niż zmiana koloru przycisku.
• Zapisuj wynik. Popup, który rejestruje preferencję i zapisuje ją w profilu odwiedzającego, przynosi korzyści długo po zakończeniu kampanii.

Szablony popupów: FAQ

Ile popupów to za dużo?

Jedna aktywna prośba na wizytę to bezpieczna zasada. Trwały pasek i jeden interaktywny popup mogą współistnieć, bo pasek nie wymaga decyzji, ale dwie konkurujące nakładki będą się wzajemnie osłabiać.

Czy popupy szkodzą SEO?

Tylko wtedy, gdy są natrętne na urządzeniach mobilnych. Paski, powiadomienia i popupy wyświetlane po rzeczywistym zaangażowaniu nie są karane. Więcej na ten temat w artykule personalizacja a SEO.

Czy mogę edytować te szablony?

Tak — każdy jest punktem wyjścia. Tekst, kolory, układ, grafika, wyzwalacze, reguły targetowania i częstotliwość są konfigurowalne, a bazowy HTML i CSS pozostają edytowalne, jeśli chcesz pójść dalej.

Czym różni się popup od paska ogłoszeń?

Popup nakłada się na stronę i przerywa wizytę, prosząc o decyzję. Pasek zajmuje wąski obszar przy krawędzi widoku i nie przeszkadza, dlatego nadaje się do stałych komunikatów, a nie jednorazowych próśb.

Czy AI może zbudować popup za mnie?

Tak. Opisz, czego chcesz, a agent AI Personyze to zbuduje, najpierw skanując Twoją witrynę pod kątem kolorów marki, czcionek, stylu przycisków i tonu, aby wynik pasował do Twoich stron. Targetowanie opisane zwykłym językiem zostaje skompilowane w prawdziwe reguły i odczytane Ci z powrotem, a wszystko powstaje w środowisku staging, więc ruch na żywo pozostaje nienaruszony, dopóki nie opublikujesz.

Jak Koło nagród decyduje, co ktoś wygra?

Każdy z czterech do ośmiu segmentów ma względną wagę szansy wygranej, a wagi są sumowane, aby wyliczyć rzeczywiste szanse — wagi 35, 25, 20, 12 i 5 stają się więc tymi procentami. Segment z etykietą w rodzaju Spróbuj ponownie i bez kuponu działa jako pole bez wygranej. Zwycięska nagroda i kod zapisują się w profilu odwiedzającego na potrzeby późniejszego targetowania.

Zacznij teraz

Wszystkie 16 szablonów możesz skonfigurować i targetować bez kodu. Umów demo lub zobacz plany.

Zbuduj dowolny z nich, po prostu prosząc: agent personalizacji AI.

Powiązane artykuły

• Marketing grywalizacyjny — mechaniki stojące za szablonami interaktywnymi.
• Koła nagród typu „zakręć i wygraj” — koło w szczegółach.
• Paski darmowej dostawy i poziomów lojalnościowych — sposób na wyższą wartość koszyka.
• Popupy i banery — jak działają targetowanie i częstotliwość.