Comment créer une fenêtre contextuelle Lightbox sur votre site (étape par étape)

Publié: 2021-12-31

Vous cherchez un moyen de créer une fenêtre contextuelle Lightbox pour votre site ?

Une fenêtre contextuelle lightbox peut être incroyablement efficace pour capturer des prospects. Ils sont conçus pour convaincre et convertir.

Mais devoir en coder un à partir de zéro est une vraie douleur. D'une part, vous devez connaître suffisamment de HTML, CSS et Javascript pour créer la fenêtre contextuelle avec des règles de déclenchement pour savoir quand l'afficher. Ensuite, vous devrez créer une intégration manuelle avec votre fournisseur de services de messagerie. Et enfin, vous devrez faire face à tous les problèmes de confidentialité et de sécurité.

Bonne nouvelle : il existe un moyen beaucoup plus simple.

Dans cet article, nous allons vous montrer comment lancer une popup lightbox sans codage en moins de 10 minutes.

Plongeons dedans.

Qu'est-ce qu'une fenêtre contextuelle Lightbox ?

Un popup lightbox est un formulaire opt-in qui apparaît avec un effet cinématographique. Lorsqu'une lightbox apparaît, elle brouille le reste du site en arrière-plan. De cette façon, vous vous concentrez entièrement sur la fenêtre contextuelle.

Exemple de fenêtre contextuelle Lightbox

A l'origine, le concept des caissons lumineux est issu de la publicité extérieure :

Publicité lightbox

Et puis, certains développeurs ont pensé que c'était un effet vraiment cool et ils ont créé une bibliothèque Javascript pour recréer le même effet sur les actifs Web. Plus tard, l'idée d'utiliser des popups lightbox est entrée en jeu.

Pourquoi les fenêtres contextuelles Lightbox fonctionnent

Les fenêtres contextuelles Lightbox capturent plus d'e-mails qu'un formulaire d'inscription par e-mail traditionnel.

Mais pourquoi fonctionnent-ils ?

Jetons un coup d'œil aux principales raisons pour lesquelles les popups Lightbox fonctionnent si bien.

#1. Les fenêtres contextuelles Lightbox présentent un appel clair à l'action

La plupart des gens croient que c'est une bonne chose de donner à leurs clients beaucoup d'options.

Mais ce n'est pas vraiment vrai.

Si vous recherchez des conversions directes, vous souhaitez un appel à l'action unique et clair sur lequel votre public peut se concentrer. De cette façon, vous supprimez toutes les distractions de l'esprit de l'utilisateur. Et les fenêtres contextuelles lightbox font un excellent travail pour mettre en évidence votre offre principale et amener les gens à se concentrer sur votre appel à l'action.

Donc, naturellement, les taux de conversion sont assez bons.

#2. Les fenêtres contextuelles Lightbox sont impossibles à ignorer

Les fenêtres contextuelles Lightbox occupent tout l'écran et brouillent tout le reste. Il est donc pratiquement impossible de les ignorer.

Cela est particulièrement vrai s'ils sont animés :

effets d'animation contextuels

Bien sûr, vous devez vous assurer que vos popups ne sont pas intrusifs. Et vous pouvez le faire en personnalisant le moment où déclencher différentes fenêtres contextuelles sur votre site. Tant que votre audience n'est pas agacée par l'interruption, vous pouvez très facilement la convaincre et la convertir.

#3. Les fenêtres contextuelles Lightbox ont des déclencheurs personnalisés

Vous ne devriez pas montrer la même offre à tous vos visiteurs Web. Si vous exploitez une boutique de commerce électronique, vous aurez besoin d'offres très différentes pour les nouveaux clients et les clients fidèles.

Pour un nouveau client, vous pouvez déclencher une campagne de bienvenue :

Fenêtre contextuelle de coupon

Mais pour un client qui revient, vous pouvez lui envoyer une offre différente :

Fenêtre contextuelle de coupon de fiançailles

Remarquez que les montants des remises pour les deux offres sont exactement les mêmes. Mais la manière dont l'offre est formulée est radicalement différente. Et c'est super important car les popups lightbox sont conçus pour des effets théâtraux. Ainsi, une approche plus personnalisée vous permettra d'obtenir de bien meilleurs résultats à coup sûr.

Vous pouvez même personnaliser l'offre en fonction des préférences de contenu de votre utilisateur. S'ils lisent un article sur les recettes du dîner, il est plus logique de leur montrer une offre liée aux recettes du dîner plutôt que de leur montrer une offre pour les voitures.

Fenêtre contextuelle de sortie de vie à la campagne

#4. Les fenêtres contextuelles Lightbox peuvent capturer les visiteurs abandonnés

Les visionneuses ne sont qu'une méthode d'affichage de votre popup. Donc, rien ne vous empêche vraiment de personnaliser le déclencheur à votre guise. Nous vous recommandons de créer des fenêtres contextuelles lightbox d'intention de sortie.

Fenêtre contextuelle d'intention de sortie

Les fenêtres contextuelles d'intention de sortie se déclenchent lorsque vos visiteurs tentent de quitter votre site Web. En conséquence, vous retenez un grand nombre de visiteurs qui auraient autrement abandonné votre site. Donc, si vous souffrez d'abandon de site, vous devez absolument créer une fenêtre contextuelle d'intention de sortie.

Comment créer une fenêtre contextuelle Lightbox

Maintenant que vous comprenez ce qu'est une fenêtre contextuelle lightbox et pourquoi vous voudriez en créer une, comment créez-vous une fenêtre contextuelle lightbox ? Nous vous recommandons d'utiliser OptinMonster pour créer vos popups.

