Ajoute facilement un popup sur WordPress
  • Post author:

L Les popups sont perçus (à juste titre) comme pénibles pour les utilisateurs.
D’un autre côté, ils sont diablement efficaces pour provoquer l’action.

Je te propose d’installer un popup de sortie (ou exit popup) sur WordPress qui se déclenche uniquement quand le visiteur quitte la page.

Tu cumules tous les avantages :

  • l’expérience utilisateur n’est pas perturbée
  • tu collectes des inscrits supplémentaires à ta newsletter ou diriges vers une page de vente

Aujourd’hui, la moitié des inscrits à ma newsletter sont passés par le popup.

J’ai testé plus de 15 extensions avant de trouver Yeloni.

Je te montre la partie design et la configuration en vidéo ou à l’aide d’un tutoriel détaillé pas à pas.

picto articles débutants
Débutant

Cet article prend environ 4 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Crée un popup sur WordPress qui ne gène pas l’expérience utilisateur
Réalise facilement ton popup sur WordPress

Le tuto vidéo

tutoriel vidéo sur l'ajout d'un popup de sortie sur WordPress

Voici quelques critères pour décider si ce plugin correspond à tes besoins.

Yeloni Exit Popup : les avantages et les limites

Pour commencer, voici le rendu obtenu sur mon site.

exemple d'intégration du popup sur un site

Je n’évalue ici que la version gratuite de l’application.

Les avantages

  • 22 modèles réussis et faciles à personnaliser
  • tu visualises les modifications en temps réel
  • l’intégration de Mailchimp
  • le tracking Google Analytics
  • la case à cocher pour le RGPD
  • pas de limitation du nombre de popups, de visiteurs ou d’e-mails transmis
  • possibilité de rediriger vers une page après inscription

Les inconvénients

  • pas disponible sur mobiles
  • l’absence de la personnalisation de certains éléments
  • une interface uniquement en anglais
  • pas de déclenchement spécifique en fonction des pages
  • tu as un petit message Yeloni sous le popup

Je te propose de concevoir le design de ton popup.

Personnalise ton visuel

Tu installes et actives l’extension Yeloni Exit Popup depuis le répertoire de WordPress.

extension yeloni exit pop up

Tu retrouves l’extension dans le menu de gauche.

menu yeloni exit popup

Tu peux passer la vidéo.

passer video introduction

Tu disposes de modèles pour :

  • Souscrire à ta newsletter
souscription newsletter
  • Renvoyer vers une page (coupon, livre blanc, page de vente…)
popup bouton
  • Inciter au partage sur les réseaux sociaux
popup reseaux sociaux

J’ai sélectionné ce modèle.

modèle utilisé

Je te conseille de sélectionner le modèle qui s’approche le plus du résultat que tu souhaites obtenir.

L’interface est pensée pour te faciliter la vie mais en contre-partie tu ne peux pas tout personnaliser.

Dans le cas de ce visuel par exemple, il est prévu avec une photo. J’ai essayé avec un fond de couleur mais le masque gris qui fonctionne parfaitement avec une illustration est moins probant.

Toutes les étapes de personnalisation se déplient dans le menu de droite. Tu visualises les changements immédiatement.

éléments à personnaliser

Tu commences par le titre (et le sous-titre) :

  • texte
  • famille de police
  • couleur du texte
  • taille de la police
  • gras
  • italique
  • couleur du fond
options titre

Tu indiques le texte qui apparaît dans la saisie du nom. Tu le désactives si tu le souhaites.

champ nom

Tu complètes le texte du champ e-mail.

champ e-mail

Tu actives la case à cocher du RGPD.

champ rgpd

Les options du bouton :

  • texte
  • famille de police
  • couleur du texte
  • taille du texte
  • gras
  • italique
  • couleur du fond
options bouton

Tu as les mêmes options pour le texte complémentaire sous le bouton.

texte complémentaire

Tu peux masquer la croix pour fermer le popup.

option fermeture

Les options de couleurs du fond :

  • Couleur
  • Opacité (de 0 à 1)
  • Hauteur
  • Largeur
couleur fond

Tu peux ajouter une image de fond.

Tu coches Use Image as a background.
Tu notes les dimensions du visuel à créer (ici 500 X 421 px).

ajout image de fond

Tu charges ton visuel dans les médias de WordPress et cliques sur celui-ci.

Tu retrouves l’adresse de ton image.

trouver url image

Tu peux activer le suivi de tes résultats par évènements dans Google Analytics.

Tu indiques le nom qui apparaîtra dans tes rapports.

Je te détaille comment obtenir le code à coller.

insertion code suivi

Dans Google Analytics > Administration,

administration google analytics

tu cliques sur Informations de suivi au niveau de la propriété.

informations suivi

Tu copies le code.

copie code analytics

Tu vas créer une clé d’activation.

étape suivante

Tu lances le générateur.

clé api

Tu complètes (les données n’ont pas d’impact) :

  • prénom
  • nom
  • e-mail

puis colles le code.

générateur clé

Tu nommes ton popup.

nommer popup

Tu sauvegardes ton design.

sauvegarde design

Tu vas déterminer sous quelles conditions ton visuel va apparaître.

Configure l’affichage

Tu lances la configuration.

passer à la configuration

Les étapes sont formalisées sous forme de questions. Je passe les étapes de la version payante.

étapes de la configuration

Le popup s’affiche :

  • Une fois seulement par visiteur
  • Une fois par session
  • Systématiquement
répétition

Le popup s’affiche quand :

  • la souris dépasse le haut de la page
  • immédiatement
  • après une durée de visite en secondes
  • après une consultation d’un pourcentage de la page
  • au premier scroll
  • au clic d’un lien spécifique
  • quand le visiteur clique sur le bouton retour du navigateur
déclencheur

Tu peux connecter ton compte Mailchimp automatiquement.

connecter mailchimp

Tu valides la liste qui sera enrichie.

Tu choisis si les visiteurs restent sur la même page ou s’ils sont redirigés vers une page spécifique.

Tu complètes le message affiché après la validation.

connecter mailchimp configuration

Tu finalises.

sauvegarde

Tu testes le bon fonctionnement et les remontées dans Mailchimp.

Conclusion

Yeloni assure parfaitement la fonction que je désire pour un popup de sortie :

  • Simple
  • Rapide à mettre en place
  • Léger
Un popup de sortie gratuit sur WordPress à l'aide de 26 modèles.

Cela faisait longtemps que je cherchais un successeur à Sumo qui plombait la vitesse du site.

Ce fût compliqué d’assurer la relève.

Je suis passé de déceptions en déconvenues lors des tests :

  • trop complexe
  • des designs peu attractifs
  • une limitation du nombre de visiteurs…

Je suis heureux d’avoir persévéré mais je commençais sérieusement à douter.

Pour t’inspirer, tu trouveras 25 exemples de design de popups dans cet article de La Fabrique Du Net.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous autres tutoriels de la rubrique Attirer des visiteurs sur ton site

bannière pour l'inscription à la newsletter
portrait jean lochet fondateur pourpasunrond.fr  1

Jean

Fondateur, auteur et homme à tout faire

J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Laisser un commentaire