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.
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.
- Download the Countdown Timer component. (You don't need to unzip the file).
- In Google Web Designer, click the button at the bottom of the Components panel.
- Select the .zip file you downloaded and click "Open".
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.
|Name||Sets the name of the component.|
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.|
Whether to use remote server time or the user’s local computer clock.
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:
|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.|
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:
- Add a button to the stage.
- Use the Events panel to add an event to the button, for example, Mouse > click.
In the event Action panel, select Countdown Timer > start.
- 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.
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.
Start the countdown timer.
Pause the countdown timer.
Reset the countdown timer.
Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.