How to add a countdown timer to your website?
This article refers to an older version of the CMS in CONREGO. In the new “Content Blocks” editor, some features may work differently.
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!
