Voici comment vos entreprises préférées utilisent les fenêtres contextuelles de sites Web pour se développer (et vous le pouvez aussi !)

Publié: 2020-04-02

Il y a deux types de personnes.

Ceux qui aiment les popups de sites Web et ceux qui les détestent.

Le premier groupe sait à quel point les popups de sites Web peuvent être ridiculement efficaces. Le deuxième groupe les trouve ridiculement ennuyeux.

Mais quelle est la vraie différence entre un bon popup de site Web et un mauvais ?


En parcourant des centaines d'entre eux, nous avons conclu ce qui suit. Tout se résume à trois choses :

  • À quoi ressemblent ces popups

  • Quelle valeur ils offrent

  • Quand exactement ils apparaissent

Je veux dire, oui, certaines fenêtres contextuelles sont des interrupteurs d'expérience ennuyeux, odieux et laids.

Mais c'est parce qu'ils ont été mis en place dans le mauvais sens.

Par exemple, jetez un œil à cette superbe popup sur le site Web de Nike :

Une fenêtre contextuelle sur le site Web de Nike annonce une vente à l'échelle du site

Quelqu'un l'appellerait-il jamais odieux ou ennuyeux?

C'est ce que je pensais.

Le popup Nike est élégant et offre de la valeur (remises appliquées automatiquement à la caisse, oui !). Et cela n'interrompt sûrement pas l'expérience non plus. Si quoi que ce soit - c'est une partie intégrante de celui-ci.

Il existe des milliers de grandes entreprises bien connues qui utilisent avec succès des fenêtres contextuelles de sites Web pour collecter des e-mails, annoncer des ventes et afficher des appels à l'action. Prenez par exemple le New York Times, Adidas, The Guardian, Century 21 ou Slack – et la liste peut s'allonger encore et encore !

Alors, pourquoi ne pas apprendre des meilleurs et appliquer leur approche pour développer votre entreprise ?

Vous pensez probablement que vous avez besoin d'un développeur ou des budgets de ces grandes entreprises pour ajouter une fenêtre contextuelle d'aspect professionnel à votre site Web. Eh bien, ce n'est pas vrai.

Dans cet article de blog, nous vous montrerons 15 exemples de fenêtres contextuelles de sites Web utilisées par certaines des entreprises les plus connues dans divers créneaux. Nous vous expliquerons également pourquoi chaque popup est si efficace.

La meilleure partie? Nous vous montrerons exactement comment les recréer sur votre site Web en quelques minutes à l'aide de Getsitecontrol.

Pour vous aider à naviguer, nous avons divisé la liste en 3 catégories. Vous êtes sur le point de voir des fenêtres contextuelles de site Web qui aident :

  • Obtenez des abonnés par e-mail

  • Afficher les incitations à l'action

  • Annoncer les mises à jour

N'hésitez pas à passer à la catégorie qui vous intéresse le plus.

Popups de sites Web qui aident les marques à créer des listes de diffusion

Tout le monde est fou de développer ses listes de diffusion en ce moment. Et vous devriez l'être aussi !

Au cas où vous l'auriez manqué, le courrier électronique a un retour sur investissement énorme de 44 $ pour chaque dollar dépensé.

Avoir des personnes sur votre liste de diffusion signifie que vous possédez cette autorisation exclusive pour les rencontrer directement dans leur boîte de réception, développer une relation et les transformer en clients récurrents.

Attendez, mais quelle est la meilleure façon de développer une liste de diffusion ? Je parie que vous connaissez déjà la réponse.

Ce sont des fenêtres contextuelles de sites Web.

Voyons comment les marques dont vous avez sûrement entendu parler (et probablement même achetées) utilisent des fenêtres contextuelles pour collecter des adresses e-mail.

1. La boutique du New York Times – 10 % de réduction sur votre première commande

Le New York Times a été parmi les premiers à avoir évolué pour devenir un média en ligne payant par abonnement.

Aujourd'hui, c'est le site de journal le plus visité. Et ils utilisent des fenêtres contextuelles de sites Web à diverses fins.

Par exemple, regardez ce formulaire d'abonnement par e-mail minimaliste qui apparaît dès que vous atterrissez sur la boutique en ligne du New York Times.

