Search
Clear search
Close search
Google apps
Main menu

Countdown Timer component

Countdown Timer is a custom component for Google Web Designer that adds a countdown clock to your creative without having to write any code.

Install the component

This component only works with Google Web Designer. Don't have Google Web Designer? Download it here. If you have a previous version installed, it will automatically be updated to the latest version.

  1. Download the Countdown Timer component. (You don't need to unzip the file).
  2. In Google Web Designer, click the Image of add new component button in Google Web Designer button at the bottom of the Components panel.
  3. Select the .zip file you downloaded and click "Open".

Learn more about installing and removing custom components in Google Web Designer

Use the component

Drag the component to the stage to start using it in your creative. To customize, first select the component on the stage, then open the Properties panel and scroll down to Component properties

Component properties

Property Description
Name Sets the name of the component.
Target date

Date to count down to. This date needs to be formatted RFC 822 or ISO 8601 specifications.

Examples

RFC 822 date ISO 8601 date
Sun, 09 Sep 2029 15:53:00 +0700 2029-09-09T15:53:00+07:00
Start at

A number to count down from. This number is only used no Target Date is set.

Auto start Start the countdown automatically when ready. If false, the timer must be started via an event instead.
Server time

Whether to use remote server time or the user’s local computer clock.


The server time is used when setting a target date. The server time retrieves the Unix timestamp, which is based on UTC time.


Use the user’s local time when you want to count down to a specific time in the timezone the user is in, for example a store opening. Use the server time when you want to make sure that it’s counting down to a specific time globally.

Events

Events are how you connect a physical gesture from your user to a recorded action in your ad. The component sends the following events, which can be used to trigger other actions:

Event name Description
Ready Sent when the component is ready to start.
Started Sent when the countdown starts.
Paused Sent when the countdown is paused.
Ended Sent when the countdown ends.
On tick Sent every 500 milliseconds while the countdown is running.

Actions and methods

You can manually control the Countdown Timer component, when you want to use custom buttons, or when Autostart is set to false. To start, pause, or reset the timer, you can write JavaScript code to call the start method on the component instance, or use Web Designer's Events panel to add the Start action to a Tap Area or Image Button.

To allow the user to start the countdown timer using a button:

  1. Add a button to the stage.
  2. Use the Events panel to add an event to the button, for example, Mouse > click.
  3. In the event Action panel, select Countdown Timer > start.

  4. In the Receiver step, choose the Countdown Timer component's instance name and click OK. By default, the component is named ci-countdown-timer_1, but you can change this name using the Properties panel.

Follow the same steps above, choosing a different action in step 3 to either pause or reset the countdown timer.

Learn more about how to add events to buttons in the Google Web Designer Help Center.

Using JavaScript code instead of Web Designer actions

If you prefer, you can write your own code to call the public methods on the component instance to start, pause, or reset the countdown timer.

Method name Description
start

Start the countdown timer.

Example
ci-countdown-timer_1.start();

pause

Pause the countdown timer.

Example
​ci-countdown-timer_1.pause();

reset

Reset the countdown timer.

Example
​ci-countdown-timer_1.reset();

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?