Le pop-up de sortie avec Sumo7 minutes à lire

Le pop-up de sortie est l’outil idéal pour trouver de nouveaux abonnés à ta newsletter sans interrompre ton lecteur.

La preuve : 50% des inscrits de ma newsletter passent par ce pop-up.

résultats du pop-up

Il se déclenche uniquement quand tes visiteurs quittent ton site.

Tu disposes de 500 souscripteurs offerts avec la version gratuite ce qui te laisse le temps de développer ton site.

picto articles intermediaires

Intermédiaire

Installe Sumo

Note : J’ai rencontré des problèmes avec Firefox pour Sumo. J’ai été obligé de travailler sur Chrome pour personnaliser les couleurs.

  • Rechercher SumoME dans les extensions

extension wordpress sumo

  • Installer et activer SumoME

En haut à droite de ton écran, tu as désormais une couronne.

  • Cliquer dessus
  • Entrer son e-mail et un mot de passe
  • Bouton Sign up

sumo inscription

A droite de ton écran,  tu as désormais un léger onglet bleu (si je t’assure, regarde bien)

sumo onglet masqué

  • Passer dessus pour l’agrandir et cliquer sur la couronne pour accéder au menu

sumo onglet apparent

Quasiment à chaque fois que tu iras dans Sumo, la liste des différentes propositions tarifaires s’affichera (il faut bien qu’ils essaient de te vendre les options payantes).

Il faut cliquer sur Free pour continuer sur la version gratuite.

sumo grille tarifs

Le Pop-up de sortie

Je considère les pop-ups comme une vraie plaie qui te flinguent la navigation. Cependant, il existe un pop-up qui ne gène en rien la navigation. Le pop-up de sortie se déclenche quand les lecteurs remontent vers la barre de navigation en général après avoir consulté ton article (optimiste) ou pour revenir sur Google (pessimiste).

  • Cliquer sur off de List builder pour l’activer

sumome menu list builder

sumo activer list builder

  • Double cliquer sur l’icône List builder

sumo lancer list builder

  • Bouton Create a new popup

sumo nouveau pop up

  • Donner un nom, par exemple Pop-up de sortie
  • Bouton Okay let’s go

sumo nommer pop up

Nous allons prendre toutes les étapes une par une.

sumome--menu du list builder de sumo

My Goal

  • Cocher Collect Emails

sumo choix collecter e-mails

Form type

  • Cocher Popup

sumo choix pop-up

Design

  • Choisir son modèle
    Je trouve que celui avec le portrait humanise l’interaction. Si tu ne veux pas te prendre la tête avec la création, il est préférable de sélectionner une version texte seul.
  • Cliquer sur le modèle

sumome list builder design

Dans cet exemple, je vais choisir le modèle par défaut.

sumo popup template par défaut

sumo visuel du popup par défaut

Barre d’outils

La barre d’outils est située au dessus de la zone de visualisation.

sumo popup barre outils

  • Move : pour déplacer l’élément sélectionné
  • Align : modifie l’alignement de l’élément
  • Layer : réorganise la position de plusieurs éléments superposés :
    • To front : tout en haut de la pile
    • To back : tout en bas
    • Up : remonte d’un niveau
    • Down : baisse d’un niveau

sumo popup barre gestion des calques

  • Duplicate : copier un élément : très utile pour éviter de refaire 10 fois la mise en forme
  • Delete : supprime l’élément
  • Add new : Ajoute un nouvel élément
    • Text
    • Image
    • Background : fond
    • Button : bouton
    • Social button : partage sur les réseaux
    • Close button : bouton de fermeture du pop-up
    • Texte input : champ de saisie
    • Hidden field : le champ caché qui permet d’ajouter un code pour tracer la provenance qui n’apparaît pas pour l’utilisateur
    • Checkbox : case à cocher
    • Dropdown : menu déroulant
    • Radio group : bouton radio (1 seul choix possible)
    • Checkbox group : cases à cocher
    • Countdown : compteur

sumo popup barre outils ajout d'un élément

Textes

  • Cliquer sur la zone de texte à modifier

Tu retrouves les outils dans la barre de gauche.

