Disclosure: Some of the links to products in this article are affiliate links. It simply means, at no additional cost to you, we’ll earn a commission if you click through and buy any product.
Do you want to add a download timer to your WordPress website so that the actual download button appears when the timer finishes? If yes, then this article will help you use the download timer in WordPress for free.
Download timer is one of the best ways to improve bounce rate, and if you are providing a download link to any file/document you must add a timer, and when the timer finishes the actual download button should appear.
How To Use Download Timer in WordPress?
Step 1: Install & Activate Timed Content plugin (by K. Tough, Arno Welzel, Enrico Bacis) for free
Step 2: Add the below JS code before </body> tag
<!-- Timed Content JS Start -->
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
//location.href = '#clickimage';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1100);
</script>
<!-- Timed Content JS End -->Step 3: Add the below shortcode where you want to use the Download Timer
[timed-content-client hide="0:20:0" display="div"]
<img class="aligncenter size-medium" src="https://i.imgur.com/buO4Nt2.gif" width="94" height="98">
<p style="text-align: center;"><b><span style="color: #C92228;"><span style="color: #C92228;"><span style="color: #C92228;">Loading Download Links In</span> <span id="counter">20</span><span style="color: #C92228;"> Seconds.....</span></span></span></b></p>
[/timed-content-client][timed-content-client show="0:20:0" display="div"][/timed-content-client]Note: Use these 3 shortcodes in 3 new lines like the below image.
![Add Download buttons before [/timed-content-client] line](https://www.hextoid.com/wp-content/uploads/2022/10/add-download-buttons-before-timed-content-client-line.webp)
Step 4: Add Download buttons before [/timed-content-client] line
Step 5: Add the below CSS to make the timer looks cool
#counter {
color: #fff;
background: #C92228;
padding: 10px;
border: 5px solid #fff;
border-radius: 55px;
width: 10px;
margin: auto;
text-align: center;
box-shadow: 0 2px 15px 0 #c7c7c7;
}This shortcode is for 20 seconds timer if you want to increase or decrease it can be changed from the shortcode, just replace 20 everywhere and put the time how you want to keep. The image can also be changed by replacing the image URL from the shortcode.
This is how you can use a timer before a download button. The best thing is you can use multiple buttons at once. If you have any queries make sure to drop them in the comments below or help us by sharing this article on social media.
