Popup personalizers and automation plugins are the best way to show popups without opt-ins. You can customize your popups for pleasing messages or verifying website legal terms. I suggest following WordPress Plugins.
1. Growmatik
This plugin is a marketing automation plugin that enables you to personalize popups/email campaigns and web page content. Grammatik offers a visual popup builder with ready-made templates to customize the text and individual elements such as images, video, buttons, icons, coupon codes, layout, or even input fields. You can further automate your popups by setting conditions like location, device, page, or product visit, or more behavioral conditions such as shopping activity and email activity. Grammatik uses its resources to create automation so it won’t affect your website performance.
2. Popup anything on click
Popup Builder allows you to add highly customizable popup windows. You can add unlimited popups with your configurations. With the Popup anything on click plugin, you can insert any content into your Popup (HTML, Image, etc.) using shortcodes.
3. Popup Builder
This is a responsive WordPress plugin for popup, subscription, and newsletter. It provides a popup builder to customize different types of popups such as image, HTML, subscription, video, countdown, restriction (yes/no confirmation), etc. You can set automation to show the popups whenever you want. For popup analytics, you should get a separate extension.
Also, you can add popups using jQuery and CSS. Just follow the below steps carefully to add customized popups on your WordPress site:
Step 1: Add pop-up HTML on your web page.
<button class="open">Click to open popup</button>
<div style="display: none;" class="pop-outer">
<div class="pop-inner">
<button class="close">CLOSE</button>
<h2>Your popup title</h2>
<p>Your popup content</p>
</div>
</div>
Step 2: Add CSS style in active theme’s style.css or in custom style.
<style>
.pop-outer {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner {
background-color: #fff;
width: 500px;
height: 300px;
padding: 25px;
margin: 15% auto;
}
</style>
Step 3: Add jQuery code in active theme’s header file.
<script>
jQuery(document).ready(function ($){
$(".open").click(function (){
$(".pop-outer").fadeIn("slow");
});
$(".close").click(function (){
$(".pop-outer").fadeOut("slow");
});
});
</script>
