How to Delay a Buy Button or Link from Showing on a Webpage

 |  18 Comments  |  Posted in Marketing By Aaron

Thought I’d answer a question from the warrior forum on my blog with a video. I know some of your will want to know this. Watch below.

How to delay a buy button or link to appear on your website after a certain amount of time. This is popular for video sales letters so that visitors are forced to watch to a certain point in the video.

Of course this method is so crude that the visitor just needs to pause the video on your webpage and come back to it later and the button / link will have appeared since it’s just on a timer and not triggered from the video player. So if you need to sync this up to appear when you are speaking about it in the video, you’ll need the more advanced method.

The more advanced method is hooking the javascript up to an event from the flash player at the 15th minute for example. JWplayer (my favourite web based flash FLV player) has this ability, but that’s a whole other video tutorial since it’s an advanced approach.

But why make it hard for yourself, just do it this way it’ll cover you for most cases.

Stick this in the header area of your code

	
<script type="text/javascript">
    function showBuyLink() {
      document.getElementById("buylink").style.visibility = "visible";
    }
	// adjust this as needed, 1 sec = 1000
    setTimeout("showBuyLink()", 5000); 
</script>

Stick this around your buy link code.

<div id="buylink" style="visibility: hidden">
	<!-- put all your add to cart buy links and images inside this hidden div -->
	<p style="text-align:center; font-size:26px;">
	<a href="http://mybuylink">Add to Cart or Buy Link</a>
	</p>
</div>

Talk soon
Aaron


18 Comments On “How to Delay a Buy Button or Link from Showing on a Webpage”


#1 Gary McCaffrey on on March 22, 2010 at 2:33 pm

Great little tip, thanks for the code. 🙂


#2 David Lovelace on on March 23, 2010 at 2:30 pm

Hey Aaron,

Thanks for sharing this. Tried the hard way to figure this out on my own. You just saved me some time!

Dave


#3 Nelson Tan on on March 24, 2010 at 1:16 am

Just the other day I saw someone else’s video salesletter with a PayPal button right below and I figure he didn’t buy a specialized software, whatever it is. I didn’t know you don’t need ANY specialized software. Thanks for the nifty code, nothing short of brilliant.


#4 Ian Richardson@Top Ranked Website on on March 25, 2010 at 10:48 am

Hey Aaron,

Long time since I saw something from you, and as usual it’s a great piece of advise.

Might be in touch with you sometime to see if you are interested in some coding work.

Thanks

Ian


#5 Aaron on on March 25, 2010 at 12:37 pm

Thanks for your comments.

@Ian I don’t do custom coding unless I can make a product out of it. Happy to chat with you about it.

Aaron


#6 Ian Traynor on on March 26, 2010 at 4:15 am

Hi Aaron

That really is neat – and so simple.

I’ve just been watching a video sales page (I hate those things!) and saw the “Buy” button pop up at the end of the video.

I was wondering how this was done, and then I re-read your email.

Thanks for sharing this with us.

Regards

Ian Traynor
Professional Webmaster
———————-


#7 annette taylor on on March 27, 2010 at 6:04 am

Thanks Aaron

Great little bit of code. I hopeless at trying to create code and people like you help a great deal.

Thank you


#8 Stuart - NetActivated.com on on March 27, 2010 at 1:39 pm

Nice bit of code.
While I could never imagine wanting to hide, for
any length of time, a buy button, I can see a LOT
of uses for your snippet.

Regards,
Stuart Halpryn
NetActivated.com


#9 Gary aka The Nutty Markerter on on March 28, 2010 at 12:47 am

Hi Aaron,

Really appreciate this great tip.

I can think of quite a few ways that it can be used and will try a few of them soon.

Thanks again.

Gary…aka
The Nutty Markerter


#10 Scott on on April 1, 2010 at 3:44 am

Hi Aaron,

This is great, thanks for the tutorial. I actually needed the opposite, I needed an image to appear first, then disappear after a specified period. So, I just swapped out visibility and hidden in your code and it worked perfectly.

I tested this in IE7, but do you know if this works in IE6? Just curious. Sorry, one more thing. This is a nice, short piece of code. Is this preferred over jquery or any other more robust javascript?

Thanks again, you saved me a lot of time 🙂

Scott


#11 David Lovelace on on April 8, 2010 at 3:30 am

Hey Aaron

FYI: you have an error in your header code.

>

The extra > at the end needs to be removed. If others couldn’t get it to work after copying and pasting your code, that’s why 🙂

Dave


#12 David Lovelace on on April 8, 2010 at 3:31 am

oops. pasting the code (in question) in comments didn’t show up.

It’s the first line of code in the header.

Just remove the last >


#13 Aaron on on April 8, 2010 at 8:19 am

All fixed, thanks for that.

Aaron


#14 Megadoosh on on April 12, 2010 at 12:08 pm

How do you get the entire div to be hidden along with the buy button?

This just leaves an empty placeholder for the entire content and then shows the button inside. Basically you have big empty white space under your video that looks odd.

Also doesn’t work in Firefox 3.6


#15 Aaron Dwyer on on April 12, 2010 at 4:49 pm

@Megadoosh What you is doable, however that’s more advanced to hide the whole div, and a tutorial all to itself. You should look into using Jquery to make that easier.

Also this code does work in Firefox 3.6 (depends I guess what you tell you browser your webpage standard is set to)

Aaron


#16 Sam on on November 5, 2010 at 9:17 pm

Thanks Aaron for sharing the code!!

I created video salesletters with Mike’s help from videosalesletterguru he teaches how to create a script with 20 step formula, how to record the converting video and gives the templates.


#17 Dan on on April 16, 2015 at 10:47 pm

Thanks a lot for the tip, this is a real life saver. I’ve messed around with so many stupid glitchy plugins etc, this way is MUCH better!! 🙂


#18 Adam on on July 20, 2015 at 12:05 am

Great post!
Is there a way to add 2 hidden buttons? I tried using the code provided but with no success.



Post A Comment

Your email is never shared. Required fields are marked *