La création de pop-up en HTML personnalisé offre à votre équipe une grande liberté pour adapter les pop-up à votre identité visuelle et à vos besoins en matière de design. Si vous préférez une approche visuelle, sans avoir à écrire de code, vous pouvez également concevoir vos pop-up à l'aide de l'Éditeur visuel dans "Expérience du site Web".
Lors de l'utilisation de HTML personnalisé, le respect des règles d'interaction décrites dans ce guide garantit que les coordonnées des contacts sont correctement associées à votre espace de travail et que les statistiques de performance des pop-up (notamment les interactions affichées, cliquées et soumises) sont enregistrées correctement.
Les champs de saisie basiques des pop-up permettent de collecter les coordonnées essentielles des contacts, comme leur nom, leur adresse email ou leur numéro de téléphone. Pour garantir une association correcte des données dans Positive User, le nom d'attribut de chaque champ de saisie doit correspondre au nom de l'attribut du contact associé. Positive User prend en charge les attributs standards tels que "Prénom", "Nom" et "Numéro de téléphone", ainsi que les attributs personnalisés définis pour répondre à des besoins métier spécifiques, comme les consentements marketing ou les statistiques e-commerce. La définition du type de champ (par exemple text, email ou number) et l'ajout d'un texte d'espace réservé explicite permettent de guider les contacts et de garantir une collecte fiable des données.
Les champs de saisie obligatoires permettent de s'assurer que les contacts fournissent les informations essentielles avant d'envoyer un formulaire de pop-up. Ajoutez l'attribut required à l'élément de saisie pour activer la validation du navigateur et demander aux contacts de renseigner le champ avant l'envoi. L'utilisation d'un texte d'espace réservé ou de libellés clairs améliore également l'utilisation du formulaire.
Exemple : champ de saisie obligatoire
<input type="email" name="email" placeholder="Votre adresse email" required>Dans cet exemple :
type="email" garantit que la saisie est validée comme une adresse email.
name="email" associe le champ à l'attribut email du contact dans votre espace de travail Positive User.
required garantit que le champ doit être renseigné avant l'envoi du formulaire.
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 informations supplémentaires, sans caractère obligatoire. Pour configurer un champ facultatif, ajoutez l'attribut name pour permettre l'association des données, mais n'ajoutez pas l'attribut required.
Exemple : configurer des champs de saisie obligatoires et facultatifs
<input type="email" name="email" placeholder="Votre adresse email" required>
<input type="text" name="first_name" placeholder="Votre prénom (optionnel)">Dans cet exemple :
Le champ "email" est obligatoire, car il contient l'attribut required.
Le champ "first name" est facultatif, car l'attribut required n'est pas présent.
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 les choix binaires, par exemple pour recueillir un consentement. Utilisez <input type="checkbox"> et associez l'attribut name à l'attribut du contact dans Positive User. Lorsque la case est cochée, la valeur "true" est envoyée à Positive User. L'utilisation de l'élément <label> autour du champ rend le texte cliquable et améliore l'utilisation du formulaire.
Exemple : case à cocher pour le 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 du contact "newsletter_consent".
L'élément <label> rend le texte cliquable et améliore l'utilisation du formulaire.
Les champs à choix prédéfinis permettent aux contacts de sélectionner une ou plusieurs options dans une liste. Ils sont particulièrement adaptés à la collecte d'informations sur les centres d'intérêt ou les préférences de communication. Utilisez plusieurs éléments <input type="checkbox"> partageant le même attribut name, afin que toutes les valeurs sélectionnées soient associées au même attribut du contact. Avant de les ajouter à votre code, accédez à "Paramètres de l'espace de travail" → "Données & événements des contacts" → "Attributs de contact" pour créer l'attribut personnalisé et définir ses options. L'attribut value de votre HTML doit correspondre exactement au nom de l'option créée dans les paramètres de votre espace de travail.
Exemple : configurer des 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 afin que toutes les valeurs sélectionnées soient enregistrées dans l'attribut du contact "Interests".
value="..." définit le texte unique qui sera enregistré pour chaque option lorsqu'elle est sélectionnée. Important : les valeurs renseigné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 "Centres d'intérêt") dans votre espace de travail. La valeur définie dans le HTML doit correspondre exactement à l'option créée dans l'application.
L'élément <label> améliore l'utilisation du formulaire 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 formulaires et collecter les statistiques importantes sur les performances de vos pop-up.
Attribuez id="submitButton" à un élément bouton situé à l'intérieur de votre balise <form>. Cet identifiant spécifique est essentiel pour déclencher la redirection et collecter les statistiques de soumission des pop-up dans Positive User. Il permet de valider les champs, d'associer les attributs, de suivre les statistiques de soumission et de lancer des workflows automatisés.
Exemple : formulaire avec champ de saisie et 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 en utilisant une balise d'ancrage <a> avec id="submitButton". Cet identifiant 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 de la balise <a> pour définir l'URL de destination. Cette configuration est particulièrement adaptée 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 ou des images avec un style spécifique), veillez à ce que seule la balise <a> reçoive l'événement de clic. Appliquez pointer-events: none; via CSS à tous les éléments situés à l'intérieur de la balise <a> afin d'éviter que les éléments internes n'empêchent la redirection ou le suivi des clics.
Exemple : configurer un bouton de redirection avec des éléments imbriqués
<a id="submitButton" href="https://example.com/thank-you">
<b>Cliquez ici pour continuer</b>
<img src="https://example.com/image.png" alt="Envoyer" onerror="this.style.display='none'">
</a>
<style>
#submitButton * {
/* Empêche tout élément à l'intérieur du lien d'intercepter l'événement de clic. */
pointer-events: none;
}
</style>Permettez aux contacts de fermer les pop-up sans envoyer de données.
Ajoutez l'attribut data-dismiss="true" à n'importe quel élément HTML valide, comme une balise <span> ou une icône de fermeture <svg>. Lorsque le contact clique sur cet élément, Positive User ferme le pop-up et enregistre l'action de fermeture.
Exemple : configurer un bouton de fermeture
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Par défaut, l'overlay (la zone d'arrière-plan située autour du contenu du pop-up) peut également fermer le pop-up. Cependant, si un contact clique accidentellement à l'intérieur du pop-up et que son clic est enregistré sur la zone d'overlay à l'intérieur de l'iframe, le pop-up peut être fermé involontairement. Pour éviter cela, il est possible d'ajouter un script qui garantit que seuls les clics directs sur l'arrière-plan de l'overlay déclenchent la fermeture.
// Gérer les clics sur l'overlay pour fermer le pop-up
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
// Fermer uniquement si le clic est directement effectué sur l'arrière-plan de l'overlay
if (event.target === this) {
// Rechercher le bouton de fermeture et cliquer dessus pour déclencher la fonction de fermeture de User.com
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". Il ne faut jamais utiliser de JavaScript personnalisé pour masquer manuellement le pop-up.
Le pop-up étant affiché à l'intérieur d'un <iframe> qui couvre toute la page, l'utilisation de code personnalisé pour masquer le contenu du pop-up le rendrait simplement invisible. L'<iframe> lui-même resterait actif, recouvrant la page sous-jacente et empêchant tout clic. Il s'agit d'une erreur critique qui peut rendre votre site inutilisable pour les visiteurs.