La boutique du New York Times utilise une fenêtre contextuelle de site Web pour collecter les e-mails

Voici ce qui rend ce popup de site Web génial :

  • Conception cohérente
    La fenêtre contextuelle a le même thème de couleur et la même police que le reste du NYT Store. Il apparaît comme une partie intégrante et crédible du site Web.

  • Aimant en plomb
    On ne vous propose pas seulement de souscrire à de nouvelles offres, vous bénéficiez également d'une remise de 10% sur votre première commande si vous rejoignez la liste.

  • Apparence instantanée
    Il est toujours difficile de savoir si les fenêtres contextuelles du site Web doivent apparaître immédiatement ou après qu'un visiteur ait passé un certain temps sur une page. Dans ce cas, afficher le formulaire instantanément est certainement mieux qu'après qu'un client potentiel ait effectué un achat, n'est-ce pas ?

Vous souhaitez ajouter une fenêtre contextuelle d'abonnement similaire à votre site Web ?

Nous avons suivi l'esprit créatif du New York Times pour créer un formulaire d'abonnement similaire. Cliquez sur la fenêtre contextuelle du site Web ci-dessous pour la voir en action. Suivez ensuite les instructions simples qui apparaîtront sur le côté droit de la page.

Popup de création de liste de diffusion minimaliste optimisé par Getsitecontrol Voir l'aperçu en direct →

Le modèle d'aperçu en direct sera ajouté directement à votre tableau de bord Getsitecontrol. À partir de là, vous pourrez modifier les détails tels que le pourcentage de remise, le titre et le thème de couleur pour en faire un match parfait pour votre site Web.

Ensuite, vous pourrez utiliser le Ciblage paramètres pour spécifier la page sur laquelle vous souhaitez que la fenêtre contextuelle apparaisse.

2. Century 21 – débloquez 25 $ de rabais ou payez le plein prix

Century 21, le géant de la vente au détail de mode à bas prix s'est mis en ligne il y a quelques années et s'est également lancé dans le jeu de création de listes de diffusion. Consultez la fenêtre contextuelle affichée quelques secondes après votre arrivée sur leur site Web.

Century 21 utilise un bouton de désinscription négatif sur sa fenêtre contextuelle

Voici ce qui est génial avec ce popup de site Web :

  • Microcopie au format e-mail
    Century 21 a choisi de spécifier à quoi devrait ressembler une adresse e-mail pour s'assurer que les clients l'obtiennent correctement. Sachant que leur public est très large et comprend des personnes qui ne sont pas nécessairement férus de technologie, c'est une excellente décision.

  • Bouton de désactivation négative
    Bien sûr, vous n'êtes pas obligé de vous inscrire si vous ne le souhaitez pas. Mais cela signifie que vous êtes prêt à payer le prix fort, n'est-ce pas ? Le bouton de désinscription est un petit détail qui vous fait réfléchir à deux fois avant de décliner l'offre.

  • Choix intelligent de couleurs
    Remarquez que non seulement les couleurs de cette fenêtre contextuelle sont en corrélation avec le thème du site Web, mais le bouton « Continuer » est également souligné en rouge. Pendant ce temps, le bouton de désactivation se fond simplement avec l'arrière-plan.

Vous voulez une fenêtre contextuelle avec un bouton de désinscription pour votre site Web ?

Si vous aimez ce popup de site Web, le recréer est aussi simple que 1-2-3. Cliquez simplement sur le modèle ci-dessous et suivez les instructions.

Une popup d'abonnement par e-mail avec des boutons par Getsitecontrol Voir l'aperçu en direct →

Une fois arrivé au tableau de bord, parcourez le Teneur paramètres pour ajuster la copie et le thème de couleur si vous en avez besoin. À l'instar de Century 21, vous pouvez également ajouter votre logo en haut.

3. Marie Claire – l'effet FOMO en action

Si vous pensez que les boutons de désactivation négatifs peuvent fonctionner uniquement pour les magasins en ligne, détrompez-vous.

Lorsque vous proposez un contenu de haute qualité par e-mail, vous pouvez aussi rappeler aux gens les conséquences de ne pas s'abonner. Il suffit de regarder comment le magazine Marie Claire utilise l'effet FOMO sur son bouton de désinscription.

