Skuteczna komunikacja na stronie internetowej wymaga znalezienia równowagi między doświadczeniem użytkownika a celami biznesowymi. Źle zaplanowane okna modalne mogą zaburzać nawigację, ale strategicznie zaprojektowane pop-upy pozostają kluczowym narzędziem do pozyskiwania leadów, promowania ofert i angażowania osób odwiedzających stronę. Zbieranie adresów e-mail i dzielenie się ważnymi informacjami nie musi być skomplikowane. Konfigurując pop-up w Positive User, Twój zespół może z łatwością wyświetlać odpowiednią wiadomość właściwym osobom w trakcie ich wizyty na stronie.
W Positive User znajdziesz dwie możliwości tworzenia pop-upów: Pop-up Builder oraz Pop-up Code Editor.
Ta opcja pozwala na tworzenie podstawowych pop-upów na bazie predefiniowanych szablonów. Możesz spersonalizować treść i wgrać własne grafiki.
Przejdź do „Website Experience" → „Pop-ups" → „New pop-up".
W lewym górnym rogu sekcji wybierz między „Pop-up forms" a „Redirect pop-ups".
Wybierz jeden z szablonów, najedź na niego kursorem i wybierz „Simple Builder".
Wpisz nazwę pop-upu i dodaj opis dla członków zespołu.
Kliknij „Create". Teraz znajdujesz się w panelu, w którym możesz zmieniać treść pop-upu.
Główna sekcja pokazuje podgląd wybranego szablonu, w którym wszystkie zmiany są odzwierciedlane w czasie rzeczywistym. Szablon możesz w każdej chwili zmienić, klikając przycisk „Open templates" w prawym górnym rogu edytora.
W lewym górnym rogu możesz przełączać się między widokiem mobilnym a desktopowym – dzięki temu idealnie dopasujesz wygląd pop-upu.
Po prawej stronie znajdują się sekcje umożliwiające zmianę poszczególnych elementów treści i sposobu wyświetlania pop-upu.
Content
W tej sekcji ustalasz główny przekaz swojego pop-upu.
Header: To Twój główny nagłówek. Wykorzystaj to miejsce na najważniejszą ofertę lub ogłoszenie (np. „Zapisz się do newslettera" lub „Sprawdź nową kolekcję").
Content: To pole na tekst uzupełniający. To świetne miejsce, aby dodać więcej szczegółów lub wyjaśnić, dlaczego warto kliknąć w wezwanie do działania.
Buttons style
Przycisk to główny punkt interakcji w Twoim pop-upie. Powinien być czytelny i wizualnie wyróżniający się.
Button: Wpisz tekst, który pojawi się na samym przycisku. Najlepiej sprawdzają się krótkie, zachęcające do działania etykiety, takie jak „Zapisz się teraz" lub „Odbierz zniżkę".
Text color: Wybierz kolor etykiety wewnątrz przycisku. Zadbaj o wystarczający kontrast względem tła, aby tekst był łatwy do odczytania.
Background color: Wybierz główny kolor przycisku. Zalecamy wybór koloru zgodnego z brandingiem, co pozwala zachować spójny wygląd w obrębie całej strony.
Links style
W zależności od szablonu możesz zaoferować osobom odwiedzającym stronę dodatkowe opcje, takie jak link do strony „Pomoc" lub informacji kontaktowych jako linki drugorzędne.
Text: Wpisz nazwę linku (np. „O nas" lub „Polityka prywatności").
Open in: Zdecyduj, czy link ma się otwierać w nowej, czy w bieżącej karcie.
Text color: Linki możesz stylizować osobno. Często dobrze sprawdza się subtelny kolor, dzięki czemu nie odciągają uwagi od głównego przycisku.
Images
Elementy wizualne spajają cały pop-up i sprawiają, że wygląda on jak naturalna część Twojej strony.
Background image: Główna grafika pop-upu.
Backdrop color: Kontroluje „nakładkę", która przyciemnia stronę w momencie pojawienia się pop-upu. Możesz dostosować wartości RGBA, aby tło było bardziej lub mniej przezroczyste, utrzymując całą uwagę na Twoim komunikacie.
Background color: Ustawia bazowy kolor pop-upu w obszarze, gdzie znajduje się tekst i pola formularza.
Szablony zwykle zawierają rekomendacje dotyczące optymalnego rozmiaru grafiki w tle.
Inputs
Jeśli tworzysz pop-up z formularzem, ta sekcja pozwala określić, jakie informacje chcesz zbierać od osób odwiedzających stronę. Każde dodane tutaj pole zostanie bezpośrednio przypisane do danych w profilu kontaktu.
Label: Tekst pojawiający się bezpośrednio nad polem formularza, informujący użytkownika, co ma wpisać.
Placeholder: „Widmowy" tekst wewnątrz pola (np. „[email protected]"), który znika, gdy użytkownik zacznie pisać.
Atrybut: To kluczowy krok. Określa, do którego pola w bazie Positive User mają być zapisywane informacje (np. „Email" lub „Imię").
Required?: Zaznacz to pole, jeśli musi ono zostać wypełnione przed wysłaniem formularza.
W zależności od szablonu może obowiązywać limit liczby pól tekstowych, które możesz dodać. Jeśli osiągniesz limit, nadal możesz dodawać checkboxy, np. na zgodę na newsletter.
Gdy Twój pop-up jest gotowy, kliknij „Save and exit". Zostaniesz przekierowany do listy swoich pop-upów.
Pamiętaj, że aby aktywować pop-up, musisz teraz utworzyć dla niego automatyzację.
Możesz też budować spersonalizowane pop-upy bezpośrednio w kodzie HTML. Nasz edytor kodu to odpowiednie miejsce, by to zrobić. Możesz tworzyć pop-up od zera lub modyfikować istniejące szablony.
Ta opcja wymaga znajomości HTML.
Przejdź do „Website Experience" → „Pop-ups" → „New pop-up".
W tym miejscu możesz zacząć od zera, klikając przycisk „Code Editor" w prawym górnym rogu sekcji, lub edytować jeden z istniejących szablonów. Aby to zrobić, w lewym górnym rogu sekcji wybierz typ („Pop-up forms" lub „Redirect pop-ups"), wybierz jeden z szablonów, najedź na niego kursorem i wybierz „Code Builder".
Teraz znajdujesz się w panelu, w którym możesz dostosować pop-up. (Lub stworzyć go od zera, jeśli w poprzednim kroku wybrałeś od razu „Code editor").
Pełna kontrola nad HTML i CSS
Lewy panel to w pełni funkcjonalny edytor, w którym możesz zdefiniować strukturę i wygląd swojego pop-upu. Możesz dostosować strukturę formularza, dodać niestandardowe wrappery lub włączyć dodatkowe elementy, takie jak ikony czy specjalistyczne bloki tekstu, których nie ma w standardowych szablonach.
Nie zmieniaj id przycisku w pop-upach typu redirect! id powinno pozostać jako id=submitButton lub takie, jakie ma dany przycisk. Jeśli je zmienisz, nie będą generowane statystyki kliknięć ani CTR%.
Insert Field
Jedną z najpotężniejszych funkcji edytora kodu jest lista rozwijana Insert field. Pozwala ona połączyć Twój spersonalizowany projekt z bazą danych Positive User.
Dynamiczne placeholdery: Zamiast ręcznie kodować pola formularza, użyj tego menu, aby wstawić placeholdery dla konkretnych atrybutów (np. „Email", „Imię" czy „Numer telefonu").
Atrybuty niestandardowe: Jeśli stworzyłeś niestandardowe atrybuty (takie jak „Poziom lojalności" czy „Ulubiona kategoria"), znajdziesz je tutaj i możesz dodać do formularza. Gdy kontakt je wypełni, dane zostaną automatycznie zapisane w jego profilu.
Toggle Preview
Użyj tego przycisku, aby przełączać się między kodem a podglądem pop-upu na żywo. Dzięki temu na bieżąco wyłapiesz błędy w stylizacji lub problemy z wyrównaniem.
Gdy Twój pop-up jest gotowy, kliknij „Save and exit". Zostaniesz przekierowany do listy swoich pop-upów.
Teraz musisz utworzyć scenariusz automatyzacji, aby aktywować swój pop-up.
Masz już przygotowany pop-up. Aby wyświetlić go na stronie, musisz utworzyć automatyzację w sekcji „Automations".
Moduł „Show a pop-up" odnosi się do wszystkich pop-upów utworzonych w „Website Experience" → „Pop-ups".
Przykładowa automatyzacja wygląda tak:
Sprawdź artykuły o automatyzacjach, aby zbudować skuteczny scenariusz dla osób odwiedzających Twoją stronę.
Rodzaje pop-upów [LINK]
