Modèles de pop-ups pour sites web : 16 designs prêts à l’emploi pour chaque objectif

Un pop-up ne vaut que par le moment où il apparaît. Le design compte, mais ce qui décide s’il convertit ou agace, c’est le ciblage, le timing et l’adéquation du format au message — une fine barre pour une info livraison, un overlay plein écran pour un lancement.

Voici 16 modèles de pop-ups pour sites web couvrant tous les formats courants : barres, modales, overlays, notifications, interactions gamifiées et indicateurs de progression. Chacun est un modèle fonctionnel que vous pouvez configurer — textes, couleurs, ciblage et fréquence — sans écrire de code. Chacun renvoie vers son guide de configuration complet.

Ce qui fait un bon design de pop-up

Avant les modèles, voici les critères qui distinguent un pop-up sur lequel on agit d’un pop-up qu’on ferme :

• Une seule mission. Un pop-up qui demande un e-mail, promeut une promotion et annonce une fonctionnalité n’atteindra aucun de ces objectifs.
• Un format à la mesure du message. Petit message, petite emprise. Réservez les overlays plein écran aux moments qui méritent vraiment l’interruption.
• Une sortie visible. Un pop-up difficile à fermer transforme un rebond en rancune, et sur mobile il expose à une pénalité Google.
• Plafonnement de fréquence. Le deuxième affichage du même message fonctionne moins bien que le premier ; le cinquième fait des dégâts.
• Le ciblage avant le timing. « Après 5 secondes » est une règle grossière. « Visiteur récurrent, panier supérieur à 50 $, n’a pas encore vu cette offre » est une raison d’apparaître.

Barres : des messages persistants et peu intrusifs

Les barres se placent en haut ou en bas de la page sans masquer le contenu — le bon choix pour tout ce qui doit rester visible plutôt qu’exiger une décision.

Barre d’annonce — une fine bande pleine largeur pour les messages valables sur tout le site : offres de livraison, soldes, nouveautés produits ou mentions réglementaires. En haut ou en bas, fixe ou statique.

Barre d’annonce rotative — la même bande faisant défiler jusqu’à cinq messages, chacun avec son lien, selon un minuteur avec navigation par points et transition en fondu ou en glissement. Utile quand plusieurs messages se disputent un même emplacement.

Barre de statut livraison gratuite — une barre de progression en direct qui lit une valeur du profil du visiteur — « Plus que 65 $ pour la livraison gratuite » — et se remplit à mesure que le panier grossit.

Barre de statut à paliers — la version fidélité : elle affiche le palier actuel, la progression vers le suivant et ce qu’il débloque, selon les points, les dépenses ou les commandes.

Pop-ups et modales : des demandes ciblées

Modale centrée — un pop-up centré sur un fond sombre, avec quatre dispositions d’image dans un seul modèle et le contrôle de la position de l’image sur mobile. Le choix par défaut pour une offre unique et claire.

Overlay plein écran — un écran d’accueil qui occupe tout le viewport, avec un fond en couleur, en dégradé ou en image pleine page. Pour les lancements, les campagnes saisonnières et l’accueil lors d’une première visite.

Notification en coin — une carte de notification compacte associant une image à un titre, un court message et un appel à l’action. Peu intrusive — idéale pour la preuve sociale, les promotions discrètes et la mise en avant de fonctionnalités.

Pop-up coupon — un code promo avec plusieurs styles de révélation : cliquer pour copier, cliquer pour révéler ou toujours affiché, avec image, titre, CTA et mentions en petits caractères.

Formulaire de capture de leads — collecte les informations du visiteur et les inscrit dans le profil Personyze, pour que vous puissiez le relancer, le segmenter ou personnaliser ce qu’il voit ensuite. Disposition côte à côte ou empilée.

Formats interactifs et gamifiés

Ces formats demandent au visiteur de faire quelque chose. L’engagement est bien plus élevé, et le coût d’un usage excessif aussi.

Roue de la fortune — une roue de la fortune gamifiée avec des probabilités que vous maîtrisez, en disposition empilée ou plein écran. Ce que gagne chaque visiteur est enregistré dans son profil pour un ciblage ultérieur.

Quiz de recommandation — quelques questions dont chaque réponse vote pour une catégorie de résultat, jusqu’à une recommandation sur mesure et un appel à l’action.

Tous deux sont détaillés dans le guide du marketing de gamification.

La Roue de la fortune en détail

Parmi les modèles interactifs, la Roue de la fortune est celle qui mérite une vraie explication — elle convertit bien parce que la réduction semble méritée plutôt qu’offerte, et elle collecte bien plus qu’une utilisation de code promo si vous la configurez correctement.

Vous configurez de quatre à huit segments, chacun avec un libellé, une couleur, un message de gain et un code promo. Le visiteur clique, la roue ralentit et le message du segment gagnant s’affiche avec des confettis ou un halo.