Marie Claire offre un lead magnet en échange d'un abonnement

Voici ce que nous aimons dans ce popup de site Web :

  • Le bouton de désactivation négative
    Outre l'effet FOMO, remarquez comment Marie Claire a transformé le bouton de désinscription en une déclaration d'amour-propre.

  • La copie du CTA d'inscription par e-mail
    Il y a tellement d'appels à l'action incitatifs que vous pouvez placer sur le bouton d'inscription au lieu de simplement « S'inscrire ». « Montrez-moi ce qu'il y a dedans ! » est l'un d'eux.

  • Le choix d'une image
    Et dans ce cas, ce n'est pas n'importe quelle image. C'est une photo de Saoirse Ronan, une actrice talentueuse que la plupart des lecteurs reconnaîtront sûrement.

Pourquoi l'image est-elle si importante ici ?

Avoir un visuel qui correspond aux attentes de vos abonnés est crucial pour augmenter le taux d'inscription par e-mail. Parce qu'ils ne se contentent pas de souscrire à certaines tendances capillaires. Ils s'abonnent pour recevoir la recette pour ressembler à une star d'Hollywood sur le tapis rouge.

Vous pensez vouloir un popup de site Web comme celui-ci ?

Le générateur de popup Getsitecontrol a un modèle qui vous aidera à recréer facilement l'exemple ci-dessus. Découvrez-le ci-dessous.

Un modèle de site Web contextuel avec une image prenant la moitié de l'espace Voir l'aperçu en direct →

Une fois que vous l'aurez ajouté à votre tableau de bord, vous pourrez facilement remplacer l'image par votre visuel ou choisir une autre image dans la galerie.

4. Adidas – obtenez 15% de réduction en échange d'un abonnement par e-mail

Adidas offre une remise de 15% pour les nouveaux abonnés avec une fenêtre contextuelle qui apparaît après que vous ayez passé du temps sur leur site Web.

Popup de site Web d'Adidas avec une case à cocher de consentement

Maintenant, voici ce qui est particulièrement intéressant avec la fenêtre contextuelle du site Web d'Adidas :

  • La microcopie en bas Pour atténuer la peur d'être spammé avec des e-mails non pertinents, Adidas a spécifié exactement ce pour quoi vous vous abonnez.

  • La case à cocher de confirmation d'âge Conformément à la loi COPPA (Children's Online Privacy Protection Act), chaque abonné doit confirmer qu'il a plus de 13 ans. Cette case à cocher peut également être utilisée pour recueillir le consentement explicite pour recevoir des e-mails marketing.

  • Segmentation basée sur le genre En fonction de votre réponse, Adidas appliquera ultérieurement des règles de segmentation pour vous envoyer le contenu le plus pertinent. Cependant, il est également judicieux de définir ce champ comme facultatif étant donné le nombre d'articles non sexistes produits par Adidas.

  • Confirmation de l'abonnement Une fois que vous vous êtes inscrit, vous voyez un "message de réussite de la soumission" vous indiquant à quoi vous attendre.

Message de réussite de la soumission du formulaire sur le site Web d'Adidas

Une option alternative ici serait d'afficher le code de réduction pour que les gens puissent le copier et le coller à la caisse. De cette façon, ils pourraient continuer leurs achats sans quitter le magasin pour ouvrir leur e-mail.

5. Ahrefs – ne manquez pas le prochain article

Passons au monde de l'informatique.

Ahrefs, un développeur bien connu de logiciels de référencement, utilise cette jolie diapositive pour suggérer de s'abonner à sa newsletter une fois que vous atteignez la fin d'un article de blog.

Ahrefs utilise une petite glissière latérale pour afficher un formulaire d'inscription par e-mail

Voici ce qu'il y a de si génial :

  • Un format différent
    Contrairement aux fenêtres contextuelles modales, les diapositives sont moins intrusives mais suffisamment accrocheuses pour se faire remarquer. Ils peuvent être un choix parfait pour les projets de contenu où vous souhaitez que l'expérience de lecture soit aussi fluide que possible.

  • Déclencheur de comportement sur la page
    Le formulaire n'apparaît que lorsque vous atteignez la fin d'un article de blog. C'est le moment idéal pour proposer de s'abonner car le niveau d'engagement est élevé.

  • Le principe FOMO
    Si vous êtes arrivé à la fin de l'une des longues lectures d'Ahref, il y a de fortes chances que vous l'ayez apprécié. Et vous ne voulez pas manquer une autre grande pièce comme celle-ci.