Accueil OptinMonster

OptinMonster est la boîte à outils de conversion n°1 au monde et nous l'avons utilisée nous-mêmes. OptinMonster rend super simple la création de popups puissants qui se convertissent. Et vous n'aurez jamais à utiliser de codage.

Nous avons même écrit une critique complète d'OptinMonster.

Vous pouvez vérifier cela ou commencer votre campagne dès maintenant. Tout ce que vous avez à faire est de vous inscrire à OptinMonster et de suivre le reste de cet article.

Étape 1 : Créer une campagne

Rendez-vous sur votre tableau de bord OptinMonster et cliquez sur le bouton Créer :

Créer une nouvelle campagne popup

Sélectionnez le type de campagne Popup Lightbox :

créer une fenêtre contextuelle lightbox

Ensuite, choisissez un modèle de campagne. Vous pouvez choisir le modèle de votre choix, mais nous allons utiliser le type de campagne Simple pour ce didacticiel.

Sélectionnez le thème de la campagne contextuelle

Maintenant, donnez un nom à votre campagne. N'oubliez pas que ce nom de campagne est pour vous et que vous créerez probablement tout un tas de ces popups avec différentes options de ciblage. Alors, donnez à la campagne un nom significatif ou vous finirez par être vraiment confus plus tard.

De plus, selon votre forfait, vous pouvez également utiliser OptinMonster sur plusieurs sites. Alors, sélectionnez également le site Web sur lequel vous souhaitez afficher votre campagne.

Créer l'identité de la campagne

Appuyez sur Démarrer la construction lorsque vous avez terminé.

Étape #2 : Modifier votre popup

Avec OptinMonster, vous obtiendrez un constructeur visuel de popup par glisser-déposer. Une fois que vous avez terminé de créer votre campagne, vous pourrez modifier même les moindres détails de votre popup. Commencez par modifier le titre de votre popup :

Modifier votre titre

La partie la plus étonnante ici est qu'il vous suffit de cliquer sur le texte que vous souhaitez modifier et de le modifier en ligne. Il n'est pas nécessaire de remplir un formulaire ou de modifier le code HTML dans la fenêtre contextuelle.

Ensuite, ajustez le texte et l'apparence de votre bouton pour créer un appel à l'action clair :

Personnalisez les CTA

Lorsque vous êtes satisfait de l'apparence de votre popup, vous pouvez passer à des paramètres plus avancés.

Étape 3 : Définir les règles d'affichage

Les règles d'affichage sont destinées à définir quand votre campagne apparaît sur votre site et qui la voit.

Règles d'affichage des popups

Notre recommandation est de changer la condition de déclenchement en intention de sortie :

Fenêtre contextuelle Lightbox d'intention de sortie

Cliquez sur Étape suivante pour choisir l' Action . Ici, nous vous recommandons de définir Afficher la vue de la campagne sur Optin View, de définir le spectacle avec MonsterEffect sur n'importe quelle animation d'entrée que vous aimez et de jouer un effet sonore sur n'importe quel effet sonore pour votre popup.

Paramètres d'action de campagne

Et puis, cliquez sur le bouton Étape suivante . Vous pouvez voir l'étendue complète de vos paramètres dans l'onglet Résumé.

Étape 4 : Configurez votre intégration de messagerie

L'étape suivante consiste à configurer votre intégration de messagerie. Cliquez sur Ajouter une nouvelle intégration dans l'onglet Intégrations et sélectionnez votre fournisseur de service de messagerie :

Intégrations OptinMonster

Nous vous recommandons d'utiliser Drip pour votre marketing par e-mail si vous n'avez pas encore de fournisseur de services de messagerie.

Étape #5 : Publiez votre popup Lightbox

Lorsque vous créez une nouvelle campagne, elle est mise en veille par défaut.

Accédez à l'onglet Publier dans le menu du haut pour voir les options de publication . Ensuite, définissez le statut sur Publier et sélectionnez la plate-forme du site Web :

Publier la campagne OptinMonster

Si vous utilisez un site WordPress, le plugin OptinMonster gère automatiquement le reste de la configuration. C'est la même chose pour Shopify et BigCommerce. Pour tout autre site, cliquez sur Any Site et collez le code d'intégration dans l'en-tête de votre site :

Intégrer globalement

Et tu as fini!

Emballer

C'est tout pour celui-ci, les amis!

Faites-nous savoir si cet article vous a aidé. La création de popups sur votre site peut vous aider à convertir votre trafic en abonnés aux e-mails et en véritables prospects commerciaux. Et nous vous recommandons vivement de commencer immédiatement à créer des fenêtres contextuelles Lightbox.

Et si vous cherchez un moyen abordable d'augmenter votre trafic, nous vous recommandons d'utiliser les notifications push. Les notifications push peuvent vous aider à générer plus de trafic récurrent et d'engagement sur le site. Vous pouvez également créer des campagnes de notification push automatisées qui génèrent des ventes.

Pas convaincu? Consultez ces ressources :

  • 7 stratégies intelligentes pour stimuler l'engagement client
  • Les notifications push sont-elles efficaces ? 7 statistiques + 3 conseils d'experts
  • Comment configurer les notifications push de panier abandonné (tutoriel facile)

Nous vous recommandons d'utiliser PushEngage pour créer vos campagnes de notifications push. PushEngage est le logiciel de notification push n°1 au monde. Donc, si vous ne l'avez pas déjà fait, lancez-vous avec PushEngage dès aujourd'hui !