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
Great little tip, thanks for the code. 🙂
Hey Aaron,
Thanks for sharing this. Tried the hard way to figure this out on my own. You just saved me some time!
Dave
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.
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
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
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
———————-
Thanks Aaron
Great little bit of code. I hopeless at trying to create code and people like you help a great deal.
Thank you
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
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
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
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
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 >
All fixed, thanks for that.
Aaron
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
@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
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.
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!! 🙂
Great post!
Is there a way to add 2 hidden buttons? I tried using the code provided but with no success.