Vous voulez ajouter un slide-in similaire à votre site Web ?

Recréer ce formulaire d'abonnement est facile. Nous avons construit un slide-in similaire sur le côté droit, afin que vous puissiez l'installer rapidement sur votre site Web.

Un modèle de slide-in d'abonnement par e-mail par Getsitecontrol Voir l'aperçu en direct →

Cliquez sur le widget pour le voir en action et suivez les instructions.

Une fois prêt, utilisez le Ciblage paramètres pour sélectionner des pages spécifiques de votre site Web où vous souhaitez que le slide-in apparaisse ainsi que les conditions pour lesquelles il doit apparaître.

6. Chasse aux produits – abonnez-vous à la newsletter quotidienne

Product Hunt est l'une des plus grandes communautés en ligne où des produits technologiques étonnants sont lancés chaque jour. Ceux qui n'ont pas le temps d'aller consulter le site Web quotidiennement peuvent obtenir des résumés des mises à jour les plus importantes via un abonnement par e-mail.

Pour augmenter le nombre d'abonnements, Product Hunt propose une barre d'inscription par e-mail flottante en bas de la page.

Product Hunt utilise une barre d'inscription flottante pour collecter les e-mails

Voici ce qui est génial avec ce formulaire d'abonnement :

  • Distraction minimale
    Les barres flottantes sont les moins intrusives de toutes les fenêtres contextuelles de sites Web. Ils restent en haut ou en bas d'une page Web pendant que vous faites défiler le contenu et attendent patiemment que vous soyez prêt à vous abonner.

  • Fréquence de la newsletter
    La copie vous indique exactement à quelle fréquence vous recevrez des e-mails de Product Hunt.

  • Conception authentique
    Les emoji et la couleur des boutons sont les éléments caractéristiques de Product Hunt. C'est une excellente décision de les utiliser sous la forme.

Vous voulez votre propre barre d'inscription par e-mail flottante ?

Vous pouvez ajouter un widget similaire à votre site Web et l'afficher sur tout le site ou sur des pages spécifiques. Utilisez le modèle prêt à l'emploi ci-dessous pour commencer.

Barre flottante simple avec un champ email par Getsitecontrol Voir l'aperçu en direct →

La copie et la conception du modèle sont assez polyvalentes, alors n'hésitez pas à l'utiliser tel quel sur votre site Web.

Popups de site Web pour afficher votre appel à l'action

Il est temps de passer à la catégorie suivante !

La deuxième grande raison pour laquelle les entreprises utilisent les popups de sites Web est d'encourager les visiteurs à profiter d'une remise, à consulter un nouvel article de blog, à participer à un concours, en d'autres termes, à agir .

Voyons comment les entreprises de la vie réelle le font.

7. Century 21 – profitez d'une remise avant de partir

Si vous commencez à parcourir la boutique en ligne Century 21, vous devez avoir une immense volonté et résister à l'envie de saisir les offres spéciales qui vous attendent à chaque coin de rue.

Tout d'abord, ils vous demandent de vous abonner en échange d'un coupon de 25 $ de réduction. Et puis, si vous essayez de partir sans faire d'achat, vous voyez ce site Web contextuel :

Century 21 utilise la technologie d'intention de sortie pour offrir un rabais

Si vous cliquez sur « Oui, s'il vous plaît ! » bouton, le code du coupon s'affiche directement dans la fenêtre contextuelle. Vous pouvez copier le code et le coller à la caisse. Simple. Efficace.

Voici pourquoi l'approche d'intention de sortie fonctionne si bien :

  • Attention garantie
    Il n'y a aucun moyen de manquer une offre de réduction qui apparaît sous vos yeux lorsque vous naviguez pour sortir.

  • Dernier recours
    Les popups d'intention de sortie vous donnent pratiquement cette chance unique de convertir les personnes qui étaient sur le point de partir. Bien sûr, tous les visiteurs qui abandonnent ne répondront pas. Mais certains d'entre eux le feront – et chaque effort compte, n'est-ce pas ?

