Overview

In some cases, it may be necessary to display a countdown timer for a project launch, special offer, banner ads, etc. This article will explain how to create 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 on Save
Publish Changes from the Panel

And that should be the final result!