Graphics Widget: Timer

Add a Countdown, Count Up or Stopwatch timer to your Graphics Template

Sky Muller avatar
Written by Sky Muller
Updated over a week ago

The Timer widget allows you to add a dynamic countdown, count up or stopwatch layer to your graphic template. These can be formatted to count to a specific date & time, only the time or manually start and stop your timer with the stopwatch. All of these will be controllable using hot keys in Tagboard Producer.

To get started insert a Timer widget into your graphic. Click on the layer in the graphic to open all the individual customization options.

On the right side of your screen you can start by customizing the size and placement of your Timer.

Timer Format

There are three types of timers you can create: Countdown, Count Up and Stopwatch. Select the dropdown menu below 'Type' to select which timer you want.

Countdown & Count Up

Whether you select Countdown or Count Up the rest of the customizations remain virtually the same. First you'll decide if you want to display just the Time or Date & Time. Once that is done, you can choose the format you want it to display in. There are a number of options for Display Format, depending on which widget type you chose all the options are a combination of days, hours, minutes and seconds.

When that is complete you can then toggle the time under Preview, and ultimately test using the Play and Reset buttons.

The Style & Animation customizations are primarily the same as any other text layer in your graphic. However one thing that is important to call out is the button to toggle on/off the units. This is located right below where you can toggle bold or italic text.


Once you select Stopwatch you'll then decide if you want to toggle on/off hours and milliseconds.

Similar to Countdown and Count Up, you can then preview your Stopwatch by clicking the Start and Reset buttons.

The Style & Animation customizations are primarily the same as any other text layer in your graphic.

NOTE: You are allowed to add multiple Timers to the same graphic template if you wish to have multiple timer layers.

Use Hot Keys to control Timer Graphic in Tagboard Producer

Once your graphic template is complete, head to Tagboard Producer and drag it onto your playlist. When it's on your playlist you can click on it to open the Graphic Editor. Select the Timer layer, and you will see the hot keys you can use to control the widget. You have the option to Start, Pause and Reset the Countdown, Count Up or Stopwatch timer. You can choose to use the letters S, P and R, or click with your cursor on the box that matches the action you want. In addition to the hot keys you will see where you can update the duration of your timer.

Important Note: The timer layer HAS to be selected in the graphic editor for you to be able to utilize the hot keys.

Did this answer your question?