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 „Website Experience”.
Podczas korzystania z własnego kodu HTML, przestrzeganie zasad interakcji opisanych w tym przewodniku zapewnia poprawne przypisanie danych kontaktów do Twojego workspace oraz dokładne rejestrowanie statystyk skuteczności pop-upów (w tym interakcji wyświetlonych, kliniętych i wysłanych).
Podstawowe pola input w pop-upach zbierają kluczowe dane kontaktów, 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 „First name”, „Last name” czy „Phone number”, 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="Enter your email address" 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="Enter your email address" 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="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">W tym przykładzie:
Pole „email” jest obowiązkowe, ponieważ zawiera atrybut required.
Pole „first name” jest opcjonalne, ponieważ atrybut required został pominięty.
name="email" oraz name="first_name" 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">
I agree to receive the newsletter.
</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 „Workspace Settings” → „Attributes”, 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>What topics are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="product_updates">
Product Updates
</label>
<br>
<label>
<input type="checkbox" name="interests" value="monthly_newsletter">
Monthly Newsletter
</label>
<br>
<label>
<input type="checkbox" name="interests" value="special_offers">
Special Offers
</label>W tym przykładzie:
type="checkbox" tworzy zaznaczalne pole dla każdej opcji.
name="interests" jest takie samo dla wszystkich trzech pól. Grupuje je razem, dzięki czemu wszystkie zaznaczone wartości zostają zapisane w atrybucie kontaktu „Interests”.
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. „product_updates”) muszą zostać wcześniej utworzone jako opcje dla odpowiedniego atrybutu własnego (np. „Interests”) 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="Enter your email address" 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 * {
/* This prevents any element inside the link from capturing the click event. */
pointer-events: none;
}
</style>Umożliw 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.