Looking for a way to create a full screen popup for your WordPress site?
A full screen popup can be incredibly effective for capturing leads. They’re designed to convince and convert by pulling the visitor’s entire focus on themselves.
But having to code one from scratch is a real pain. For one thing, you’d have to know enough HTML, CSS, and Javascript to create the popup along with trigger rules for when to show it. Then, you’d have to create a manual integration with your email service provider. And finally, you’d have to deal with any privacy and security issues.
Good news: there’s a much simpler way.
In this article, we’re going to show you how to launch a full screen popup in WordPress with zero coding in less than 10 minutes.
Plongeons dans le vif du sujet.
What is a Full Screen Popup in WordPress?
A full screen popup is an opt-in form that popups up with a full screen cinematic effect. Think of it as watching a movie on Netflix in full-screen mode. When a full screen optin form pops up, you can’t see the rest of the WordPress site. This way, your entire focus is on the popup.
Voici un exemple :
You can use full screen popups to:
- Welcome new visitors
- Offer a discount coupon
- Point visitors to their best content
- Send visitors to their social media profiles
And more. You can even create popup contact forms. Popups are super flexible and as long as you’re creative, you can set up high-converting ones easily.
How to Create a Full Screen Popup in WordPress
Now that you understand what a full screen popup is and why you’d want to create one, how do you create a full screen popup? We recommend using OptinMonster to create all your popups.
OptinMonster est la boîte à outils de conversion n°1 au monde et nous l'utilisons nous-mêmes. OptinMonster rend très simple la création de popups puissantes qui convertissent. Et vous n'aurez jamais besoin d'utiliser de code.
We even wrote a full review of OptinMonster.
You can check that out, or get started with your campaign right now. All you have to do is signup for OptinMonster and follow along with the rest of this article.
Step #1: Create a Campaign
Rendez-vous sur votre tableau de bord OptinMonster et cliquez sur le bouton Créer :
Sélectionnez l'option Template pour commencer à créer une option à l'aide d'un modèle prédéfini :
Select the Fullscreen to get started with full screen popup templates:
Then, choose a campaign template. You can choose whatever template you like, but we’re going with the Product Recommendation (Gamified) campaign template for this tutorial.
Après avoir sélectionné votre modèle, donnez un nom à votre campagne. N'oubliez pas que ce nom de campagne est pour vous et que vous créerez probablement un grand nombre de ces popups avec différentes options de ciblage. Donnez donc un nom significatif à la campagne, sinon vous finirez par être vraiment confus plus tard.
Also, depending on your plan, you can also use OptinMonster on multiple sites. So, select the website where you want to display your campaign as well.
Appuyez sur Commencer la création lorsque vous avez terminé.
Step #2: Edit Your Popup
With OptinMonster, you’ll get a visual drag and drop popup builder. Once you’re done creating your campaign, you’ll be able to edit even the tiniest details about your popup. Start by editing your popup headline:
La partie la plus incroyable ici est que vous cliquez simplement sur le texte que vous souhaitez modifier et vous le changez en ligne. Il n'est pas nécessaire de remplir un formulaire ou de modifier du code HTML dans la popup.
You can edit everything you want about your full screen popup. When you’re happy with the optin’s appearance, you can move on to more advanced settings.
Step #3: Set Full Screen Popup Display Rules
Display rules are meant to define when your campaign shows up on your site and who sees it.
Our recommendation is that you change the trigger condition to exit-intent:
Click Next Step to choose the Action. Here, we recommend that you set Show the campaign view to Optin View, set the show with MonsterEffect to any entry animation you like, and play sound effect to any sound effect for your popup.
And then, click the Next Step button. You can see the full extent of your settings in the Summary tab.
Étape n°4 : Ajouter un bouton « Cliquez pour vous abonner » à votre fenêtre contextuelle
Les notifications push vous aident à augmenter le trafic de votre site web et l'engagement en mode automatique. Et si vous gérez une boutique en ligne, PushEngage vous aide également à augmenter vos ventes en vous aidant à créer des notifications push e-commerce automatisées.
Vous pouvez commencer gratuitement, mais si vous êtes sérieux au sujet de la croissance de votre entreprise, vous devriez acheter un plan payant. De plus, avant d'acheter un service de notification push, vous devriez consulter ce guide sur les coûts des notifications push.
Voici un aperçu rapide de ce que vous obtenez avec PushEngage :
- Campagnes automatisées à forte conversion
- Options multiples de ciblage et de planification de campagnes
- Suivi des objectifs et analyses avancées
- Tests A/B intelligents
- Un responsable du succès dédié
Vous verrez que PushEngage est de loin le meilleur choix si vous voulez générer du trafic, de l'engagement et des ventes pour votre entreprise. Et si vous avez un budget limité, vous pouvez toujours faire preuve d'un peu créativité avec vos notifications push.
Tout d'abord, ajoutez un bloc HTML à votre fenêtre contextuelle depuis la barre latérale dans OptinMonster.
C'est ici que nous allons ajouter le code pour collecter les abonnés aux notifications push. Tout d'abord, collez le code suivant pour créer un bouton cliquable :
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>Collez le code là où il est indiqué que vous pouvez ajouter du HTML :
Bien sûr, vous pouvez jouer avec les styles pour le rendre plus attrayant. Ensuite, nous allons faire en sorte que le bouton collecte les abonnés aux notifications push lorsqu'il est cliqué.
Rendez-vous sur la page d'accueil de PushEngage et cliquez sur le bouton Commencer :
Ensuite, vous devrez sélectionner le plan gratuit pour essayer PushEngage ou choisir un plan payant si vous êtes sérieux au sujet de la croissance de votre entreprise. Les plans payants offrent plus d'options de campagne et la possibilité de créer des listes d'abonnés encore plus grandes.
Dans votre tableau de bord PushEngage, allez dans Paramètres du site » Détails du site et cliquez sur le bouton Cliquez ici pour les instructions de configuration. Sous N'importe quel site, vous obtiendrez votre code d'installation :
ATTENTION : Vous devez copier le code que vous obtenez de votre tableau de bord. Le code est unique pour chaque utilisateur de PushEngage. Vous ne pourrez pas copier le code de l'image et collecter les abonnés aux notifications push.
Une fois que vous avez le code dans votre tableau de bord PushEngage, prenez le deuxième script et ajoutez-lui du code supplémentaire. Votre code final devrait ressembler à ceci :
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Ajoutez ce code au bloc HTML dans OptinMonster juste après le code de votre bouton et entre le bloc de code <div></div> et vous avez terminé !
Step #5: Setup Your Email Integration
The next step is to set up your email integration. Click Add New Integration from the Integrations tab and select your email service provider:
We recommend using Drip for your email marketing if you don’t already have an email service provider.
Step #6: Publish Your Full Screen Popup in WordPress
Lorsque vous créez une nouvelle campagne, elle est En pause par défaut.
Accédez à l'onglet Publier depuis le menu supérieur pour voir les Options de publication. Ensuite, définissez le statut sur Publier et sélectionnez la plateforme de site Web :
Si vous utilisez un site WordPress, le plugin OptinMonster s'occupe du reste de la configuration automatiquement. Il en va de même pour Shopify et BigCommerce. Pour tout autre site, cliquez sur N'importe quel site et collez le code d'intégration dans l'en-tête de votre site Web :
Et voilà !
What to do After Creating a Full Screen Popup in WordPress
C'est tout pour cette fois, les amis !
Let us know if this article helped. Creating popups on your site can help you convert your traffic into email subscribers and genuine business leads. And we highly recommend that you start creating full screen popups right away.
Et si vous recherchez un moyen abordable de développer votre trafic, nous vous recommandons d'utiliser les notifications push. Les notifications push peuvent vous aider à générer plus de trafic de retour et d'engagement sur le site. Vous pouvez également créer des campagnes de notifications 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 des notifications push pour paniers abandonnés (Tutoriel facile)
- Comment ajouter un plugin WordPress de notifications Web à votre site
Nous vous recommandons d'utiliser PushEngage pour créer vos campagnes de notifications push. PushEngage est le logiciel de notifications push n°1 au monde. Donc, si ce n'est pas déjà fait, commencez avec PushEngage dès aujourd'hui !
