Créer des pop-up avec du HTML personnalisé offre à votre équipe une liberté créative totale pour adapter vos pop-up à votre charte graphique et à vos exigences de design. Si vous préférez une alternative visuelle sans code, vous pouvez concevoir vos pop-up avec l'éditeur visuel dans « Expérience sur le site ».
Lorsque vous utilisez du HTML personnalisé, respecter les règles d'interaction décrites dans ce guide garantit que les informations des contacts sont correctement associées à votre espace de travail et que les statistiques de performance de vos pop-up (interactions affichées, cliquées et soumises) sont enregistrées avec précision.
Les champs de saisie de base dans les pop-up permettent de collecter les informations essentielles des contacts, telles que le nom, l'adresse email ou le numéro de téléphone. Pour garantir un mappage correct des données dans Positive User, l'attribut name de chaque champ de saisie doit correspondre au nom de l'attribut de contact associé. Positive User prend en charge les attributs standard tels que « Prénom », « Nom » et « Numéro de téléphone », ainsi que les attributs personnalisés définis pour des besoins métier spécifiques comme les consentements marketing ou les statistiques e-commerce. Préciser le type de champ (comme text, email ou number) et ajouter un texte d'espace réservé descriptif guide vos contacts et garantit une collecte de données précise.
Les champs de saisie obligatoires garantissent que les contacts fournissent les informations essentielles avant de soumettre un formulaire pop-up. Incluez l'attribut required dans l'élément input pour activer la validation au niveau du navigateur, qui invite le contact à compléter le champ avant l'envoi. L'associer à un texte d'espace réservé ou à un libellé clair améliore l'expérience utilisateur.
Exemple : champ obligatoire
<input type="email" name="email" placeholder="Enter your email address" required>Dans cet exemple :
type="email" garantit que la saisie est validée en tant qu'adresse email.
name="email" associe le champ à l'attribut email du contact dans votre espace de travail Positive User.
« required » impose que le champ soit rempli avant que le formulaire ne soit soumis.
placeholder="Enter your email address" guide le contact.
Les champs de saisie facultatifs complètent les champs obligatoires en permettant aux contacts de fournir des données supplémentaires non obligatoires. Pour configurer un champ facultatif, incluez l'attribut name pour le mappage des données, mais omettez l'attribut required.
Exemple : configuration de champs de saisie obligatoires et facultatifs
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">Dans cet exemple :
Le champ « email » est obligatoire car il inclut l'attribut required.
Le champ « first name » est facultatif car l'attribut required est omis.
name="email" et name="first_name" garantissent que les données sont associées aux bons attributs dans Positive User.
Une case à cocher unique est souvent utilisée pour des choix binaires, comme accorder un consentement. Utilisez <input type="checkbox"> et associez l'attribut name à l'attribut de contact dans Positive User. Lorsque la case est cochée, la valeur « true » est envoyée à Positive User. Envelopper le champ dans une balise <label> rend le texte cliquable pour améliorer l'expérience utilisateur.
Exemple : case à cocher de consentement à la newsletter
<label>
<input type="checkbox" name="newsletter_consent">
I agree to receive the newsletter.
</label>Dans cet exemple :
type="checkbox" crée une case à cocher unique.
name="newsletter_consent" associe le champ à l'attribut de contact « newsletter_consent ».
La balise <label> rend le texte cliquable et améliore l'expérience utilisateur.
Les champs à choix fixes permettent aux contacts de sélectionner une ou plusieurs options prédéfinies dans une liste, ce qui est idéal pour collecter des données sur les centres d'intérêt ou les préférences de communication. Utilisez plusieurs éléments <input type="checkbox"> qui partagent le même attribut name afin que toutes les valeurs sélectionnées soient associées à cet unique attribut de contact. Avant de les ajouter à votre code, accédez à « paramètres de l'espace de travail » → « Attributs » pour créer l'attribut personnalisé et définir ses options. La valeur de l'attribut value dans votre HTML doit correspondre exactement au nom de l'option créée dans les paramètres de votre espace de travail.
Exemple : configuration de champs à choix multiples
<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>Dans cet exemple :
type="checkbox" crée une case sélectionnable pour chaque option.
name="interests" est identique pour les trois champs. Cela les regroupe et garantit que toutes les valeurs sélectionnées sont enregistrées dans l'attribut de contact « Interests ».
value="..." précise le texte unique qui sera enregistré pour chaque option lorsqu'elle est cochée. Important : les valeurs indiquées dans l'attribut value (par exemple « product_updates ») doivent avoir été créées au préalable comme options de l'attribut personnalisé correspondant (par exemple « Interests ») dans votre espace de travail. La valeur dans le HTML doit correspondre exactement à l'option créée dans l'application.
L'élément <label> améliore l'expérience utilisateur en permettant aux contacts de cliquer sur le texte pour sélectionner la case correspondante.
Configurez les boutons d'envoi pour traiter les soumissions de formulaire et collecter des statistiques essentielles sur les performances de vos pop-up.
Attribuez id="submitButton" à un élément bouton à l'intérieur de votre balise <form>. Cet ID spécifique est essentiel pour déclencher la redirection et pour collecter les statistiques de soumission des pop-up dans Positive User. Il permet de valider les saisies, d'associer les attributs, de suivre les statistiques de soumission et de lancer des workflows automatisés.
Exemple : formulaire avec un champ de saisie et un bouton d'envoi
<form>
<input type="email" name="email" placeholder="Enter your email address" required>
<button id="submitButton">Submit</button>
</form>Configurez un bouton d'envoi qui redirige les contacts vers une autre page à l'aide d'une balise ancre <a> avec id="submitButton". Cet ID spécifique est essentiel car il déclenche la redirection tout en permettant à Positive User de collecter les statistiques de soumission des pop-up. Utilisez l'attribut href dans la balise <a> pour spécifier l'URL de destination : cette configuration est idéale pour rediriger les contacts vers des pages de remerciement ou des offres spéciales après leur clic.
Si votre bouton contient des éléments imbriqués complexes (comme du texte stylisé ou des images), assurez-vous que seule la balise <a> reçoit l'événement de clic. Appliquez pointer-events: none; via CSS à tous les éléments à l'intérieur de la balise <a> pour empêcher les éléments internes de bloquer la redirection ou le suivi des clics.
Exemple : configuration d'un bouton de redirection avec des éléments imbriqués
<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>Permettez à vos contacts de fermer proprement les pop-up sans soumettre de données.
Ajoutez l'attribut data-dismiss="true" à n'importe quel élément HTML valide, comme une icône de fermeture <span> ou <svg>. Un clic sur cet élément indique à Positive User de fermer le pop-up et de suivre l'action de fermeture.
Exemple : configuration d'un bouton de fermeture
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Par défaut, l'arrière-plan (la zone en dehors du contenu du pop-up) peut également fermer le pop-up. Toutefois, si un contact clique par erreur à l'intérieur du pop-up et que son clic atterrit sur la zone d'arrière-plan à l'intérieur de l'iframe, cela peut le fermer involontairement. Pour éviter cela, vous pouvez ajouter un script qui garantit que seuls les clics directs sur l'arrière-plan déclenchent une action de fermeture.
// 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();
}
}
});La seule méthode valide pour fermer un pop-up dans Positive User consiste à utiliser l'attribut data-dismiss="true". Vous ne devez jamais écrire de JavaScript personnalisé pour masquer manuellement le pop-up.
Comme le pop-up est affiché dans une <iframe> qui recouvre toute la page, utiliser du code personnalisé pour masquer le contenu du pop-up le rendra uniquement invisible. La <iframe> restera active, recouvrira la page en arrière-plan et bloquera tous les clics. C'est une erreur critique qui peut rendre votre site inutilisable pour vos visiteurs.