• Vous maîtrisez les probabilités. Chaque segment porte un poids relatif de chance de gain — des poids de 35/25/20/12/5 deviennent tout simplement ces pourcentages. Gardez les gros lots rares et les petits fréquents.
• Ajoutez une case perdante pour le suspense. Donnez à un segment un libellé comme Retentez votre chance et laissez son code promo vide : il comptera comme une case non gagnante.
• Contrôlez les relances. Mode de tentatives peut être Unique (un tour, résultat verrouillé), Relance (nouveau tour uniquement sur une case perdante jusqu’à gagner) ou Multiple (un nombre fixe de tours).
• Intégrée ou plein écran. Intégrez-la dans une page ou centrez-la sur un fond assombri, avec les mêmes probabilités dans les deux cas.
• Enregistrez le résultat dans le profil. C’est ce que la plupart des roues de la fortune ne font pas — le lot et le code gagnants sont inscrits dans le profil du visiteur, pour que vous puissiez relancer ceux qui ont gagné la livraison gratuite sans jamais commander, ou exclure ceux qui ont déjà réclamé leur lot.

La version avec formulaire, quand vous voulez l’e-mail

La roue standard ne conditionne volontairement pas le tour à un formulaire — la récompense, c’est le tour lui-même, ce qui limite les frictions. Quand le lead compte davantage que le jeu, la roue de la fortune avec formulaire place un formulaire devant.

La roue est visible dès le premier instant, mais grisée avec un cadenas, pour que le visiteur voie exactement contre quoi il échange son adresse. À l’envoi, le formulaire laisse place à un remerciement, la roue se déverrouille et tourne — et l’e-mail et le lot gagné arrivent dans le même profil. Une mise en garde : quand quelqu’un a « payé » avec son adresse, une case perdante passe mal ; gardez-les rares ou faites en sorte que chaque case rapporte quelque chose.

La configuration complète est détaillée dans la documentation du modèle Roue de la fortune, et un article plus complet se trouve dans le guide pratique de la roue de la fortune.

Progression, statut et urgence

Carte de statut — le format carte de la mécanique de progression — à quel point un visiteur est proche de la livraison gratuite ou d’une récompense, sous forme de carte centrée ou de pop-up alimentée par une valeur de profil en direct.

Carte de statut à paliers — la même carte montrant la progression dans les paliers de fidélité : Bronze, Argent, Platine, avec l’écart jusqu’au palier suivant.

Modèles de compte à rebours — trois variantes — carte, barre et barre d’événement — partageant un même moteur de minuterie, pour une promotion qui se termine, un prix qui augmente ou un événement qui commence.

Compte à rebours avec progression de l’événement — une barre qui se remplit à l’approche de la date au lieu de reposer uniquement sur des chiffres, avec un bouton d’inscription. Conçue pour les webinars, les lancements et les sessions en direct.

Sur la page : l’emplacement hero

Slider hero — une bannière hero rotative avec jusqu’à quatre slides, chacune avec son image, son titre, son sous-titre et son bouton — texte à côté de l’image ou superposé sur un fond pleine page.

Exemples de pop-ups par objectif

Si vous savez quel résultat vous voulez, voici le chemin le plus court vers un format :

• Développer la liste d’e-mails — Formulaire de capture de leads, Roue de la fortune qui demande l’adresse après le gain, ou Roue de la fortune avec formulaire qui la demande avant.
• Augmenter le panier moyen — Barre de statut livraison gratuite ou Carte de statut.
• Faire avancer une promotion — Pop-up coupon, avec un compte à rebours si l’échéance est réelle.
• Annoncer quelque chose sur tout le site — Barre d’annonce, ou sa version rotative pour plusieurs messages.
• Aider les visiteurs à choisir — Quiz de recommandation.
• Générer des inscriptions à un événement — Compte à rebours avec progression de l’événement.
• Fidéliser et récompenser — Barre ou Carte de statut à paliers.

Vous n’avez même pas besoin de choisir un modèle

Tout ce qui précède suppose que vous parcourez une bibliothèque pour faire votre choix. Il existe un chemin plus rapide : décrire le pop-up que vous voulez et laisser l’agent IA le construire. Votre travail ne consiste alors plus à choisir un modèle puis à le restyler, mais à relire quelque chose de déjà terminé.

Trois éléments en font bien plus qu’un générateur de modèles :

• Il s’inspire de votre vrai site. Avant de construire, l’agent analyse vos pages pour relever les couleurs de marque, les polices, le style des boutons et le ton de vos textes. Le résultat ressemble à votre site plutôt qu’à un modèle plaqué dessus — et un visiteur ne peut pas deviner qu’il a été généré.
• Des mots simples deviennent un vrai ciblage. Dites « nouveaux visiteurs sur mobile ayant atteint la page tarifs » et il le compile en véritables règles de ciblage, puis vous relit les règles compilées pour que vous puissiez les vérifier.
• Rien n’atteint le trafic réel. Tout ce qu’il construit est créé en staging — visible uniquement par les visiteurs arrivant depuis une IP de staging. Vous le prévisualisez sur vos vraies pages et publiez vous-même.