Vous voulez placer une fenêtre contextuelle d'intention de sortie sur votre site Web ?

Consultez le modèle ci-dessous. Il est déjà configuré pour apparaître dès que vos visiteurs commencent à naviguer pour quitter la page.

Un modèle de popup d'intention de sortie avec une offre de remise par Getsitecontrol Voir l'aperçu en direct →

Placez-le sur votre site Web en quelques clics, puis accédez à la Ciblage paramètres pour spécifier la page où il est censé apparaître. Par exemple, vous voudrez peut-être le placer sur les pages de produits, les pages de catégories ou même à la caisse pour empêcher l'abandon du panier.

8. Skillshare – promotion du programme de parrainage

Skillshare, une plateforme d'apprentissage en ligne, gère un programme de parrainage vous permettant de gagner des mois de cours gratuits en invitant des amis. Remarquez la barre flottante qu'ils ont placée en haut de chaque page.

Skillshare utilise une barre flottante supérieure pour promouvoir son programme de parrainage

Ce que Skillshare a fait ici :

  • Couleur contrastée
    Skillshare a choisi le blanc car il attire l'attention étant donné le thème de couleur bleu foncé du site Web.

  • Juste assez de détails
    Malgré le manque d'espace, la copie fournit suffisamment d'informations pour vous permettre de décider si vous êtes intéressé ou non.

  • Effacer le bouton CTA
    Le bouton « Inviter des amis » définit des attentes claires. Il vous amène à la page dédiée où vous pouvez apprendre les détails et obtenir votre lien de parrainage.

9. The New York Times – lisez les mises à jour importantes maintenant

Si votre projet est axé sur le contenu, vous pouvez utiliser des fenêtres contextuelles pour promouvoir le dernier article du blog, des mises à jour importantes sur des sujets sélectionnés ou simplement des documents pertinents.

Par exemple, c'est ainsi que le New York Times attirait l'attention de ses lecteurs sur les mises à jour en direct sur l'épidémie de COVID-19.

Le New York Times a installé un bar flottant pour attirer l'attention sur les nouvelles importantes

Les barres d'appel à l'action au bas d'une page Web sont utilisées par divers médias à diverses fins. Consultez simplement notre prochain exemple présentant une fenêtre contextuelle similaire.

10. The Guardian – soutenez le Guardian aujourd'hui

Contrairement au New York Times, The Guardian a choisi de garder tous ses documents en libre accès, tandis que les lecteurs peuvent participer au financement du journal sous forme de dons. Voyez comment ils communiquent ce message à l'aide d'une fenêtre contextuelle en bas de la page.

The Guardian utilise une barre adhésive jaune pour encourager les visiteurs à faire des dons

Vous souhaitez utiliser une fenêtre contextuelle similaire sur votre site Web ?

Lorsque vous voulez mettre l'accent sur le message, clairement, ces barres collantes sont de parfaits capteurs d'attention. Consultez le modèle ci-dessous si vous souhaitez en ajouter un à votre site Web.

Un modèle de barre collante inférieure par Getsitecontrol Voir l'aperçu en direct →

Une fois que vous l'avez ajouté au tableau de bord Getsitecontrol, accédez à la Teneur onglet et ouvrez les paramètres du bouton pour placer le lien vers la page souhaitée.

Popups de site Web pour faire des annonces sur tout le site

La dernière catégorie de popups de sites Web vise à informer les visiteurs plutôt qu'à les inciter à agir.

Si vous souhaitez tenir votre public au courant des actualités et des conditions actuelles, les fenêtres contextuelles de site Web sont tout simplement parfaites.

Vous pouvez les utiliser pour faire connaître les modifications apportées aux opérations commerciales, les offres actuelles ou les nouvelles politiques, comme la politique de consentement des cookies, par exemple.

Voyons comment Reebok, Tiffany, Nespresso, Intercom et Slack gèrent ce type de communication.

11. Reebok – annonce de vente sur tout le site

Pour s'assurer que tous ceux qui accèdent à leur site Web sont informés de la vente à l'échelle du site, Reebok a placé une barre d'annonce flottante en haut d'une page Web.

