Les pop-ups et les dons arrivent sur Vivlab.En savoir plus ›
Skip to content

Pop-up

Un pop-up est une fenêtre qui s'ouvre par-dessus votre site pour collecter une adresse e-mail, mettre en avant un code promo ou annoncer une nouveauté. Il se compose dans le même éditeur qu'une page, avec des réglages supplémentaires qui déterminent quand et il apparaît.

Vous ouvrez un pop-up dans l'éditeur depuis la section Pop-up du tableau de bord. Le panneau ci-dessous s'affiche dès que rien n'est sélectionné sur la canvas — c'est l'équivalent des réglages de page pour un pop-up.

Informations du pop-up

  • Nom du pop-up : uniquement visible dans votre tableau de bord, jamais sur votre site. Il sert à retrouver le pop-up dans la liste.
  • Cibles : les pages sur lesquelles le pop-up peut s'ouvrir (voir ci-dessous).
  • Pop-up activé : désactivez-le, puis publiez à nouveau pour le masquer sans supprimer sa version publiée. Le pop-up reste enregistré, apparaît Inactif dans la liste et sa maquette est rayée sur la canvas ; après publication, les visiteurs ne le voient plus.

Cibles

Le premier menu choisit la portée :

PortéeCe qui est ciblé
Tout le siteToutes les pages, boutique et blog compris
Page vitrineLes pages créées dans l'éditeur
Boutique en ligneLes pages catégories et les pages produits
BlogLe blog et ses articles

Dès que vous choisissez autre chose que Tout le site, un second menu apparaît pour restreindre encore : une page précise, une catégorie de la boutique ou une catégorie d'articles. Laissez-le sur « Toutes les pages vitrines », « Toutes les catégories » ou « Tout le blog » pour couvrir la portée entière.

Une catégorie choisie englobe aussi ce qui en dépend : pour la boutique, ses sous-catégories et les pages des produits qui lui appartiennent ; pour le blog, les articles qui y sont classés.

Les quatre portées possibles pour cibler l’affichage d’un pop-up.Les quatre portées possibles pour cibler l’affichage d’un pop-up.

Affichage

Déclencheur

  • Après un délai : s'ouvre après un temps d'attente sur la page. Le curseur Délai avant affichage va de 0 à 120 secondes (3 s par défaut) ; 0 l'ouvre dès le chargement de la page.
  • Durant la lecture de la page : s'ouvre quand le visiteur a parcouru une partie de la page. Réglez le seuil Lecture avancée à entre 0 et 100 % (50 % par défaut) ; sur une page sans défilement, le seuil est considéré comme atteint.
  • À la sortie : s'ouvre quand le curseur quitte la fenêtre vers la barre du navigateur. Ordinateur uniquement — il n'existe pas de geste équivalent sur mobile.
  • Au clic : ne s'ouvre que depuis un bouton ou un lien que vous désignez. Le panneau affiche alors la cible à recopier, de la forme popup:….

Ouvrir un pop-up depuis un bouton

Choisissez le déclencheur Au clic, copiez la cible popup:… affichée dans le panneau, puis collez-la comme Lien externe à ouvrir dans l'action au clic d'un bouton, ou comme adresse d'un lien posé dans un texte. Le clic ouvre le pop-up au lieu de changer de page.

Les déclencheurs par délai, lecture, sortie ou clic.Les déclencheurs par délai, lecture, sortie ou clic.

Fréquence

Disponible pour tous les déclencheurs sauf Au clic :

  • À chaque visite : s'affiche à chaque page vue.
  • Une fois par session : une seule fois dans l'onglet courant, jusqu'à sa fermeture.
  • Tous les X jours : réapparaît une fois le nombre de jours écoulé, de 1 à 365 (7 par défaut).

La fréquence est mémorisée au moment où le visiteur ferme le pop-up. Le mode Une fois par session utilise l'onglet courant ; le mode Tous les X jours utilise le profil du navigateur. Le pop-up peut donc réapparaître sur un autre appareil, dans un autre navigateur ou en navigation privée.

Les fréquences d’affichage d’un pop-up.Les fréquences d’affichage d’un pop-up.

Appareils

Les appareils ne se règlent pas ici mais dans la section Visibilité du panneau de style : masquez le pop-up sur mobile pour un affichage ordinateur seulement, ou l'inverse. La liste des pop-ups reprend ce choix sous la forme d'un badge Ordinateur uniquement ou Mobile uniquement.

Composer le contenu

Le contenu s'assemble comme sur une page : ajout d'éléments, glisser-déposer sur la canvas, panneau de style pour la mise en forme. Trois différences :

  • La barre de navigation, le pied de page et les sections pleine largeur ne sont pas disponibles dans un pop-up.
  • La largeur du pop-up se règle en tirant la poignée sur le bord de la maquette, séparément pour l'ordinateur et pour le mobile. Sur téléphone, le pop-up occupe au maximum toute la largeur de l'écran.
  • Le panneau de style du pop-up lui-même ne propose que l'arrière-plan, la bordure et la visibilité. L'arrondi des angles est fixe (16 px) pour que les bordures suivent toujours la forme de la fenêtre.

Côté visiteur, le pop-up se ferme par la croix, la touche Échap ou un clic en dehors de la fenêtre.

Publier le pop-up

Le bouton Publier le pop-up en haut à droite ouvre la fenêtre de publication : elle montre un aperçu ordinateur et mobile du pop-up posé sur la page ciblée (votre page d'accueil par défaut, la boutique ou le blog selon les cibles), puis met en ligne la version affichée. L'activation, le déclencheur, les cibles, la fréquence et les appareils sont publiés avec le contenu.

Si le pop-up est désactivé, la fenêtre le signale et propose Activer le pop-up avant de publier. Quand rien n'a changé depuis la dernière mise en ligne, le bouton affiche Pop-up à jour.

La documentation a été faite avec ❤️ par notre équipe interne.