Générateur de Popup
Un générateur de popup construit la fenêtre voulue et vous rend le code à intégrer. Réglez le titre, le message, le bouton et les couleurs, choisissez un déclencheur et la fréquence d’affichage, et le panneau Code d’intégration imprime une unique balise script pointant vers popup.min.js, vos réglages figurant en attributs data — data-trigger, data-delay, data-bg et les autres.
Contenu
Déclencheur et comportement
Personnaliser
Préréglages
Aperçu en direct
Code d'Intégration
Outils populaires
À propos de Générateur de Popup
Le formulaire tient en quatre blocs. Content reçoit le titre, le message, le texte du bouton et son URL. Trigger & Behavior choisit entre Timed Delay, Scroll %, Exit Intent et On Page Load, avec un délai en secondes ou un pourcentage de défilement selon le cas, une fréquence Every Visit, Once Per Session, Once Per Day ou Once Forever, et une animation Fade ou Slide. Le bloc de style règle le fond, la couleur du texte, celle du bouton et un curseur de rayon, plus les interrupteurs Overlay Backdrop, Close on Overlay Click et affichage de la mention. Quatre préréglages — Newsletter, Discount, Dark et Exit Intent — remplissent tout d’un coup.
L’aperçu en direct redessine la fenêtre au fil de la saisie, et le panneau Code d’intégration montre la balise que vous collerez réellement. C’est un seul élément script qui charge popup.min.js depuis ce site et ne porte que les réglages différents des valeurs par défaut : une popup de newsletter classique donne donc une balise courte plutôt que vingt attributs.
Les déclencheurs ont un comportement précis. Exit Intent guette le pointeur qui sort par le haut de la fenêtre — un mouseout sans cible liée à moins de cinq pixels du bord supérieur — il se déclenche donc sur ordinateur et jamais sur écran tactile. Scroll % mesure la position dans la hauteur défilable et se déclenche une fois votre seuil dépassé. La fréquence est mémorisée sur l’appareil du visiteur : Once Per Session dans sessionStorage, Once Per Day et Once Forever dans localStorage, sous une clé construite à partir du titre de la popup.
Limites : la popup est un message avec un lien, pas un formulaire — elle ne collecte aucune adresse e-mail, et il n’y a ni statistiques, ni test A/B, ni ciblage par page : l’endroit où la balise est collée détermine où la popup apparaît. Le générateur n’écrit que du code, rien n’est enregistré ici, et le script est servi depuis ce site : pour une copie hors ligne, il faut héberger popup.min.js vous-même.
Cas d'utilisation
Comment utiliser
Renseignez le titre, le message, le texte du bouton et son URL dans Content, ou cliquez sur l’un des préréglages Newsletter, Discount, Dark ou Exit Intent.
Dans Trigger & Behavior, choisissez Timed Delay, Scroll %, Exit Intent ou On Page Load, puis réglez le délai ou le pourcentage, la fréquence et l’animation.
Réglez le fond, la couleur du texte, celle du bouton et le curseur de rayon, puis décidez d’Overlay Backdrop, de Close on Overlay Click et de l’affichage de la mention.
Vérifiez l’aperçu en direct, qui se redessine au fil de la saisie.
Copiez l’unique balise script du panneau Code d’intégration et collez-la dans votre page juste avant la balise de fermeture du body.
Contrôlez la fenêtre modale dans le panneau Aperçu en direct, puis appuyez sur Copier dans le panneau Code d'intégration et collez la balise script dans le HTML de votre site.
Astuces Pro
- Le code ne liste que les réglages différents des valeurs par défaut : une balise courte ne signifie donc pas qu’il manque quelque chose — 5 secondes de délai et Once Per Session sont déjà le comportement du widget.
- Exit Intent ne se déclenche jamais sur téléphone : il dépend du pointeur qui quitte le haut de la fenêtre, et un écran tactile n’en a pas. Associez-le à une popup au défilement ou temporisée si le mobile compte.
- La fréquence est mémorisée par titre de popup : changer le titre donne au widget une nouvelle clé de stockage, et tous ceux qui avaient déjà fermé l’ancienne verront la nouvelle.
- Décochez l’affichage de la mention et la balise gagne data-branding="false", ce qui retire la petite ligne Powered by FreeWebTools sous le bouton.
- Le widget comprend aussi data-position="bottom", absent du formulaire : ajoutez-le à la main dans la balise pour ancrer la popup en bas de l’écran au lieu du centre.
Dépannage
La popup n’apparaît jamais sur mon site.
Vérifiez trois choses dans l’ordre : que la balise a bien été collée dans le HTML de la page et non dans un champ texte ou Markdown, que votre fréquence n’est pas déjà satisfaite — Once Per Session la masque jusqu’à la fermeture de l’onglet — et que le déclencheur choisi peut se produire, Exit Intent exigeant une souris.
Elle fonctionne sur ordinateur mais pas sur mon téléphone.
Exit Intent en est la cause habituelle : il dépend du pointeur qui quitte le haut de la fenêtre, et un écran tactile ne génère jamais cet événement. Passez à Timed Delay ou Scroll % pour le trafic mobile, ou servez une seconde balise avec un autre déclencheur.
Je n’ai vu la popup qu’une fois et elle ne revient plus.
C’est la fréquence qui fait son travail. Once Per Session est mémorisée dans sessionStorage jusqu’à la fermeture de l’onglet ; Once Per Day et Once Forever le sont dans localStorage. Effacez le stockage du site, ou ouvrez une fenêtre privée, pour la revoir pendant vos tests.
J’ai changé le design mais les visiteurs voient encore l’ancienne popup.
La balise est la popup : une ancienne balise restée sur la page conserve ses anciens réglages. Remplacez l’élément script entier, pas seulement une partie, puis videz le cache de page et celui du CDN. Une copie périmée dans votre propre cache navigateur est aussi à écarter.
Modifier le titre a réinitialisé la fréquence de tout le monde.
La clé de stockage dérive du titre de la popup : un nouveau titre est une nouvelle clé, et les fermetures antérieures ne comptent plus. C’est pratique quand on veut délibérément faire revoir une campagne, et bon à savoir quand on voulait seulement corriger une faute de frappe.
Questions fréquemment posées
Une seule balise script HTML. Elle pointe vers popup.min.js sur ce site et porte vos réglages en attributs data — data-title, data-text, data-btn-text, data-trigger, data-bg, etc. — tout ce qui reste par défaut étant omis. Collez cette balise dans votre page et la popup apparaît ; supprimez-la et elle disparaît.
Copiez la balise du panneau Code d’intégration et collez-la dans le HTML de la page, juste avant la balise de fermeture du body. Sous WordPress, c’est un bloc HTML personnalisé ou le pied de page du thème ; sur un site statique, le gabarit. Ni compte, ni extension, ni étape de build : toute la popup tient dans ce script.
Quatre. Timed Delay attend le nombre de secondes du champ Delay. Scroll % attend que le visiteur ait défilé jusqu’au pourcentage indiqué. Exit Intent attend que le pointeur sorte par le haut de la fenêtre. On Page Load affiche la popup tout de suite. Le formulaire n’affiche que le champ Delay ou Scroll qui s’applique.
Le script écoute un événement mouseout sur le document, sans cible liée et survenant à moins de cinq pixels du haut de la fenêtre — le geste de quelqu’un qui remonte vers la barre d’adresse ou un onglet. Il se déclenche une fois par chargement de page. Comme il repose sur un pointeur, il ne se déclenche jamais sur téléphone ni tablette.
C’est le réglage Frequency. Every Visit l’affiche à chaque chargement ; Once Per Session une seule fois jusqu’à la fermeture de l’onglet ; Once Per Day attend 24 heures avant de la remontrer ; Once Forever ne l’affiche qu’une fois. Once Per Session est la valeur par défaut et n’apparaît donc pas dans la balise générée.
Dans le navigateur du visiteur, pas sur un serveur. Once Per Session écrit dans sessionStorage, Once Per Day et Once Forever dans localStorage, sous une clé fabriquée à partir du titre de votre popup. Effacer les données du site, ou ouvrir une fenêtre privée, remet le compteur à zéro et la popup réapparaît.
Non. La popup affiche un titre, une ligne de texte et un bouton qui mène à l’URL de votre choix : aucun champ de formulaire, rien n’est envoyé nulle part. Pour capter des adresses, faites pointer Button URL vers une page ou un formulaire hébergé par votre prestataire e-mail, et laissez cette page collecter.
Oui, mais par l’emplacement et non par un réglage. Le script s’exécute là où se trouve la balise : dans un pied de page commun, elle s’affiche partout ; collée dans le HTML d’une seule page, elle s’y limite. Il n’y a ni règle d’URL, ni ciblage d’audience, ni programmation dans le générateur.
Le formulaire la centre toujours, mais le widget sous-jacent accepte data-position="bottom". Copiez la balise, ajoutez cet attribut à la main, et la fenêtre s’ancre à 24 pixels du bord inférieur au lieu du centre. Tous les autres attributs continuent de fonctionner tels quels.
Décochez l’affichage de la mention avant de copier. La balise contient alors data-branding="false" et le widget n’ajoute plus le petit lien Powered by FreeWebTools sous le bouton. La laisser ne coûte qu’une ligne de texte gris de 10 pixels.