Creating a Countdown Timer

Often times customers will want to incorporate a timer into their Experiences to count down towards a certain holiday or date that is important to their business.

While you can use a number of tools outside of Creator to create those timers and then pull them into an Experience using either our HTML Widget or Embed Widget, you can also use the instructions and code template below to create your own timer!

Disclaimer: working knowledge of how to edit code will be very helpful, if not necessary to a degree, in order to understand how this comes together

Start by creating an Experience and place a Text Widget into that Experience. Please note that this Text Widget must be at the top of the Widget Tab Order and Widget Layer Order to get this to work properly:

Other Widgets are allowed to be present in this Experience, but the first Text Widget in your Tab and Layer Order is what will turn into your timer. You can enter any text of your choosing into this Text Widget, as that text will get replaced with the countdown in a moment.

Next, add an HTML Widget to your Experience - this can be added to any part of the Experience and be set at any width/height as nothing will actually be rendering inside of the purple HTML Widget area in this instance.

Paste the following code into that HTML Widget (this is what will change the text in your Text Widget into a live, running countdown timer):

<script>
// EDIT #1: Set the date we're counting down to in between the quotation marks in the line below
var countDownDate = new Date("May 5, 2025 13:59:59").getTime();

// 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 = countDownDate - now;

// Time 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);
if (seconds<10){
seconds= "0" + seconds
}
if (minutes<10){
minutes = "0" + minutes
}
if (hours<10){
hours = "0" + hours
}

// Display the result in the first Text Widget
var counter = top.document.querySelectorAll('.scene-1 > .widget-component.text-enhanced-widget *> span *> span * > span *')[0];

// EDIT #2: Set the color of the text via a hex color code in between the quotation marks in the line below
counter.style.color = '#FFFFFF';
counter.textContent = days + " DAYS " + hours + " HOURS " + minutes + " MINUTES " + seconds + " SECONDS ";

if (distance < 0) {
clearInterval(x);
// EDIT #3: If the count down is finished, display the text in between the quotation marks in the line below
counter.textContent = "THE SALE HAS ENDED!";
}
}, 1000);
</script>

The commented lines in the above code (the ones that start with //) help to explain what each portion of the code is doing here. Take note of the three commented lines that start with "EDIT" as those are ones where your input is required in order to customize the timer to your liking!

EDIT #1 is where you enter the date and time that the timer should count down to.

EDIT #2 is where you enter the color of the text in the timer. The typeface being used, font sizing, and all other styling options can be adjusted via the Text Widget's settings per usual in Creator.

Note: If you are using a white background for the experience, please make sure to change the hex code for the color in the EDIT #2 part, otherwise you won't be able to see the timer running because the white text will be overlapping the white background.

EDIT #3 is where you can set what text should display when the timer reaches it's goal (i.e. a countdown to Christmas might read "It's Officially Christmas!" when it finally reaches December 25).

At a minimum, your Experience should now have one Text Widget and one HTML Widget inside of it like so:

But when you Preview the Experience, it should replace the text with your countdown, and look something like this:

Please contact support@getfastr.com with any further questions on this!