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 (modal, tooltip, input) or a Hotspot, click on the green + ADD button to add a component to your Guide

  • Choose the HTML component

  • 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:

Did this answer your question?