How to add a countdown timer to your website?

Would you like to make your website more attractive and increase user engagement? Add an interactive countdown timer that will display the time remaining until your event!

Just follow a few simple steps:

1. Go to the Website > List of pages and select the subpage where you want to place the timer.

2. Add a new section or content block. Then switch to HTML editing of the selected element and paste the following code:

Remember to set the correct event date and add a short description above the timer.

<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="days" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">138</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">Days</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="hours" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">2</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Hours</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="minutes" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">41</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Minutes</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="seconds" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">0</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Seconds</h4>
        </div>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script class="is-animated is-fadeIn delay-500ms">
    $(document).ready(function() {
        // Target date (22 September 2025, 17:00)
        var targetDate = new Date("2025-09-22T17:00:00").getTime();

        // Update the countdown every second
        var countdown = setInterval(function() {
            // Current date and time
            var now = new Date().getTime();

            // Difference between now and the target date
            var distance = targetDate - now;

            // Calculations for days, hours, minutes, and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the results in the corresponding elements
            $("#days").text(days);
            $("#hours").text(hours);
            $("#minutes").text(minutes);
            $("#seconds").text(seconds);

            // If the countdown is over, stop the timer
            if (distance < 0) {
                clearInterval(countdown);
                $("#days").text("0");
                $("#hours").text("0");
                $("#minutes").text("0");
                $("#seconds").text("0");
            }
        }, 1000); // Update every second
    });
</script>

3. Save the changes and check how the timer looks on your website.

Additionally, in the Conrego panel under Settings, you can easily customize the timer’s appearance: change the background color, the width and height of the circles, and the font color. Match the timer to your website’s design! Clock