Der Aufbau von Pop-ups mit benutzerdefiniertem HTML gibt Ihrem Team die vollständige kreative Freiheit, Ihre Pop-ups exakt an Ihre Markenrichtlinien und Designanforderungen anzupassen. Wenn Sie eine visuelle, codefreie Alternative bevorzugen, können Sie Pop-ups stattdessen mit dem visuellen Editor im „Website-Erlebnis" gestalten.
Wenn Sie benutzerdefiniertes HTML verwenden, stellt die Einhaltung der Interaktionsregeln in dieser Anleitung sicher, dass Kontaktdaten korrekt in Ihren Workspace übertragen werden und dass Ihre Pop-up-Leistungsstatistiken (einschließlich angezeigter, angeklickter und abgesendeter Interaktionen) genau erfasst werden.
Grundlegende Eingabefelder in Pop-ups erfassen wesentliche Kontaktinformationen wie Namen, E-Mail-Adressen oder Telefonnummern. Um eine korrekte Datenzuordnung in Positive User sicherzustellen, muss das Attribut name jedes Eingabefelds mit dem Namen des entsprechenden Kontaktattributs übereinstimmen. Positive User unterstützt Standardattribute wie „Vorname", „Nachname" und „Telefonnummer" sowie benutzerdefinierte Attribute, die für spezifische geschäftliche Anforderungen wie Marketing-Einwilligungen oder E-Commerce-Statistiken definiert werden. Die Angabe des Feldtyps (z. B. text, email oder number) und das Hinzufügen eines aussagekräftigen Platzhaltertextes leiten Kontakte an und gewährleisten eine genaue Datenerfassung.
Pflichteingabefelder stellen sicher, dass Kontakte wesentliche Informationen bereitstellen, bevor sie ein Pop-up-Formular absenden. Fügen Sie das Attribut required in das Eingabeelement ein, um eine Validierung auf Browserebene zu aktivieren, die Kontakte auffordert, das Feld vor dem Absenden auszufüllen. Die Kombination mit einem klaren Platzhaltertext oder Labels verbessert die Benutzerfreundlichkeit.
Beispiel: Pflichteingabe
<input type="email" name="email" placeholder="Enter your email address" required>In diesem Beispiel:
type="email" stellt sicher, dass die Eingabe als E-Mail-Adresse validiert wird.
name="email" ordnet das Feld dem E-Mail-Attribut des Kontakts in Ihrem Positive User Workspace zu.
„required" stellt sicher, dass das Feld vor dem Absenden des Formulars ausgefüllt werden muss.
placeholder="Enter your email address" leitet den Kontakt an.
Optionale Eingabefelder ergänzen Pflichtfelder, indem sie Kontakten ermöglichen, zusätzliche, nicht obligatorische Daten bereitzustellen. Um ein optionales Feld zu konfigurieren, fügen Sie das Attribut name für die Datenzuordnung ein, lassen Sie jedoch das Attribut required weg.
Beispiel: Konfiguration von Pflicht- und optionalen Eingabefeldern
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">In diesem Beispiel:
Die Eingabe „email" ist obligatorisch, da sie das Attribut required enthält.
Die Eingabe „first name" ist optional, da das Attribut required weggelassen wird.
name="email" und name="first_name" stellen sicher, dass die Daten den korrekten Attributen in Positive User zugeordnet werden.
Eine einzelne Checkbox wird häufig für binäre Entscheidungen verwendet, wie z. B. die Erteilung einer Einwilligung. Verwenden Sie <input type="checkbox"> und ordnen Sie das Attribut name dem Kontaktattribut in Positive User zu. Wenn das Kästchen angekreuzt ist, wird der Wert „true" an Positive User gesendet. Wenn Sie die Eingabe in ein <label>-Tag einschließen, wird der Text anklickbar, was die Benutzerfreundlichkeit verbessert.
Beispiel: Checkbox für Newsletter-Einwilligung
<label>
<input type="checkbox" name="newsletter_consent">
I agree to receive the newsletter.
</label>In diesem Beispiel:
type="checkbox" erstellt eine einzelne Checkbox.
name="newsletter_consent" ordnet die Eingabe dem Kontaktattribut „newsletter_consent" zu.
Das <label> macht den Text anklickbar und verbessert so die Benutzerfreundlichkeit.
Eingaben mit fester Auswahl ermöglichen es Kontakten, eine oder mehrere vordefinierte Optionen aus einer Liste auszuwählen, was ideal für die Erfassung von Daten zu Interessen oder Kommunikationspräferenzen ist. Verwenden Sie mehrere <input type="checkbox">-Elemente, die dasselbe Attribut name teilen, damit alle ausgewählten Werte diesem einen Kontaktattribut zugeordnet werden. Bevor Sie sie zu Ihrem Code hinzufügen, gehen Sie zu „Workspace Einstellungen" → „Attribute", um das benutzerdefinierte Attribut zu erstellen und dessen Optionen zu definieren. Das value-Attribut in Ihrem HTML muss exakt mit dem Optionsnamen übereinstimmen, der in Ihren Workspace Einstellungen erstellt wurde.
Beispiel: Konfiguration von Mehrfachauswahl-Eingaben
<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>In diesem Beispiel:
type="checkbox" erstellt ein auswählbares Kästchen für jede Option.
name="interests" ist für alle drei Eingaben gleich. Dies gruppiert sie und stellt sicher, dass alle ausgewählten Werte im Kontaktattribut „Interests" gespeichert werden.
value="..." gibt den eindeutigen Text an, der für jede Option gespeichert wird, wenn sie ausgewählt ist. Wichtig: Die im Attribut value angegebenen Werte (z. B. „product_updates") müssen zuvor als Optionen für das entsprechende benutzerdefinierte Attribut (z. B. „Interests") in Ihrem Workspace erstellt werden. Der Wert im HTML muss exakt mit der in der App erstellten Option übereinstimmen.
Das <label>-Element verbessert die Benutzerfreundlichkeit, indem es Kontakten ermöglicht, auf den Text zu klicken, um die entsprechende Checkbox auszuwählen.
Konfigurieren Sie Absende-Buttons, um Formularübermittlungen zu verarbeiten und wichtige Statistiken über die Leistung Ihres Pop-ups zu erfassen.
Weisen Sie id="submitButton" einem Button-Element innerhalb Ihres <form>-Tags zu. Diese spezifische ID ist entscheidend für das Auslösen der Weiterleitung und für die Erfassung von Pop-up-Übermittlungsstatistiken in Positive User. Sie ermöglicht die Validierung von Eingaben, die Zuordnung von Attributen, das Verfolgen von Übermittlungsstatistiken und das Starten automatisierter Workflows.
Beispiel: Formular mit Eingabe und Absende-Button
<form>
<input type="email" name="email" placeholder="Enter your email address" required>
<button id="submitButton">Submit</button>
</form>Konfigurieren Sie einen Absende-Button, der Kontakte mithilfe eines Anker-<a>-Tags mit id="submitButton" auf eine andere Seite weiterleitet. Diese spezifische ID ist entscheidend, da sie die Weiterleitung auslöst und gleichzeitig Positive User ermöglicht, Pop-up-Übermittlungsstatistiken zu erfassen. Verwenden Sie das Attribut href im <a>-Tag, um die Ziel-URL anzugeben. Diese Konfiguration eignet sich ideal, um Kontakte nach einem Klick auf Danke-Seiten oder Sonderangebote zu leiten.
Wenn Ihr Button komplexe verschachtelte Elemente (wie gestalteten Text oder Bilder) enthält, stellen Sie sicher, dass nur das <a>-Tag selbst das Klickereignis empfängt. Wenden Sie pointer-events: none; per CSS auf alle Elemente innerhalb des <a>-Tags an, um zu verhindern, dass innere Elemente die Weiterleitung oder das Klick-Tracking blockieren.
Beispiel: Konfiguration eines Weiterleitungs-Buttons mit verschachtelten Elementen
<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>Erlauben Sie Kontakten, Pop-ups sauber zu schließen, ohne Daten abzusenden.
Fügen Sie das Attribut data-dismiss="true" zu einem beliebigen gültigen HTML-Element hinzu, z. B. zu einem <span>- oder <svg>-Schließsymbol. Ein Klick auf dieses Element signalisiert Positive User, das Pop-up zu schließen und die Schließaktion zu erfassen.
Beispiel: Konfiguration eines Schließen-Buttons
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Standardmäßig kann das Overlay (der Hintergrundbereich außerhalb des Pop-up-Inhalts) das Pop-up ebenfalls schließen. Wenn ein Kontakt jedoch versehentlich innerhalb des Pop-ups klickt und dieser Klick auf den Overlay-Bereich innerhalb des iframes fällt, kann dies das Pop-up unbeabsichtigt schließen. Um dies zu verhindern, können Sie ein Skript hinzufügen, das sicherstellt, dass nur direkte Klicks auf den Overlay-Hintergrund eine Schließaktion auslösen.
// 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();
}
}
});Die einzige gültige Methode, ein Pop-up in Positive User zu schließen, ist die Verwendung des Attributs data-dismiss="true". Sie dürfen niemals benutzerdefiniertes JavaScript schreiben, um das Pop-up manuell auszublenden.
Da das Pop-up innerhalb eines <iframe> gerendert wird, das die gesamte Seite abdeckt, wird der Inhalt des Pop-ups durch benutzerdefinierten Code nur unsichtbar. Das <iframe> selbst bleibt aktiv, deckt die darunterliegende Seite ab und blockiert alle Klicks. Dies ist ein kritischer Fehler, der Ihre Website für Besucher unbrauchbar machen kann.