---
title: "Paramètres d'interaction des pop-up personnalisés"
description: "Configurez des champs de saisie HTML personnalisés, des boutons d'envoi et des boutons de fermeture pour collecter les données de vos contacts et suivre les performances de vos pop-up."
url: https://help.user.com/fr/articles/262-parametres-d-interaction-des-pop-up-personnalises
collection: "Pop-ups"
updated: 2026-10-28
language: fr
alternates: [en, pl, de, it, es]
---

# Paramètres d'interaction des pop-up personnalisés

Configurez des champs de saisie HTML personnalisés, des boutons d'envoi et des boutons de fermeture pour collecter les données de vos contacts et suivre les performances de vos pop-up.

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](https://help.user.com/fr/articles/150-comment-creer-un-pop-up.md) 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.

## Configurer les champs de saisie

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.

### Configurer les champs de saisie obligatoires

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

```javascript
<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.
    

### Configurer les champs de saisie facultatifs

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

```javascript
<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.
    

### Configurer une case à cocher unique

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

```javascript
<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.
    

### Configurer les champs à choix multiples

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é](https://help.user.com/fr/articles/38-comment-creer-un-attribut-personnalise.md) 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

```javascript
<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.
    

## Configurer les boutons d'envoi

Configurez les boutons d'envoi pour traiter les soumissions de formulaires et collecter les statistiques importantes sur les performances de vos pop-up.

### Configurer les soumissions de formulaires standard

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

```javascript
<form>
  <input type="email" name="email" placeholder="Enter your email address" required>
  <button id="submitButton">Submit</button>
</form>
```

### Configurer les soumissions avec redirection

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

```javascript
<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>
```

## Configurer les boutons de fermeture

Permettez aux contacts de fermer les pop-up sans envoyer de données.

### Activer la fermeture via des attributs

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

```javascript
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">&times;</span>
```

### Configurer la fermeture lors d'un clic sur l'overlay

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.

```javascript
// 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();
        }
    }
});
```

### Remarque importante

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.

## Articles liés

-   [Comment créer un pop-up ?](https://help.user.com/fr/articles/150-comment-creer-un-pop-up.md)
    
-   [Statistiques des pop-up](https://help.user.com/fr/articles/222-statistiques-des-pop-up.md)