Width

Largeur du texte en pixel : les modèles sont bien réalisés. Je conseille de ne pas y toucher.

Text

Le texte qui s’affiche. Nous allons indiquer par exemple Inscription à la newsletter.

sumo popup texte largueur

Font

La police d’écriture. Tu reprends la police utilisée pour tes titres et modifies la taille si tu le souhaites.

Text align

L’alignement du texte : ajusté à gauche, centré et ajusté à droite

Line height

La hauteur de ligne correspond à l’espace total occupé en hauteur par cette ligne de texte. Il s’agit d’un multiplicateur de la hauteur du texte.

sumo popup texte police

Background

La couleur sous la zone de texte. Sélectionner l’option de remplissage :

  • Solid Color : couleur unie
  • Left to right gradient : dégradé de gauche à droite
  • Top-Left to Bottom-Right gradient : dégradé du coin haut-gauche à bas-droite
  • Top to bottom gradient : dégradé de haut en bas
  • Bottom-Left to Top-Right gradient : dégradé du coin bas-gauche à haut-droite

sumo popup texte liste des options pour le fond de couleur du texte

  • Choisir la (les) couleur(s) du fond

Font

La couleur de l’écriture

Borders

Cocher pour intégrer une bordure en haut, à gauche, en bas et à droite.

sumo popup couleur texte

Border width

Épaisseur de la bordure en px

Border color

Couleur de la bordure

Border radius corners

Arrondi des angles de la bordure du texte. Chaque angle est sélectionné indépendamment : haut-gauche, haut-droite, bas-gauche, bas-droite

Border Radius

Angle de l’arrondi

sumo popup texte options des bordures

Box Shadow

Ombre portée de la zone de texte

Inset box Shadow

Ombre à l’intérieur de la zone de texte

Text shadow

Ombre portée du texte

Les options :

  • Position : Le point dans le cercle donne l’orientation et la taille de l’ombre
  • Blur : Le degré de flou de l’ombre
  • Color : La couleur de l’ombre

sumo popup texte ombres

sumo popup texte ombres exemple

La zone de saisie

Cliquer sur la zone de saisie

sumo popup saisie

Presets

Type de données saisies :

  • Custom : libre
  • Email
  • Name : nom (prénom + nom de famille)
  • First Name : prénom
  • Last Name : nom de famille
  • Company : entreprise
  • Zip code : code postal
  • Website URL : site
  • Phone number : numéro de téléphone

sumo popup saisie liste des options

Variable Name

Nom du champ dans la base de donnée

Required

Le champ est obligatoire si la case est cochée

Placeholder Text

Texte présent dans la zone de saisie

sumo popup saisie nom texte requis

Les autres éléments sont identiques à ceux utilisés pour le texte.

Le bouton

Cliquer sur le bouton

Click action

Ce que le clic déclenche (en plus de l’enregistrement) :

  • Submit form : enregistrement de la demande
  • Close popup : ferme le pop-up
  • Opt-out : sortie
  • Redirect To : redirige vers une url GOOGLE ANALYTICS : c’est ici que tu dois inscrire ta page de remerciements que tu suivras dans Google Analytics
  • Download Content Upgrade : téléchargement de la prime à la souscription
  • Request push permission : demande d’autorisation pour les alertes

sumo popup bouton liste des actions après clic

Text

Le texte qui apparaît dans le bouton

sumo popup bouton

Les autres éléments sont identiques à ceux utilisés pour le texte.

La forme du pop-up

Cliquer sur une partie vide du pop-up

Fill mode + Fill color

Positionnement du popup et couleur autour : honnêtement je n’ai pas bien vu l’impact de ces réglages

sumo popup forme

Background Image

Charger une image de fond

Background

Les options pour colorer l’arrière plan (identiques au texte)

sumo popup fond de couleur

Onglet Success

Il s’agit du message qui apparaîtra quand un lecteur a validé le formulaire.
Exemple de message : Inscription réussie ! Vous recevrez désormais la newsletter chaque lundi.

sumo-popup-success

Visibility

  • Sélectionner Manual Mode

