Have you ever landed on a squeeze page that began a presentation only to magically display an “add to cart” button right at the moment the presenter is offering you the world on a silver platter? That’s a pretty good trick actually. I’ve been testing it for awhile now on different projects so today I want to show you a simple snippit of code you can use to set it up on your site in about 2 minutes.
Now this is super simple for anyone to cut and paste. Just so you know what’s going on from a technical standpoint, we use JavaScript to set a timer when the page loads. CSS hides a div element until the timer expires, at which point it is set to visible.
Here is an example with a 3 second delay if you just want to “view source” and copy it for your site.
Step 1: Create a new HTML document. In the head add the following javascript:
<script type=”text/javascript”>
function showContent() {
document.getElementById(“hidden”).style.visibility = “visible”;
}
setTimeout(“showContent()”, 3000); // 1 sec = 1000
</script>
Step 2: Change the 2nd to last line, where it says 3000 to however long you want the visitor to wait before the hidden content shows (1 sec = 1000, default is 3 seconds).
Step 3: Add a div inside the body tags, and format it as follows. You may place any html or message you want inside the div.
<div id=”hidden” style=”visibility: hidden;”>your content here</div>
