Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 3 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Automatic jQuery site subscription lightbox

A subscription dialog that drops a cookie to prompt users to subscribe to your blog

AshleyAshley

I’ve had many of you email me asking for a tutorial that shows how to create the subscription lightbox that used to activate┬áthe first time you visit the site, and I’ve finally got around to writing it up.

Getting Started

You’ll need to include the jQuery library as well as the Colorbox lightbox JS and CSS which are included in the download below.



<!-- Color Box CSS -->
<link media="screen" rel="stylesheet" target="_blank" href="css/colorbox.css" />
<!-- Style For the Subscription Box -->
<link media="screen" rel="stylesheet" target="_blank" href="css/popup.css" />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>

The JS Code

Once the page loads we check to see if the cookie exists and hasn’t expired. If it’s expired or doesn’t exist we set the cookie to expire in 15 days, and we show the lightbox.



$("document").ready(function (){

// load the overlay

if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}

$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

});

The HTML

Here’s the HTML for the lightbox. This can go anywhere on your page, although i’d recommend putting it just above the last body tag. There shouldn’t be any surprises here!



<a href="#" class="open_popup">Click here to open the popup</a>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<h2 class="box-title">Never miss an update from Papermashup</h2>
<h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
<!-- BEGIN .box-side -->
<div class="box-side left">
<div class="box-icon"><a class="email" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US"><img src="images/email.png"/></a></div>
<h4><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US">Subscribe by Email</a></h4>
<h5>Get alerts directly into your inbox after each post and stay updated.</h5>
<a class="sub" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<div id="box-or">OR</div>
<!-- BEGIN .box-right -->
<div class="box-side right">
<div class="box-icon"><a class="rss" target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom"><img src="images/rss.png"/></a></div>
<h4><a target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe by RSS</a></h4>
<h5>Add our RSS to your feedreader to get regular updates from us.</h5>
<a class="sub" target="_blank" href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<!-- BEGIN #subs-container -->
</div>
</div>
</div>
<!-- END subscribe popup-->

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 27
  • rkidandy
    Posted on

    rkidandy rkidandy

    Reply Author

    Is there a quick way that this pop up can be responsive?


  • Sean
    Posted on

    Sean Sean

    Reply Author

    Dumb question, where do I put each code?


  • Fred A. Smith
    Posted on

    Fred A. Smith Fred A. Smith

    Reply Author

    what do I do with the index.php?


  • Fred A. Smith
    Posted on

    Fred A. Smith Fred A. Smith

    Reply Author

    How do I use this if my current page is in html?


  • tamer
    Posted on

    tamer tamer

    Reply Author

    to open evryone pop up
    find
    var fifteenDays = 1000*60*60*24*15;
    change to

    var fifteenDays = 1000;


  • Asim
    Posted on

    Asim Asim

    Reply Author

    Good tutorial. Now i will use this my website.


  • Asim
    Posted on

    Asim Asim

    Reply Author

    Good tutorial. Now i will use this my website.


  • tim
    Posted on

    tim tim

    Reply Author

    when i scroll down the page, the form doesn’t show once the colorbox is fired. if i’m at the top fo the page, it works fine.

    What gives?


  • Ed
    Posted on

    Ed Ed

    Reply Author

    In case someone wants to add a delay: http://pastie.org/6425142
    Thanks Ashley!


  • Gomy
    Posted on

    Gomy Gomy

    Reply Author

    Nice work!!
    Is not working with jquery 1.8.3 ?


  • Jasa Web
    Posted on

    Jasa Web Jasa Web

    Reply Author

    thank you for this script.. i will try on my website..


  • ancajasjp
    Posted on

    ancajasjp ancajasjp

    Reply Author

    really nice script. thanks for sharing, ill use this on forms, great !!


  • Shahbaz Ahmed Bhatti
    Posted on

    Shahbaz Ahmed Bhatti Shahbaz Ahmed Bhatti

    Reply Author

    i like paper mashup webiste, this webiste one of the best website in internet that i got so many tutorial from her ei like it


  • William Imhoff
    Posted on

    William Imhoff William Imhoff

    Reply Author

    Thanks, One of the best scripts around.


  • Lewis
    Posted on

    Lewis Lewis

    Reply Author

    Nice tutorial!
    Is it possible to set a delay on the popup opening?


  • Bao
    Posted on

    Bao Bao

    Reply Author

    Nice tutorial, thank you


  • arjun
    Posted on

    arjun arjun

    Reply Author

    Nice one, i am using this in my website


  • busayo
    Posted on

    busayo busayo

    Reply Author

    Great piece here! you made my day with this. Thanks GBU!


  • Jeffrey
    Posted on

    Jeffrey Jeffrey

    Reply Author

    This is a horrible user experience. Every time I visit a new page on your site I get the popup. If I didn’t care about it the first time, I don’t want to see it every time I go to a new page on your site. You should be using it more intelligently . If a user saw it once, there is no need to have to see it again and again and again and again and again.


  • paul
    Posted on

    paul paul

    Reply Author

    Thank you for the script! How can I modify the script to popup regardless of cookies. I want a popup every time the visitor comes to the site even if they’ve seen the popup previously within the last 15 days.

    Thanks in Advance,
    Paul


  • Neda
    Posted on

    Neda Neda

    Reply Author

    Salam


  • PC
    Posted on

    PC PC

    Reply Author

    Hi, I am trying to make some adjusts to this script and I have some questions, maybe you can help me.

    I would like to add a second JavaScript when i close the box, I am trying to implement a video player (JW player) and even if I close the box, the sound still coming out because the player still “playing” the video. In order to close the player I have to run the following command:
    jwplayer(‘mediaplayer’).remove();

    how can I add this to the close button???

    thanks again

    PC


  • gotcha5832
    Posted on

    gotcha5832 gotcha5832

    Reply Author

    Thanks a lot.

    And if you woulid like, that box doesn’t show for google bot?


  • kimo
    Posted on

    kimo kimo

    Reply Author

    Thanks for this tutorial :)


  • Pushpinder Bagga
    Posted on

    Pushpinder Bagga Pushpinder Bagga

    Reply Author

    Its always advisable to have a subscription form right in the lightbox – saves an extra step for the user and reduces fall outs.