sumo popup visibility mode manuel

  • Cliquer sur l’onglet User Leaves

sumo popup visibility onglet users leaves

Ne pas afficher sur les utilisateurs sur mobile (optionnel mais souhaitable)

  • Cliquer Add new rule

sumo popup visibility ajouter exclusion

  • Onglet Not show > Devices > Mobile
  • Bouton Add this condition

sumo popup visibility exclure mobiles

Success

  • Cliquer sur Welcome
    Une fenêtre s’ouvre avec l’e-mail de bienvenue qui sera adressé au souscripteur.

sumome list builder personnalisation success

Les différents éléments à compléter :

Subject Line

L’objet de l’e-mailing,  par exemple : Vous êtes désormais inscrits à la newsletter de Culture de l’asperge en Alsace sud

From name

L’expéditeur, par exemple : Maurice Duchardon – Les petits pois sont gris clairs

From Address

L’adresse d’expédition.

sumo email de confirmation

Adresse d’expédition personnalisée

L’adresse d’expédition personnalisée au nom de ton site n’est pas obligatoire mais plus élégante. Le process est très similaire à celui effectué pour la mise en place de MailChimp.

  • Bouton Use custom adress
  • Compléter l’adresse de l’expéditeur

Le formulaire s’agrandit et tu vois désormais apparaître 6 cases

sumome list builder personnalisation de l'adresse d'expédition de l'email de confirmation

  • Se connecter sur le cPanel d’O2switch

Domaines > zone editor

o2switch zone editor

  • Cliquer sur Gérer

o2switch zone editor gérer

  • Cliquer sur Ajouter un enregistrement
  • Copier dans nom le contenu de Host de la première ligne
  • Sélectionner CNAME dans type
  • Copier dans Enregistrement  le contenu Data de la première ligne
  • Bouton ajouter un enregistrement
  • Recommencer pour les 2 lignes suivantes

o2switch ajout d'un cname

Retour dans Sumo :

  • Bouton Validate
  • Bouton Save adress

Body texte

Intégrer le texte de l’e-mail d’accueil par exemple :
“Merci de votre inscription à la newsletter Fabriquer sa vodka dans la baignoire.

Je vous adresserai désormais les nouveaux articles sur la distillation clandestine et les meilleures sources de patates.

Pour orienter les prochains articles, je souhaiterais savoir quel problème principal que vous aimeriez résoudre ?

Vous pouvez répondre directement à ce message.

A bientôt,

XXXX
XXXXXXX.com”

  • Vérifier la mise en page avec le bouton Preview
  • Bouton save e-mail

sumo le texte de l'email de confirmation

Onglet Redirect URL

  • Ajouter l’adresse de sa page de bienvenue à la newsletter Dans Download Content Upgrader

sumo success redirect

L’option  Auto Close Timer permet de définir un temps à partir duquel le pop-up se fermera automatiquement.

sumo success fermeture

  • Bouton Make Live

sumo popup make live

La version gratuite ne permet pas d’intégrer directement les souscripteurs dans les solutions d’e-mailing.

Le plus simple est de copier les adresses directement dans les notifications à chaque alerte et les intégrer manuellement dans MailChimp.

C’est contraignant. Pour l’éviter et automatiser la procédure, c’est 29 $ par mois. Cela fait réfléchir. Les inscriptions au départ se font souvent au compte goutte. C’est gérable.

Conclusion

Tu disposes désormais d’un atout supplémentaire pour faire croître ta newsletter. J’ai aujourd’hui environ 70% de mes souscriptions qui arrivent par ce biais.

Couplé à une incitation forte à la souscription, ce mécanisme fait des merveilles.

Découvre comment générer gratuitement 50% d'inscrits supplémentaire à ta newsletter.

 

Les articles qui peuvent t’intéresser :

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

bannière de la newsletter pour pas un rond

sumo pop up de sortie pinteret

Résumé
Article
Dope les inscrits à ta newsletter avec un pop-up de sortie
Description
Intègre un pop-up d'inscription à ta newsletter qui s'affiche quand les visiteurs quittent ton site. Sumo génère 50% de mes inscrits.
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

You have to agree to the comment policy.