Skip to content
Gallery
nytgames
CreativeTech Wiki (internal)
creativeTECH Wiki
Share
Explore
Processes

icon picker
Countdown Clock

⁠
countdown-widget.png
⁠
⁠

Introduction

⁠
A Countdown Clock is an easy-to-implement, highly-customizable timer that can be added to any ad unit.

Meta

⁠
Developer: Monica Cholico
Designer: Shea Fitzpatrick
Keyword: flexmess2logo

Links

⁠
🔗
Repo
⁠
⁠
🔗
Demo
⁠
⁠
🔗
Figma
⁠
⁠
🔗
GAM Desktop
⁠
⁠
🔗
GAM Mobile
⁠
⁠

How to Add a Countdown Clock

⁠
Adding a countdown is easy. Simply copy the JS below, paste it into the CustomScript field of your ad, and customize. There are plenty of options for creating the ideal countdown clock, all of which are defined below in the Countdown Widget Options section.
NOTE: The countdown must inserted into an existing element.
// CustomScript
<link rel="stylesheet" href="https://static01.nytimes.com/ads/creative-tech/flex-frames/lib/widgets/countdownClock/countdown.css"/>
<script id="countdown-js" src="https://static01.nytimes.com/ads/creative-tech/flex-frames/lib/widgets/countdownClock/countdown_clock.min.js"></script>
<script>
new Clock({
debugMode: false,
appendingElement: '.media-container',
countdownStarting: "2023-10-27 12:45:00",
countdownEndMessage: "",
countdownTextColor: "rgba(255, 255, 255, 1)",
countdownBackgroundColor: "rgba(0, 0, 0, .5)",
countdownBackgroundBorderColor: ".15em solid rgba(255, 255, 255, 1)",
effectBlur: false,
effectRoundedCorners: false,
effectShadow: false,
effectTightenDateText: false,
showDays: true,
showHours: true,
showMinutes: true,
showSeconds: true,
showCountdownAfterEnd: true
});
</script>
/* CustomCSS */
/* This is optional code to help you center the countdown within a media container */
.media-container {
display: flex;
align-items: center;
justify-content: center;
}

@media screen and (max-width: 965px) {
.media-container {
align-items: unset;
justify-content: unset;
}
.media-container .countdown {
position: absolute;
transform: translateY(100%);
align-self: center;
}
}

#clockapp {
width: 75%;
}

Countdown Clock Options

⁠
debugMode ​TYPE: Boolean | DEFAULT: false | Optional ​DESCRIPTION: Puts the add into a debug mode that turns off countdown and shows all design elements.
appendingElement ​TYPE: String | DEFAULT: “.media-container” | Required ​DESCRIPTION: The HTML element of which the Countdown is injected. ​EXAMPLE: .media-container
countdownStarting ​TYPE: Date | DEFAULT: “” | Required ​DESCRIPTION: The date for the END of the countdown. ​FORMAT: YYYY-MM-DD HH:MM:SS ​EXAMPLE: 2023-10-27 12:45:00
countdownEndMessage ​TYPE: String | DEFAULT: “” | Required ​DESCRIPTION: The message to display at end of countdown.
countdownTextColor ​TYPE: String | DEFAULT: “rgba(255, 255, 255, 1)” | Required ​DESCRIPTION: Text color of all text elements.
countdownBackgroundColor ​TYPE: String | DEFAULT: “rgba(0, 0, 0, .5)” | Required ​DESCRIPTION: Background color for countdown background. Use rgba colors with opacity to have a transparent background.
countdownBackgroundBorderColor ​TYPE: String | DEFAULT: “.15em solid rgba(255, 255, 255, 1)” | Required ​DESCRIPTION: Border color for countdown. Use rgba colors with opacity to have a transparent background.
effectBlur ​TYPE: Boolean | DEFAULT: false | Optional ​DESCRIPTION: Adds blur effect to countdown background.
effectRoundedCorners ​TYPE: Boolean | DEFAULT: false | Optional ​DESCRIPTION: Rounds the corners of the countdown background.
effectShadow ​TYPE: Boolean | DEFAULT: false | Optional ​DESCRIPTION: Adds a shadow to the countdown background.
effectTightenDateText ​TYPE: Boolean | DEFAULT: false | Optional ​DESCRIPTION: Will tighten the space between the countdown text, in case you remove elements.
showDays ​TYPE: Boolean | DEFAULT: true | Required ​DESCRIPTION: Displays the day element.
showHours ​TYPE: Boolean | DEFAULT: true | Required ​DESCRIPTION: Displays the hours element.
showMinutes ​TYPE: Boolean | DEFAULT: true | Required ​DESCRIPTION: Displays the minutes element.
showSeconds ​TYPE: Boolean | DEFAULT: true | Required ​DESCRIPTION: Displays the seconds element.
showCountdownAfterEnd ​TYPE: Boolean | DEFAULT: true | Required ​DESCRIPTION: If you would like the countdown to disappear after it’s complete, set this to false.

Recipes

⁠

Modify the width of the countdown clock

In the CustomCSS field, add the following code. Note that the target for the clock in #clockapp.
/* Countdown Clock Width */
#clockapp {
width: 75%;
}

Modify the countdown effects

In the CustomCSS field, add the following code. Note that these all require an !important.
/* Custom Blur Effect */
.countdown[data-blur="true"] {
backdrop-filter: blur(20px)!important;
}

/* Custom Rounded Corners Effect */
.countdown[data-roundedCorners="true"] {
border-radius: 30px!important;
}

/* Custom Box Shadow Effect */
.countdown[data-shadow="true"] {
box-shadow: rgba(0,0,0,1) 0px 0px 60px!important;
}

Reduce space around colons

When the tighten effect is enabled, you can modify the text further with the following customization. Note that this requires an !important.
/* Adds space around colons */
.countdown[data-tightenDateText=true] .colon {
padding-left: 5px!important;
padding-right: 5px!important;
}

Moving headings below countdown

.countdown .wrap > div {
display: flex;
flex-direction: column;
}
.countdown .wrap > div label {
order: 2;
}
.countdown .wrap > div.colon {
line-height: 70%;
}

Downloads

⁠
Spec one-pager for clients:
⁠
countdown-messaging_specs.pdf
36.8 MB
⁠
⁠
⁠
countdown-video_specs.pdf
11.6 MB
⁠
⁠
Introduction
Meta
Links
How to Add a Countdown Clock
Countdown Clock Options
Recipes
Modify the width of the countdown clock
Modify the countdown effects
Reduce space around colons
Moving headings below countdown
Downloads
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.