Tworzenie pop-upów z użyciem własnego kodu HTML daje Twojemu zespołowi pełną swobodę kreatywną, dzięki czemu możesz dopasować pop-upy do dokładnych wytycznych brandowych i wymagań projektowych. Jeśli preferujesz wizualną alternatywę bez kodu, możesz zaprojektować pop-upy za pomocą kreatora wizualnego w sekcji „Doświadczenia na stronie”.
Podczas korzystania z własnego kodu HTML przestrzeganie zasad opisanych w tym artykule zapewnia poprawne przypisanie danych kontaktowych do Twojego workspace’u oraz dokładne rejestrowanie statystyk skuteczności pop-upów (w tym interakcji: wyświetleń, kliknięć i wysyłań).
Podstawowe pola input w pop-upach zbierają kluczowe dane kontaktowe, takie jak imiona, adresy e-mail czy numery telefonów. Aby zapewnić poprawne mapowanie danych w Positive User, atrybut name każdego pola input musi odpowiadać nazwie odpowiedniego atrybutu kontaktu. Positive User obsługuje standardowe atrybuty takie jak „Imię”, „Nazwisko” czy „Numer telefonu”, a także atrybuty własne zdefiniowane pod konkretne potrzeby biznesowe, jak zgody marketingowe czy statystyki e-commerce. Określenie typu pola (np. text, email lub number) oraz dodanie opisowego tekstu placeholder ułatwia kontaktom uzupełnianie formularza i zapewnia dokładne zbieranie danych.
Wymagane pola input zapewniają, że kontakty podadzą kluczowe informacje przed wysłaniem formularza pop-up. Dodaj atrybut required w elemencie input, aby włączyć walidację na poziomie przeglądarki, która wymusi na kontakcie uzupełnienie pola przed wysłaniem. Połączenie tego z czytelnym tekstem placeholder lub etykietami zwiększa użyteczność.
Przykład: pole wymagane
<input type="email" name="email" placeholder="Wpisz swój adres e-mail" required>W tym przykładzie:
type="email" zapewnia walidację pola jako adres e-mail.
name="email" mapuje pole do atrybutu e-mail kontaktu w Twoim workspace Positive User.
„required” sprawia, że pole musi zostać uzupełnione przed wysłaniem formularza.
placeholder="Wpisz swój adres e-mail" ułatwia kontaktowi zrozumienie, co ma wpisać.
Opcjonalne pola input uzupełniają pola wymagane, umożliwiając kontaktom podanie dodatkowych, nieobowiązkowych danych. Aby skonfigurować pole opcjonalne, dodaj atrybut name do mapowania danych, ale pomiń atrybut required.
Przykład: konfiguracja wymaganych i opcjonalnych pól input
<input type="email" name="email" placeholder="Wpisz swój adres e-mail" required>
<input type="text" name="imię" placeholder="Wpisz swoje imię (opcjonalnie)">W tym przykładzie:
Pole „email” jest obowiązkowe, ponieważ zawiera atrybut required.
Pole „imię” jest opcjonalne, ponieważ atrybut required został pominięty.
name="email" oraz name="imię" zapewniają, że dane trafią do właściwych atrybutów w Positive User.
Pojedynczy checkbox jest często używany do wyborów binarnych, np. udzielenia zgody. Użyj <input type="checkbox"> i zmapuj atrybut name do atrybutu kontaktu w Positive User. Gdy pole jest zaznaczone, do Positive User wysyłana jest wartość „true”. Umieszczenie elementu input wewnątrz znacznika <label> sprawia, że tekst staje się klikalny, co poprawia użyteczność.
Przykład: checkbox zgody na newsletter
<label>
<input type="checkbox" name="newsletter_consent">
Zgadzam się na otzrymywanie newslettera.
</label>W tym przykładzie:
type="checkbox" tworzy pojedynczy checkbox.
name="newsletter_consent" mapuje pole do atrybutu kontaktu „newsletter_consent”.
Element <label> sprawia, że tekst staje się klikalny, co poprawia użyteczność.
Pola o ustalonych opcjach umożliwiają kontaktom wybór jednej lub więcej predefiniowanych opcji z listy, co idealnie sprawdza się przy zbieraniu danych o zainteresowaniach lub preferencjach komunikacyjnych. Użyj wielu elementów <input type="checkbox">, które mają ten sam atrybut name, dzięki czemu wszystkie zaznaczone wartości zostaną zmapowane do jednego atrybutu kontaktu. Zanim dodasz je do swojego kodu, przejdź do „Ustawienia workspace” → „Atrybuty kontaktu”, aby utworzyć atrybut własny i zdefiniować jego opcje. Wartość atrybutu value w Twoim kodzie HTML musi dokładnie odpowiadać nazwie opcji utworzonej w ustawieniach workspace.
Przykład: konfiguracja pól wielokrotnego wyboru
<p>Jaki temat Cię interesuje?</p>
<label>
<input type="checkbox" name="Zainteresowania" value="aktualizacje_produktowe">
Aktualizacje Produktowe
</label>
<br>
<label>
<input type="checkbox" name="Zainteresowania" value="miesieczny_newsletter">
Miesięczny Newsletter
</label>
<br>
<label>
<input type="checkbox" name="Zainteresowania" value="oferty_specjalne">
Oferty Specjalne
</label>W tym przykładzie:
type="checkbox" tworzy zaznaczalne pole dla każdej opcji.
name="Zainteresowania" jest takie samo dla wszystkich trzech pól. Grupuje je razem, dzięki czemu wszystkie zaznaczone wartości zostają zapisane w atrybucie kontaktu „zainteresowania”.
value="..." określa unikalny tekst, który zostanie zapisany dla każdej opcji po jej zaznaczeniu. Ważne: wartości podane w atrybucie value (np. „aktualizacje_produktowe”) muszą zostać wcześniej utworzone jako opcje dla odpowiedniego atrybutu własnego (np. „Zainteresowania”) w Twoim workspace. Wartość w kodzie HTML musi dokładnie odpowiadać opcji utworzonej w aplikacji.
Element <label> zwiększa użyteczność, umożliwiając kontaktom kliknięcie w tekst w celu zaznaczenia odpowiedniego checkboxa.
Skonfiguruj przyciski wysyłania, aby przetwarzać zgłoszenia formularzy i zbierać istotne statystyki dotyczące skuteczności Twoich pop-upów.
Przypisz id="submitButton" do elementu button wewnątrz znacznika <form>. To konkretne ID jest kluczowe dla wyzwalania przekierowań oraz zbierania statystyk zgłoszeń pop-upów w Positive User. Pozwala walidować dane wejściowe, mapować atrybuty, śledzić statystyki zgłoszeń oraz uruchamiać zautomatyzowane scenariusze.
Przykład: formularz z polem input i przyciskiem wysyłania
<form>
<input type="email" name="email" placeholder="Wpisz swój adres e-mail" required>
<button id="submitButton">Submit</button>
</form>Skonfiguruj przycisk wysyłania, który przekierowuje kontakty do innej strony, używając znacznika kotwicy <a> z id="submitButton". To konkretne ID jest kluczowe, ponieważ wyzwala przekierowanie, jednocześnie umożliwiając Positive User zbieranie statystyk zgłoszeń pop-upów. Użyj atrybutu href w znaczniku <a>, aby wskazać docelowy URL — dzięki temu takie ustawienie idealnie nadaje się do kierowania kontaktów na strony podziękowania lub oferty specjalne po kliknięciu.
Jeśli Twój przycisk zawiera złożone zagnieżdżone elementy (np. stylizowany tekst lub obrazy), upewnij się, że tylko sam znacznik <a> odbiera zdarzenie kliknięcia. Zastosuj pointer-events: none; w CSS do wszystkich elementów wewnątrz znacznika <a>, aby elementy wewnętrzne nie blokowały przekierowania ani śledzenia kliknięć.
Przykład: konfiguracja przycisku przekierowującego z zagnieżdżonymi elementami
<a id="submitButton" href="https://example.com/thank-you">
<b>Click here to continue</b>
<img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
#submitButton * {
/* Zapobiega to przejęciu zdarzenia kliknięcia przez jakikolwiek element znajdujący się wewnątrz linku. */
pointer-events: none;
}
</style>Umożliwia kontaktom sprawne zamknięcie pop-upów bez wysyłania danych.
Dodaj atrybut data-dismiss="true" do dowolnego prawidłowego elementu HTML, np. do ikony zamykania <span> lub <svg>. Kliknięcie takiego elementu sygnalizuje Positive User, aby zamknąć pop-up i zarejestrować akcję zamknięcia.
Przykład: konfiguracja przycisku zamykania
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Domyślnie overlay (obszar tła poza treścią pop-upu) również może zamknąć pop-up. Jeśli jednak kontakt przypadkowo kliknie wewnątrz pop-upu, a kliknięcie trafi w obszar overlay w ramach iframe, może to niezamierzenie zamknąć pop-up. Aby temu zapobiec, możesz dodać skrypt, który zapewni, że tylko bezpośrednie kliknięcia w tło overlay wywołają akcję zamknięcia.
// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
// Only close if clicking directly on the overlay background
if (event.target === this) {
// Find and click the close button to trigger User.com's close function
const closeBtn = document.querySelector('[data-dismiss="true"]');
if (closeBtn) {
closeBtn.click();
}
}
});Jedyną prawidłową metodą zamknięcia pop-upu w Positive User jest użycie atrybutu data-dismiss="true". Nigdy nie należy pisać własnego kodu JavaScript, aby ręcznie ukryć pop-up.
Ponieważ pop-up jest renderowany wewnątrz elementu <iframe>, który pokrywa całą stronę, użycie własnego kodu do ukrycia treści pop-upu sprawi tylko, że stanie się on niewidoczny. Sam <iframe> pozostanie aktywny, pokrywając stronę pod spodem i blokując wszystkie kliknięcia. To krytyczny błąd, który może uczynić Twoją stronę bezużyteczną dla odwiedzających.