Des popups élégantes pour promouvoir ta newsletter, tes offres… sur WordPress

Cet article prend environ 8 minutes à lire en intégralité.

L Les popups deviennent vite agaçantes et font fuir tes lecteurs.
D’un autre côté, elles sont diablement efficaces pour provoquer l’action : la moitié des inscrits de ma newsletter sont passés par la popup.

Profite des bénéfices des popups sans perturber l’expérience de tes visiteurs :

• Tu t’adaptes aux usages des visiteurs sur mobiles et sur ordinateur.
• Tu mets en avant ton offre du moment, un code de réduction pour le premier achat, un livre blanc, ta newsletter…
• Tes popups sont élégantes et s’harmonisent avec le design de ton site.

Je te montre dans ce tutoriel toutes les étapes pour disposer facilement de popups esthétiques avec une extension WordPress.

Les extensions de popups sur WordPress fonctionnent sur un modèle freemium et plus rarement en premium. La majorité des créateurs conservent les fonctionnalités les plus intéressantes aux versions payantes.

Les alternatives écartées

• OptinMonster : 47 $/mois pour la fonctionnalité de détection de la sortie (exit intent)
• Popup Maker : exit intent et déclenchement au défilement (scroll) à 87 $/an
• Popup Builder : 15 $/an pour l’exit Intent et 17 $/an pour le scroll
• Elementor Pro est une bonne option si vous l’utilisez déjà : 49 $/an
• Yeloni : Les filtres des pages et des mobiles à 99 $/an
• Sumo : Son poids ralentit considérablement les sites

Hustle présente des tarifs élevés en payant (49 $ /mois) mais ils se montrent bien plus généreux dans la version gratuite.

Pourquoi j’ai choisi Hustle ?

Tu crées gratuitement 3 popups. Hustle ne limite pas les fonctionnalités en dehors des tests A/B. Tu commences à expérimenter des actions marketing spécifiques et ciblées avec la version gratuite.

Les 100 000 installations actives, la note de 4,5 / 5 étoiles et la fréquence des mises à jour valident la pertinence d’utiliser cette extension. Plugintests.com estime que l’impact sur la vitesse de ton site sera à peine ressenti. Hustle fonctionne avec tous les thèmes WordPress.

Le récapitulatif des fonctionnalités

Voyons ce que cela donne en pratique.

Installe et paramètre Hustle

Tu installes et tu actives le plugin Hustle – Email Marketing, Lead Generation, Optins, Popups depuis le répertoire de WordPress.

Nous commençons par les paramétrages généraux qui ne prennent que quelques minutes dans Settings.

Les règles de gestion des données privées pour le RGPD (Viewer’s Privacy)

Tu désactives le suivi des IP. J’ai également mis 0 jour de rétention par sécurité.

Tu sauvegardes.

Ta palette de couleurs personnalisée (Color Palettes)

Cette option peut-être intéressante si tu comptes créer de nombreuses fenêtres surgissantes mais tu ne vois pas trop à quoi correspondent les intitulés au début.

Le suivi des résultats (Top 3 Metrics)

Tu sélectionnes 3 indicateurs qui remontent dans la synthèse en fonction de tes objectifs.

• Le taux de conversion moyen (Average conversion rate)
• Le nombre de conversions de la journée par module (Today’s conversion)
• Le nombre de conversions des 7 derniers jours par module (last 7 days’s conversion)
• Le nombre de conversions du dernier mois par module (last 1 month’s conversion)
• Somme totale depuis l’origine (Total conversions)
• Le module le plus performant (Most conversions)
• Les modules inactifs (Inactive modules)
• Le volume total de modules (Total modules)

Tu remontes les données directement dans ton tableau de bord de WordPress en l’activant dans Dashboard Analytics.

Tu nommes ton tableau, tu définis les rôles qui peuvent y accéder et les modules à faire figurer avant de sauver.

Il ne me semble pas nécessaire de toucher aux autres réglages.

Crée ta pop-up sur WordPress avec Hustle

Hustle permet de créer des boutons de partage et de collecter des e-mails au sein de pages et des articles. Je vais me concentrer sur la création de pop-ups. Les slide-ins sont des pop-ups qui ne couvrent qu’une fraction de la page. Le fonctionnement est identique.

Tu crées ta première popup.

Tu nommes ton modèle et tu choisis ton objectif :

• Collecter directement les e-mails dans la fenêtre (Email optin)
• Présenter un bouton d’action (Informational)

J’intègre un bouton vers la page de ma newsletter et non une zone de saisie.

La première raison : SendFox, que j’utilise, n’est pas intégré.

Je peux passer par Zapier. Cependant, j’aurais quand même choisi cette option. J’ai trop souvent été obligé de réactiver les connexions lors des mises à jour des solutions d’e-mailing avec mes précédents outils.

Les services de routage d’e-mails directement intégrés dans Hustle.

• AWeber
• ActiveCampaign
• Campaign Monitor
• MailChimp & MailChimp groups
• Constant Contact
• ConvertKit
• GetResponse
• Mailster
• Hubspot
• Sendy
• Mad Mimi
• Mautic
• Infusionsoft
• SendinBlue
• MailPoet
• MailerLite
• iContact
• Zapier
• SendGrid

Tu choisis l’un des 16 modèles ou tu crées depuis une page blanche.