Concrètement, à quoi cela ressemble

Vous pouvez partir de l’une ou l’autre extrémité. « Crée un pop-up d’offre de bienvenue pour les nouveaux visiteurs » vous donne un pop-up terminé, fidèle à votre marque, avec le ciblage associé. Ou choisissez un modèle dans la bibliothèque ci-dessus et laissez l’agent l’adapter à votre marque tout en conservant votre offre. Dans les deux cas, vous ajustez en conversant — « fais-en une barre », « essaie une autre couleur », « cible aussi les visiteurs récurrents » — sans ouvrir de panneau CSS.

Cela fonctionne aussi dans l’autre sens : demandez « que devrais-je améliorer cette semaine ? » et il vous renvoie des opportunités classées sur l’ensemble de vos pages et campagnes, chacune avec une action en un geste. Sur un site de quelques centaines de pages, savoir où un pop-up vaut la peine d’être ajouté est généralement la moitié la plus difficile.

L’agent fonctionne dans le panneau Personyze — voir l’agent de personnalisation IA — et les mêmes fonctionnalités sont accessibles depuis Claude ou ChatGPT si vous préférez travailler depuis un assistant que vous utilisez déjà. Plus de détails dans le guide de l’agent marketing IA.

Vous préférez travailler depuis Claude ? Installez le connecteur depuis l’annuaire : Personyze dans l’annuaire Claude.

Bonnes pratiques pour les pop-ups

• Respectez le mobile. Google considère les interstitiels intrusifs sur mobile comme un problème de classement. Les barres et les notifications y sont plus sûres que les overlays.
• Déclenchez sur l’intention, pas seulement sur le temps. L’intention de sortie, la profondeur de scroll, la valeur du panier et les visites répétées battent toutes un délai arbitraire.
• Masquez après l’action. Quelqu’un qui s’est abonné ne devrait plus jamais revoir le pop-up d’abonnement.
• Testez l’offre avant le design. Changer l’incitation fait bien plus bouger la conversion que changer la couleur du bouton.
• Enregistrez le résultat. Un pop-up qui capte une préférence et l’inscrit dans le profil du visiteur continue de rapporter après la fin de la campagne.

Modèles de pop-ups : FAQ

Combien de pop-ups, c’est trop ?

Une seule demande active par visite est une règle sûre. Une barre persistante et un pop-up interactif peuvent coexister, car la barre n’exige pas de décision, mais deux overlays concurrents se neutraliseront.

Les pop-ups nuisent-ils au SEO ?

Uniquement lorsqu’ils sont intrusifs sur mobile. Les barres, les notifications et les pop-ups déclenchés après un réel engagement ne sont pas pénalisés. Pour en savoir plus, voir personnalisation et SEO.

Puis-je modifier ces modèles ?

Oui — chacun est un point de départ. Textes, couleurs, mise en page, visuels, déclencheurs, règles de ciblage et fréquence sont tous configurables, et le HTML et le CSS sous-jacents restent modifiables si vous voulez aller plus loin.

Quelle est la différence entre un pop-up et une barre d’annonce ?

Un pop-up recouvre la page et interrompt la visite pour demander une décision. Une barre occupe une bande en bordure du viewport et reste discrète, ce qui la destine aux messages continus plutôt qu’aux demandes ponctuelles.

L’IA peut-elle créer un pop-up pour moi ?

Oui. Décrivez ce que vous voulez et l’agent IA de Personyze le construit, après avoir analysé votre site pour relever couleurs de marque, polices, style des boutons et ton, afin que le résultat corresponde à vos pages. Le ciblage en langage courant est compilé en vraies règles qui vous sont relues, et tout est créé en staging : le trafic réel n’est pas affecté tant que vous ne publiez pas.

Comment la Roue de la fortune décide-t-elle de ce que l’on gagne ?

Chacun des quatre à huit segments porte un poids relatif de chance de gain, et les poids sont additionnés pour calculer les probabilités réelles — des poids de 35, 25, 20, 12 et 5 deviennent donc ces pourcentages. Un segment avec un libellé comme Retentez votre chance et sans code promo sert de case perdante. Le lot et le code gagnants sont enregistrés dans le profil du visiteur pour un ciblage ultérieur.

Pour commencer

Les 16 modèles se configurent et se ciblent sans code. Réservez une démo ou découvrez nos offres.

Créez n’importe lequel d’entre eux en le demandant simplement : l’agent de personnalisation IA.

À lire aussi

• Marketing de gamification — les mécaniques derrière les modèles interactifs.
• Roues de la fortune « tournez et gagnez » — la roue en détail.
• Barres livraison gratuite et paliers de fidélité — la stratégie panier moyen.
• Pop-ups et bannières — comment fonctionnent le ciblage et la fréquence.