Reebok annonce une vente sur tout le site en utilisant une barre collante noire en haut de la page

Cette annonce ne nécessite aucune action de la part du visiteur du site. Vous pouvez y voir une belle surprise et une incitation à continuer à parcourir le magasin.

12. Tiffany & Co. – rappel de service gratuit

Voici comment Tiffany & Co. informe les visiteurs de la boutique en ligne que la livraison et les retours sont gratuits pour toutes les commandes. Ils utilisent une barre flottante bleue Tiffany en haut d'une page Web.

Tiffany & Co choisit sa couleur signature pour la barre d'annonce collante

Si vous avez les codes de couleur pour le thème de votre site Web, vous pouvez les utiliser dans le popup Apparence / CSS paramètres pour créer une barre d'annonce parfaitement assortie, tout comme celle de Tiffany.

13. Nespresso – annonce de retard de livraison possible

Le dernier exemple de barre flottante appartient au site Web de Nespresso. Ils préviennent les clients en ligne en les informant du retard de livraison.

Nespresso informe les clients des retards de livraison à l'aide d'un par collant

Encore une fois, vous avez peut-être remarqué que la couleur de la barre flottante n'a pas été choisie au hasard - elle correspond parfaitement au bouton « Rechercher » ci-dessous.

Vous voulez recréer ces popups de site Web ?

Pour atteindre votre public avec un message bref mais important, les barres flottantes sont idéales. Pour en ajouter un à votre site Web, cliquez simplement sur le modèle ci-dessous, puis modifiez la copie.

Getsitecontrol fournit un modèle de barre d'annonce collante minimaliste Voir l'aperçu en direct →

N'hésitez pas à changer la couleur pour celle qui pourrait mieux paraître sur votre site Web. Le thème de couleur est disponible dans le Apparence onglet du tableau de bord Getsitecontrol.

14. Slack – bannière de consentement aux cookies

Les deux derniers exemples de notre liste sont des bannières de cookies.

Comme vous le savez probablement, à partir de 2018, chaque site Web recevant des visiteurs de l'UE doit obtenir leur consentement éclairé pour utiliser des cookies qui suivent les données des utilisateurs.

Voici à quoi ressemble le message de cookie sur le site Web de Slack.

Slack utilise une fenêtre contextuelle de site Web pour afficher le message de consentement aux cookies

Slack a choisi d'utiliser un curseur à droite qui renvoie à la politique de consentement des cookies et se ferme au clic.

Si vous souhaitez en placer un similaire, utilisez le modèle ci-dessous.

Getsitecontrol vous permet d'installer et de personnaliser un bandeau cookie Voir l'aperçu en direct →

Vous pouvez ajouter cette fenêtre contextuelle à votre site Web telle quelle, ou vous pouvez insérer un lien vers votre page Politique en matière de cookies vers la copie du widget, tout comme Slack l'a fait.

15. Interphone – barre adhésive de consentement aux cookies

Intercom, un développeur de plate-forme de messagerie populaire, a opté pour une barre collante moins intrusive en haut d'une page Web pour informer ses visiteurs de la politique en matière de cookies.

Intercom a choisi d'afficher la notification de cookie sur une barre flottante

Si vous préférez cette option, allez-y et cliquez ici pour vérifier le modèle Getsitecontrol pour une barre de consentement aux cookies.

Prêt à utiliser des fenêtres contextuelles de site Web pour développer votre entreprise ?

Si vous avez toujours été curieux de savoir si les fenêtres contextuelles de sites Web pouvaient vous aider à développer votre entreprise, c'est aujourd'hui le jour pour le découvrir.

Vous ne savez pas par quoi commencer ?

Voici notre top 3 des popups de sites Web les plus populaires :

  • formulaire d'abonnement par courrier électronique,

  • bannière de consentement aux cookies,

  • promotion de l'offre spéciale.

Choisissez le plus pertinent pour votre entreprise (ou ajoutez-les tous à votre site Web en même temps) à l'aide de Getsitecontrol et essayez-le gratuitement.

Vous lisez le blog Getsitecontrol où des experts en marketing partagent des tactiques éprouvées pour développer votre activité en ligne. Cet article fait partie de la section Engagement client.

Abonnez-vous à notre newsletter → Illustration principale par Icons8