Countdown/V1

A countdown timer with configurable end date, time display options, and actions when the timer expires.

Basic Structure

JSON

{
  "type": "Countdown/V1",
  "id": "6Z-Count-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "type": "countdown",
    "countdown_opts": {
      "show_years": false,
      "show_months": false,
      "show_weeks": false,
      "show_days": true,
      "show_hours": true,
      "show_minutes": true,
      "show_seconds": true
    },
    "end_date": "2025-12-31",
    "end_time": "23:59:59",
    "timezone": "America/New_York",
    "countdown_id": "6Z-Count-0"
  }
}

Countdown Parameters

Parameter	Type	Description
`end_date`	string	Target date in YYYY-MM-DD format
`end_time`	string	Target time in HH:MM:SS format
`timezone`	string	Timezone (e.g., "America/New_York")
`timer_action`	string	Action when timer ends: "redirect_to", "hide"
`redirect_to`	string	URL to redirect when timer ends
`show_colons`	boolean	Show colons between time units
`countdown_opts`	object	Object controlling which units to display

Display Options

Control which time units are shown:

JSON

{
  "countdown_opts": {
    "show_years": false,
    "show_months": false,
    "show_weeks": false,
    "show_days": true,
    "show_hours": true,
    "show_minutes": true,
    "show_seconds": true
  },
  "countdownTexts": {
    "years": "Years",
    "months": "Months",
    "weeks": "Weeks",
    "days": "Days",
    "hours": "Hours",
    "minutes": "Minutes",
    "seconds": "Seconds"
  }
}

Timer Action

Set an action when the countdown reaches zero:

JSON

{
  "params": {
    "timer_action": "redirect_to",
    "redirect_to": "https://example.com/expired",
    "cookie_policy": "none",
    "expire_days": 0
  }
}

Styling

Customize the countdown appearance using selectors:

JSON

{
  "type": "Countdown/V1",
  "selectors": {
    ".elCountdownAmount": {
      "attrs": {
        "style": {
          "color": "#fff",
          "font-size": "28px",
          "font-family": "Inter",
          "font-weight": "700",
          "line-height": "100%"
        }
      }
    },
    ".elCountdownPeriod": {
      "attrs": {
        "style": {
          "text-transform": "uppercase",
          "color": "#164EAD",
          "font-size": "11px",
          "font-weight": "600"
        }
      }
    },
    ".elCountdownAmountContainer": {
      "attrs": {
        "data-skip-corners-settings": "false",
        "data-skip-shadow-settings": "false",
        "style": {
          "border-radius": "100px",
          "padding-top": "14px",
          "padding-bottom": "14px"
        }
      },
      "params": {
        "--style-background-color": "#1C65E1",
        "--style-padding-horizontal": "14px"
      }
    }
  }
}

Available Selectors

Selector	Purpose
`.elCountdownAmount`	The number display for each unit
`.elCountdownPeriod`	The label text (Days, Hours, etc.)
`.elCountdownAmountContainer`	Container around each number (background, corners)
`.elCountdownRow`	Row containing all countdown units
`.elCountdownColumn`	Individual column (number + label)
`.elCountdownGroupDate`	Group for date units (days, weeks, etc.)
`.elCountdownGroupTime`	Group for time units (hours, minutes, seconds)

Supported Features

Feature	Supported
Background	Yes
Border	Yes
Shadow	Yes
Corners	Yes