How to Add Popup Download Timer Button in WordPress

In this article, I will show you how you can add a popup download timer button to your WordPress website.

The popup download button helps keep the user stay longer on the website. When someone tries to download some files from your website, it will show a download popup with a countdown timer.

Once the countdown timer finishes, it will reveal the actual download button. Here, you can set 30 sec, 20 sec according to your need.

In addition to that, you can display AdSense ads on that popup, which will allow you to earn more ad revenue. You will get more Ad impressions and click out of it.

You don’t need any additional plugins to do that. You just need to add a small code in your blog post.

So, let’s check how you can implement this download timer button in the WordPress website.

Popup Download Timer button in WordPress

To add the popup download timer button in wordpress, go to the dashboard and create a new post.

Now you can search for the “custom HTML” Block and add the below code to it.

<div class="Popup_button" id="Popup_button">Download</div>
    <div class="modal" id="Popup_Back">
        <div class="Popup_bg"></div>
        <div class="Popup_inner">
            <div class="pop-heading">
                <label class="pop__close pop_btnclose"><svg style="height: 25px; width: 25px; fill: black;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></label>
                <h2 style="margin: 0px;">Download Your file</h2>
            </div>
            <div class="pop_final_btn">
                <a class="button" download="" href="#" id="K_download">Download File</a>
            </div>
            <div class="popup_ad_container">
                <div class="adhtml">
                    <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="xxxxxxxxxxx" data-full-width-responsive="true" style="display: block;"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
<style>
.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;background:rgba(0,0,0,.9);transition:opacity .25s ease;z-index:999}Popup_button{cursor:pointer}.Popup_bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}.at-pop{display:none}.Popup_inner{transition:top .25s ease;position:absolute;top:-20%;right:0;bottom:0;left:0;width:50%;margin:auto;overflow:auto;background:#fff;border-radius:5px;padding:1em 2em;height:50%}.pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}.pop__close:after,.pop__close:before{position:absolute;width:2px;height:1.5em;background:#333;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0}.pop__close:hover:after,.pop__close:hover:before{background:#aaa}.pop__close:before{transform:rotate(-45deg)}@media screen and (max-width:768px){.Popup_inner{width:90%;box-sizing:border-box}}.pop-heading{height:40px;width:100%;border-bottom:1px #e5e5e5 solid}.adhtml{margin:14px 0 4px;min-height:260px}.popup_ad_container{height:330px}#K_download{display:inline-block;height:45px;line-height:20px;width:180px;text-align:center;background-color:#005488;color:#fff;padding:8px;font-size:19px;border-radius:1px;text-decoration:none;margin-top:1px;align-items:center}.pop_final_btn{line-height:16px;margin:15px;font-size:19px;text-align:center;position:relative}.Popup_button{display:block;height:40px;color:#fff;font-size:20px;text-transform:uppercase;background:#c44341;text-align:center;line-height:40px;width:200px;margin:auto;transition:all .4s ease-in;cursor:pointer;align-items:center}.pop-heading h2{margin:0}
</style>

        <script>
        //<![CDATA[
        const modal = document.querySelector("#Popup_Back");
        const btn = document.querySelectorAll(".Popup_button");
        const closeModal = document.getElementsByClassName("pop_btnclose")[0];
        for (let i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function() {
                modal.style.display = "block";
            });
        }
        btn.onclick = function() {
            modal.style.display = "block";
        };
        closeModal.onclick = function() {
            modal.style.display = "none";
        };
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
        var downloadButton = document.getElementById("K_download");
        var counter = 30;
        var newElement = document.createElement("span");
        newElement.innerHTML = "Please Wait 30 sec";
        newElement.style.font = '16px';
        var id;
        downloadButton.parentNode.replaceChild(newElement, downloadButton);
        function startDownload() {
            this.style.display = 'none';
            id = setInterval(function() {
                counter--;
                if (counter < 0) {
                    newElement.parentNode.replaceChild(downloadButton, newElement);
                    clearInterval(id);
                } else {
                    newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... ";
                }
            }, 1000);
        };
        var clickbtn = document.getElementById("Popup_button");
        clickbtn.onclick = startDownload;
        
        //]]>
</script></div>

Source: Key2Blogging

Now replace the download link in the # value and replace the publisher id and ad slot code of your ad unit.

Now publish the page and your Download timer button is added to your wordpress website.

You can also change the duration of count down by replacing the value in the javascript code used above. (var counter = 30;)

You can also change the download button color by replacing the hex code ( #c44341) highlighted above.

If you have any doubts regarding this, feel free to ask me in the comment section. You can see the preview of the download timer button and download the code to your computer.