Je sélectionne le minimaliste.

Tu visualises le résultat attendu avec preview.

Je te conseille de réaliser une capture d’écran que tu conserves de côté ou que tu imprimes pour visualiser les éléments et leurs emplacements. Tu rédiges tes textes en amont pour gagner du temps. Tu enregistres l‘image pour connaître les dimensions optimales.

Personnalise les textes de ta popup

Tu retrouves la prévisualisation qui intègre tes modifications au fur et à mesure.

Tu complètes tes textes et tu intègres ton image.

Certains éléments peuvent être désactivés comme les boutons ou la phrase « Non merci, je ne suis pas intéressé. » située en dessous.

Tu complètes le texte de ton bouton, la page de destination et si tu souhaites un affichage dans un nouvel onglet (New tab).

Designe ta pop-up : mise en forme, couleurs et typographie

Tu définis l’apparence de ton visuel. La majorité des réglages se font sur l’onglet ordinateur (Desktop) et les ajustements dans l’onglet Mobile.

Tu peux changer toutes caractéristiques de ton visuel et du bouton : taille, emplacement… C’est à manier avec prudence pour éviter de dénaturer les modèles qui fonctionnent bien visuellement.

Tu définis une police unique pour l’ensemble des textes ou tu définis la typographie de chaque élément.

Tu choisis une palette par défaut (voire celle que tu as créée) ou tu définis les couleurs des éléments :

• Pop-up Container : fond transparent qui entoure la popup
• Main Layout : fond
• Featured Image : image
• Content Wrapper : zones de textes
• Title : titre
• Subtitle : sous-titre
• Main Content : texte principal
• Call to Action – Container : bordure du bouton
• Call To Action – Button : bouton
• Close Button : bouton de fermeture
• « Never see this again » Link : texte de fermeture sous le message

Filtre les conditions d’affichage de ta popup

Tu établis les règles d’affichage de ton message en fonction de conditions. C’est l’occasion de procéder à un ciblage pointu en fonction de tes objectifs.

C’est plus simple de définir quand ta popup apparaît avec Show que de préciser quand elle ne s’affiche pas avec Hide.

Ton message est déclenché si l’ensemble des conditions s’appliquent (all) ou seulement si une est respectée (any).

Tu peux décider de ne l’afficher que pour des articles et pas les pages. Je retiens trois filtres très utiles :

• Le choix de certaines catégories
• Le type d’appareil : ordinateur ou mobiles (y compris tablettes)
• Des urls spécifiques

Les options s’affichent une fois les filtres sélectionnés.

J’ai ici un affichage uniquement sur les mobiles qui exclut trois pages.

Déclenche tes popups au bon moment

Il est préférable de ne pas multiplier les déclencheurs pour éviter les affichages intempestifs sur une page.

Je commence par créer une version spécifique pour les mobiles avant de l’adapter pour les ordinateurs.

Tu programmes l’affichage pendant une période, sur des heures ou des jours spécifiques.

Tu déclenches l’apparition de la fenêtre après un délai de présence sur la page. Il est paramétré par défaut pour apparaître dès la fin du chargement de la page. Tu retrouves fréquemment ce cas sur les sites d’e-commerce avec un code promotionnel pour le premier achat.

Tu définis un pourcentage de défilement de ta page. J’utilise cette option sur mobile car la détection de sortie n’est disponible que sur ordinateur. Tu peux également définir un élément spécifique de ta page comme signal d’activation.

Mes réglages pour ma popup sur mobiles.

Tu règles la fermeture dès que les visiteurs cliquent à l’extérieur de la zone et quand l’action désirée est effectuée.

Tu répètes l’instruction de fermer la pop-up lors d’un clic à l’extérieur en plus du clic sur la croix.

Tu indiques de ne plus afficher le message ensuite pendant une durée définie. Cette option active la dépose d’un cookie réglementé par le RGPD.

Tu n’autorises pas le défilement du site quand ta popup est active. Tu n’affiches plus le message après la conversion (cookie).

Tu publies ton œuvre.

Tu retrouves tes pop-ups actives dans le menu.

Tu cliques sur la roue pour dupliquer ton modèle.

Je paramètre ma version destinée aux ordinateurs.

Je conserve le délai de 10 minutes et ajoutes une détection d’intention de sortie du site.

Voici le résultat sur ordinateur

et sur mobiles.

Il te reste un dernier réglage. Tu sélectionnes tes pop-ups et tu actives le suivi des conversions.

Tu testes la mise en place sur ton site. Tu vides ton cache si elles n’apparaissent pas.

Conclusion

J’ai trouvé toutes les options que je recherchais avec Hustle :

• Une apparition précise en fonction des versions mobile et ordinateur
• La détection de l’intention de partir du site
• Un suivi simple des résultats
• Des modèles esthétiques

Le seul vrai défaut est l’absence d’une adaptation visuelle en direct sur les visuels.

Assurer la relève de Sumo puis de Yeloni s’est révélé complexe. Je suis passé de déceptions en déconvenues lors des tests :

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

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

Les articles qui peuvent t’intéresser :

• Rédige un e-mail de bienvenue efficace
• Découvre SendFox pour router ta newsletter et tes e-mails
• Utilise une série d’e-mails pour convertir tes abonnés et accompagner tes acheteurs

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

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean