Overview

In some cases, displaying a countdown timer for a project launch, special offer, banner ads, etc may be necessary. This article will explain creating a countdown timer with an HTML component.

Creating a Countdown Timer

• While using the Chrome extension, whether you choose a Guide or a Hotspot, click on the "+" icon to add a component.

• Choose the HTML option.

.

• Insert the following countdown timer template code.

<h3 style="display:flex;justify-content:center"id="ug-yearlydc-countdown"> -h -m -s</h3>
<script>
(function () {
var lsTimerStartedAt = localStorage.getItem("ugyearlydctimer");
var timerStartedAt = lsTimerStartedAt
? new Date(parseInt(lsTimerStartedAt, 10))
: new Date();
localStorage.setItem(
"ugyearlydctimer",
timerStartedAt.getTime().toString()
);
var endDate = new Date(2021, 10, 1, 12, 0, 0)
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = endDate - now;
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 result in the element with id="demo"
document.getElementById("ug-yearlydc-countdown").textContent =
hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("ug-yearlydc-countdown").innerHTML = "EXPIRED";
}
}, 1000);
})();
</script>

• Find this specific line within the code and change the end date as you like in this format: Year, Month, Day, Hour, Minute, Second

var endDate = new Date(2021, 10, 1, 12, 0, 0)

• Click Save.
• Publish Changes from the Panel.

And the final result should be like this:
​