Afficher un popup d’informations sur son site WordPress

On peut parfois avoir besoin d’afficher une information importante sur son site, qui doit être vue par tous nos visiteurs.
En ce moment par exemple, vous pouvez avoir besoin d’indiquer à vos clients des informations sur votre entreprise durant le confinement: fermetures de votre magasin ou de vos bureaux, maintien d’un service par téléphone, indiquer votre dispositif de vente ou de livraison, etc…
Mais on peut aussi en avoir besoin dans d’autres cas, par exemple communiquer sur une promotion ou des nouveautés, indiquer des horaires d’ouverture ou fermeture exceptionnels, etc…

Une des manières les plus efficaces, c’est d’afficher un popup qui va apparaître par dessus le reste de la page, ainsi, votre lecteur ne pourra pas rater l’info.

Cependant, pour que cela ne devienne pas pénible pour les visiteurs, il faut pouvoir paramétrer ce popup pour ne pas gêner le lecteur, par exemple en ne l’affichant que la première fois qu’il arrive sur la page…

J’ai recherché une extension qui réponde à plusieurs critères:

• version gratuite,
• paramétrage de l’affichage (possibilité de définir la fréquence d’affichage, les conditions qui vont déclencher l’apparition du poup, etc…)
• possibilité de personnaliser l’aspect (couleurs, etc…)

Dans ce mini-tuto, je vais vous montrer comment installer et paramétrer l’extension WordPress Popup Maker. Il existe bien d’autres extensions pour afficher des popups, certains très sophistiquées, mais ici je vais vous montrer une utilisation toute simple: afficher un message d’information.

Le tuto: installation et paramétrage de WordPress Popup Maker

Installation

Pour installer l’extension ,

1. cliquez sur Extensions > Ajouter dans le menu de gauche de l’interface d’administration de votre site WordPress,
2. Tapez « popup maker » dans le champ de recherche. Une liste d’extensions apparaît dans les résultats de recherche
3. Repérer « Popup Maker » (en général la première de la liste), et cliquez sur « Installer »

Quand l’extension est installée, le bouton indique « Activer », cliquez dessus:

Création d’un popup

Une fois l’extension activée, un nouvel onglet « Popup Maker » apparaît dans le menu à gauche, passez la souris au-dessus et cliquez sur « Ajouter Popup »:

Le formulaire d’édition du popup apparaît:

1. Indiquer le nom de votre popup (pour pouvoir l’identifier facilement)
2. Vous pouvez indiquer un titre qui s’affichera dans votre popup (facultatif)
3. Indiquez ensuite le texte de votre popup: vous pouvez mettre du gras de l’italique, des images, etc…

Paramétrage du déclenchement du popup

Descendez ensuite dans la page, dans le bloc « Paramétres du Pop-up »:

L’onglet « Déclencheurs » permet de paramétrer les conditions dans lesquelles le popup va apparaître. Pour cela, cliquez sur le bouton « Ajouter un nouveau déclenchement »:

Il y a plusieurs modes de déclenchement possibles:

• « Cliquez sur ouvrir » : le popup s’affiche lorsque le visiteur clique sur un lien
• « Temporisation / Ouverture automatique »: le popup s’ouvre automatiquement
• « Soumission du formulaire » : ce déclencheur ne va pas afficher le popup, mais déclencher une action suite à l’envoi d’un formulaire, par exemple pour l’inscription à une newsletter. Nous ne détaillerons pas cette utilisation ici.

Pour ce tuto, nous allons choisir « Temporisation / Ouverture automatique », et cocher la case « Souhaitez-vous également configurer un cookie », afin de se souvenir que le visiteur a déjà vu le pop-up, et ne pas lui afficher à chaque page qu’il visite sur le site:

On choisit de créer le cookie à la fermeture du popup, puis cliquez sur ajouter:

Une autre fenêtre s’ouvre pour paramétrer le délai avant l’ouverture du popup. Indiquons 2000ms pour laisser un petit délai de 2s avant l’affichage du popup:

Par défaut, le cookie est paramétré sur 1 mois, ce qui signifie qu’un utilisateur qui a vu et fermé votre pop-up ne le reverra pas avant un mois. vous pouvez modifier ce paramétrage en cliquant sur le petit crayon en face du cookie de fermeture du popup, pour modifier cette durée:

La durée du cookie doit être indiqué en anglais . Les unités possibles sont:

• year. Ex: 1 year, 2 years
• month: 1 month, 2 months
• week: 1 week, 2 weeks
• day: 1 day, 5 days
• hour: 1 hour, 12 hours
• minute: 1 minute, 30 minutes
• seconds

Par exemple pour que le popup ne réapparaisse pas avant 1 semaine, indiquez 1 week, puis cliquez sur « Mettre à jour »:

Ciblage de l’affichage du popup

L’onglet « Cibler » permet de restraindre l’affichage de la pop-up.

Vous pouvez choisir de n’afficher votre popup que sur certains types de contenus (par exemple uniquement sur la page d’accueil ou certaines pages que vous choisissez, ou bien uniquement sur les pages et pas sur les articles, etc… ). Vous pouvez aussi décider de ne pas afficher le popup sur les mobiles et/ou les tablettes. Les possibilités sont assez puissantes, mais pour ce tuto simple, nous chosissons de garder le comportement par défaut, qui affiche le popup sur toutes les pages:

