How to add a Countdown Timer to your Popup

With WPSubscribers Plugin version 1.09 and above, the new feature called as “Countdown Timer” was added to the popup. This feature will close the current popup after an amount of time and would really create the sense of urgency and scarcity for your offer.

So, all you need to do is follow this simple tutorial:

Step 1: Locate to the popup that you want to add a countdown timer and add these lines of code to the “Custom jQuery” box:

jQuery(document).ready(function($) {
if ($("#wps_countdown_dashboard").length > 0){
$('#wps_countdown_dashboard').css('display', 'block');
$('#wps_countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 0,
'sec': 15
},
omitWeeks: true,
onComplete: function() { $.modal.close(); }
});
}
});

(Change the hour, min, sec value… as you want)

Then press “Save Changes” button and your countdown timer is ready!

A live example of this tutorial is here: http://www.wpsubscribers.com/demo/category-5/post-with-popup-style-9.html

Step 2: (Optional) By default, my plugin will add the countdown timer to the end of the main popup content, however, you can change this location by switch the popup content text editor to HTML mod and then add these lines of code in anywhere as you like:

<div id="wps_countdown_dashboard">
<div class="dash days_dash"><span class="dash_title">days</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash hours_dash"><span class="dash_title">hours</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash minutes_dash"><span class="dash_title">minutes</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash seconds_dash"><span class="dash_title">seconds</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>






Comments are closed.