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

icon picker
DRAFT: Countdown Clock Recipe

🛑 THIS IS A DRAFT! 🛑

The countdown clock recipe can be configured based on the geolocation of the where the ad is serving, as well as the geolocation of the user accessing it to compute the remaining time.

Code Implementation

⁠
Add the following HTML snippet to your build where you want to add the countdown timer.
You will need to update the path (./template-logo.png) to where the client logo is hosted so it can be used into your program, as well as the alt text attribution.
<div id="logo-clockapp">
<div id="logo-wrapper">
<img src="./template-logo.png" alt="Template logo" />
</div>
</div>

Add the following HTML snippet at the bottom of your code so the countdown clock can be configured and dynamically rendered in the above code. This code will not work alone.
<script src="https://static01.nytimes.com/ads/creative-tech/flex-frames/lib/countdown_clock_recipe.js"></script>
<script>
new Clock({
appendingElement: '#logo-clockapp',
countdownStarting: "2024-03-24 00:00:00",
adTimeZoneOffset: "-05:00",
color: "rgba(0, 0, 0, 1)",
background: "rgba(0, 0, 0, 0.5)",
border: "solid .5em rgba(255, 255, 255, 0.5)";
optionalSeconds: true,
uppercase: true,
blur: true
});
</script>
filled-star

⁠
Jump to Countdown Clock Options
⁠
⁠


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: “#logo-clockapp” | Required ​DESCRIPTION: The HTML element of which the Countdown is injected. ​EXAMPLE: #logo-clockapp
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
adTimeZoneOffset ​TYPE: String | DEFAULT: “+05:00” | Required ​DESCRIPTION: The offset for the time zone the clock will count down to. See
Time Zone Offset Options
⁠
below. ​FORMAT: +/-00:00 ​EXAMPLE: +05:00 ​EXAMPLE: -09: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.

Time Zone Offset Options

⁠
By default, we have the adTimeZoneOffset variable set to “-05:00” for EST/New York time zone.
Here are the most common time zones listed below, as well as the UTC offset value you’ll need to configure the countdown widget:
Common Time Zones
Time Zone
Nearest City
UTC Offset
Offset String Value
1
PST
San Diego
-08:00
"-08:00”
2
MST
Denver
-07:00
"-07:00”
3
CST
Chicago
-06:00
"-06:00”
4
EST
New York City
-05:00
"-05:00”
5
GMT
London
+0:00
"+00:00”
6
IST
Mumbai
+05:30
“+05:30”
7
CST
Beijing
+08:00
"+08:00”
8
KST
Seoul
+09:00
"+09:00”
There are no rows in this table
⁠
To find the time zone for your ad, please refer to
Wikipedia’s comprehensive list
⁠
of global time zones and find the corresponding UTC offset.
high-priority
LC to see if we should include a video-specific implementation example!

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.