How to Create a Countdown Ad

A countdown billboard is one of the most effective dynamic creative formats in DOOH advertising. It updates automatically, creates urgency, and requires zero manual maintenance once set up. This guide walks through creating a countdown billboard from scratch in Lucit.

---

Prerequisites

Before starting this guide, you should have:

• A Lucit account with access to the Template Designer
• At least one creative approved and a campaign attached to live screens
• Basic familiarity with the Template Designer canvas (see Template Designer Navigation Guide)

---

What You'll Build

A countdown creative that: 1. Automatically calculates and displays the days (and optionally hours/minutes) until a target date 2. Updates every time the creative renders — no manual intervention needed 3. Switches to a different message when the countdown reaches zero 4. Handles timezones correctly so each screen counts down to midnight in its local timezone

---

Step 1: Create or Open a Template

1. In Lucit, go to Templates in the left navigation
2. Click + New Template (or open an existing one you want to add the countdown to)
3. Choose your dimensions (standard digital billboard: 1920×576, 1280×384, or your operator's specified size)
4. Design your base creative: brand colors, logo, product image, and a prominent Text element where the countdown will appear

Give your countdown text element a unique ID — for example: countdown-display

---

Step 2: Add the Countdown JavaScript

1. On the Canvas, click the <> icon in the Action Bar at the bottom of the screen
2. In the Code Editor dialog, click the JS tab
3. Paste the following countdown function into the JS tab:

registerDesignerFunction('getCountdown', function(params, data) {
  // =====================================================
  // CONFIGURATION — Edit these values for your campaign
  // =====================================================

  // Target date/time (local time of the event)
  // Format: 'YYYY-MM-DDTHH:MM:SS'
  var TARGET_DATE_STR = '2025-12-25T00:00:00';

  // What to show when the countdown is over
  var EXPIRED_MESSAGE = 'Merry Christmas!';

  // Format: 'days' | 'days-hours' | 'days-hours-minutes'
  var DISPLAY_FORMAT = 'days';

  // =====================================================
  // COUNTDOWN LOGIC — No edits needed below this line
  // =====================================================

  var now = new Date();
  var target = new Date(TARGET_DATE_STR);
  var diff = target - now;

  if (diff <= 0) {
    return EXPIRED_MESSAGE;
  }

  var totalSeconds = Math.floor(diff / 1000);
  var days = Math.floor(totalSeconds / 86400);
  var hours = Math.floor((totalSeconds % 86400) / 3600);
  var minutes = Math.floor((totalSeconds % 3600) / 60);

  if (DISPLAY_FORMAT === 'days') {
    if (days === 0) {
      return 'Today!';
    } else if (days === 1) {
      return '1 Day Away';
    } else {
      return days + ' Days Away';
    }
  }

  if (DISPLAY_FORMAT === 'days-hours') {
    if (days === 0 && hours === 0) {
      return 'Any minute now!';
    } else if (days === 0) {
      return hours + ' Hours Away';
    } else {
      return days + 'd ' + hours + 'h Away';
    }
  }

  if (DISPLAY_FORMAT === 'days-hours-minutes') {
    if (days === 0 && hours === 0 && minutes === 0) {
      return 'Right Now!';
    } else if (days === 0 && hours === 0) {
      return minutes + ' Minutes Away';
    } else if (days === 0) {
      return hours + 'h ' + minutes + 'm Away';
    } else {
      return days + 'd ' + hours + 'h ' + minutes + 'm Away';
    }
  }

  return days + ' Days Away';
});

1. Click Save in the Code Editor

---

Step 3: Connect the Function to Your Text Element

1. Select the Text element where the countdown should appear on the canvas
2. In the right panel, look for Value or Custom Field
3. Under the Custom Field selector, choose getCountdown from the dropdown (this is the function you just registered)
4. The preview should now show the live countdown output based on your TARGET_DATE_STR

---

Step 4: Customize for Your Campaign

Edit the three configuration values at the top of the function:

Variable	Description	Example
TARGET_DATE_STR	The target date and time	'2025-02-09T18:30:00' (Super Bowl kickoff)
EXPIRED_MESSAGE	What to show after the countdown ends	'Game Day is HERE!'
DISPLAY_FORMAT	How much detail to show	'days', 'days-hours', 'days-hours-minutes'

---

Step 5: Timezone Considerations

The new Date('YYYY-MM-DDTHH:MM:SS') format in JavaScript uses the browser's local system timezone. Since Lucit renders creatives on the screen's hardware, the countdown will respect the screen's local timezone — which is typically what you want.

For events with a single fixed time nationwide (e.g., a TV broadcast at 6:30 PM ET):

Use UTC-converted time in the ISO 8601 format with timezone offset:

// Super Bowl 2025 kickoff: Feb 9, 2025 at 6:30 PM Eastern (23:30 UTC)
var TARGET_DATE_STR = '2025-02-09T23:30:00Z';  // Z = UTC

This ensures all screens across all timezones count down to the exact same moment.

For events that are time-zone-local (e.g., "our store opens at 8 AM tomorrow"):

Use the local time string without a timezone suffix — each screen's local timezone handles the conversion:

// Counts down to midnight local time on Christmas Day for each screen's timezone
var TARGET_DATE_STR = '2025-12-25T00:00:00';  // no Z = local timezone

---

Step 6: Multi-Phase Countdown (Optional)

For campaigns that need to step through multiple phases (e.g., countdown → "Today!" → "Happening Now" → "Thank You"), extend the logic:

registerDesignerFunction('getCountdownPhase', function(params, data) {
  var TARGET_DATE_STR = '2025-12-25T00:00:00';
  var EVENT_END_STR = '2025-12-25T23:59:59';

  var now = new Date();
  var target = new Date(TARGET_DATE_STR);
  var eventEnd = new Date(EVENT_END_STR);
  var diff = target - now;

  // Phase 3: After the event is completely over
  if (now > eventEnd) {
    return 'Thank you for celebrating with us!';
  }

  // Phase 2: Event day (countdown is 0, event is ongoing)
  if (diff <= 0) {
    return "It's Christmas Day! Happy Holidays!";
  }

  // Phase 1: Pre-event countdown
  var days = Math.floor(diff / 86400000);
  if (days === 0) {
    return 'Today is the Day!';
  } else if (days === 1) {
    return '1 Day to Go';
  } else {
    return days + ' Days to Go';
  }
});

---

Common Countdown Scenarios

Campaign	TARGET_DATE_STR	EXPIRED_MESSAGE
Christmas	'2025-12-25T00:00:00'	'Merry Christmas!'
New Year's Eve	'2026-01-01T00:00:00'	'Happy New Year!'
Super Bowl kickoff	'2026-02-08T23:30:00Z' (UTC)	'Game On!'
Product launch	'2025-09-15T09:00:00'	'Available Now'
Store opening	'2025-06-01T08:00:00'	'We\'re Open!'
Season opener	'2025-04-01T13:05:00'	'Play Ball!'

---

Related Guides

• Day & Night Time-of-Day Creatives — Combine with countdown for time-segmented creative
• JavaScript Guide — Full reference for all function types
• Holiday Season Campaigns — Countdown use cases
• Race Day Campaigns — Season countdown ideas