Countdown (up) Timer

This article will walk you through adding a Timer (countdown or up) to your ad unit.  The Timer Component can be added to any type of Format.

HubSpot Video

Once you’ve created your ad, select Timer from the Components drop down menu:


You’ll now see a Timer set on your ad canvas in the top left corner.  By default, the timer will display the days, hours, minutes, and seconds separated by colons and leading with zeroes.


Move the Timer to the desired location in the ad:


Editing the Timer

With the Timer selected within the ad, a Timer editing area will display to the right in the builder.  It is set to the default “To Date” format which can be changed to “To Number”.


To Date:

If you select “To Date” you will be able to edit the date, time and select the timezone as well as change the display (days, hours, minutes, seconds, colon separators, leading zeroes) and spacing.  See below:

Date – when you click on this, a calendar will appear for you to select a date.  Use the arrows to scroll to the desired month, then click on the day:



Time – click within the field to change the time.  Click on the arrow next to PM to change to AM.

Timezone – click the arrow next to the field and choose from the list. 

You can choose:

User’s Time Zone - for the person viewing the ad

My Time Zone – your time zone

Any other time zone (listed by abbreviation) – helpful site for time zones:

Display – click the checkboxes to select/deselect how the timer will display.


After (i.e. only the hours, minutes, and colon separators selected):

The Timer will update on screen – see example below showing only hours and minutes separated by a colon:


Spacing – click the arrows up or down within this field to change the spacing of the numbers in the Timer.


The Timer will update on screen – see example below showing wider spacing from choosing 22px:


Font and Text Size- Just as you can with text, you can modify the color, font, and size of your timer.



To Number:

If you select “To Number” you will be able to edit the number (start/end), speed and spacing.  See below:

Start/End – click on the arrows next to “Start” and “End” to change the numbers of your timer.  In this example, we chose a start number of “1” and an end number of “10”.


For this example, when you preview the ad, the timer will start at “1” and count up to “10”.

Speed – click on the arrow to change the speed (in seconds) of how fast the timer rotates numbers.  In this example, we chose a speed of 1 second.

Spacing – click on the arrow to change the spacing of numbers.  The higher the pixel, the wider the space between 2 numbers. 

For this example, we chose 14px:

When you preview the ad, the Timer will show wider spacing of 14px once it reaches 10 (if your timer goes that high):

Click Apply to save the Timer edits.