Personnalisation de l’affichage

L’onglet « Affichage » permet de personnaliser l’affichage. Vous pouvez régler:

• Le thème du pop-up: je vous conseille de choisir « Lighbox », qui affichera un popup par-dessus votre page, qui resera visible en transparence mais inactive tant que le popup ne sera pas fermé.

Vous pourrez personnaliser l’apparence en détail en cliquant sur « Personnaliser ce thème », nous verrons cela en détail plus bas.

• La taille du popup:

• l’animation lorsque le pop-up apparaît:

• la position du popup dans la page. Je vous conseille de choisir « milieu centre », ainsi votre popup se palcera au centre de la page. Dans le cas où le popup s’affiche suite à un clic sur un lien, vous pouvez aussi choisir de choisir la position en fonction de l’emplacement du lien cliqué:

• l’onglet « Fermer » va vous permettre de personnaliser le mode de fermeture du popup : modifier le texte (par défaut « Fermer ») , différer l’apparition du bouton de fermeture (par exemple si vous voulez forcer les gens à lire le texte avant de leur permettre de fermer le popup), et dans l’onglet « Méthodes alternatives »,, vous pouvez aussi permettre la fermeture du popup en cliquant dans le fond de page ou en utilisant la touche « ESC » (ou  » Echap » en français):

Personnalisation avancée du pop-up

Vous pouvez aller encore plus loin dans la personnalisation du pop-up, comme la couleur du fond de page, la couleur et la police du texte et du titre, etc…

Pour cela, retourner dans les paramètres du popup, puis allez dans Affichage > Apparence > et cliquez sur « Personnaliser ce thème ».
La video ci-dessous vous montre les différentes personnalisations que vous pouvez faire:

Résultat

Vous obtenez un pop-up qui s’affichera sur n’importe quelle page du site, une seule fois (c’est-à-dire que si le visiteur passe sur d’autres pages de votre site, il ne verra à chaque fois le pop-up ce qui pourrait être agaçant). S’il revient dans la même semaine, il ne le verra pas non plus, puisque j’ai paramétré le cookie à 1 semaine.

Comment désactiver le pop-up ?

Que faire lorsque l’information que vous voulez communiquer n’est plus d’actualité et que vous ne souhaitez plus afficher le pop-up?

Vous pourriez aller le supprimer, mais ce serait dommage, car vous pourrez en avoir besoin plus tard, et il faudrait tout recommencer…

Je vous conseille donc plutôt de la désactiver: pour cela, il suffit d’aller le mettre en « brouillon » au lieu de « publié ».

Dans le menu de gauche, cliquez sur Popup Maker, puis « Tous les pop-ups ».
La liste des pop-ups apparaît.

Passez la souris au-dessus du pop-up que vous souhaitez désactiver, puis cliquez sur « Modification rapide »:

Un petit formulaire de modification s’affiche.

1. Cliquez sur « Publié »
2. Puis sélectionez « Brouillon » dans la liste déroulante qui s’affiche
3. Et enregistrez en cliquant sur le bouton « Mettre à jour »

Votre pop-up n’apparaîtra plus. Vous pourrez le réactiver en faisant la même manipulation , mais en choisissant « publié ». Vous pourrez aussi aller modifier le texte ou les autres paramètres en cliquant sur « Modifier » au lieu de « Modification rapide »

Le popup ne s’affiche pas…

Vous avez suivi le tutoriel pas-à-pas mais le popup ne s’affiche pas…

Voici 3 points à vérifier qui pourraitent empêcher le popup de s’afficher:

Vérifiez qu’il est bien publié, et non à l’état de brouillon

Pour cela, allez dans le menu Popup Maker > Tous les popups.
La liste des popups s’affiche et vous pouvez vérifiéer s’ils sont publiés:

Si ce n’est pas le cas, cliquez sur Modifier en dessous du nom du popup, et aller changer son état de publication dans le bloc « Publier » (sans oublier de cliquer sur le bouton « Mettre à jour »):

Vérifiez qu’un déclencheur de type « Temporisation/ Ouverture automatique » a bien été paramétré

Vérifiez qu’un ciblage trop restrictif n’a pas été paramétré, par exemple « Désactivé sur toutes les pages »:

Conclusion

Je vous ai montré comment afficher très simplement, avec une extension gratuite mais simple d’utilisation, un pop-up d’information sur votre site WordPress.

C’est un moyen efficace de fournir une information importante que votre visiteur ne pourra pas rater. Il faut cependant bien régler les paramètres d’affichage du pop-up, pour ne pas gêner le parcours de votre visiteur sur votre site. WordPress Popup Maker dans sa version gratuite permet une grande souplesse de paramétrage.

J’espère que ce tutoriel vous a été utile. N’hésitez pas à me poser des questions ou à me demander des précisions supplémentaires dans les commentaires ci-dessous, je me fera une joie d’y répondre.

Photo by Prateek Katyal from Pexels