AllDesignWidgetsCountdown Widget

Countdown Widget

Add countdown timers with actions and style variants.

Use the Countdown widget to show countdown timers for launches and deadlines.

Add a Countdown widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Countdown

In Content, drag Countdown (calendar icon) onto the page.

3

Open Countdown Settings

Click the widget and choose Countdown Settings.

Countdown Settings

The dialog has three tabs: Countdown, Actions, and Style.

Countdown tab

  • Countdown Type: Count to Date or Count to Time
  • Target Date & Time for date countdowns
  • Hours, Minutes, Seconds for duration countdowns
  • Show Days, Show Hours, Show Minutes, Show Seconds
  • Alignment

Actions tab

  • When Timer Ends: Do Nothing, Redirect to Link, Show Message
  • Redirect URL (when redirecting)
  • End Message (when showing a message)
  • Reset on each page view (duration countdowns)

Style tab

  • Size
  • Style: Flip, Boxed, Simple
  • Labels below
  • Background Color, Text Color, Label Color, Accent Color
  • Border Radius and Shadow

Toolbar actions

  • Countdown Settings
  • Alignment
  • Animation
  • Copy
  • Delete
Updated Jan 7, 2026

Was this helpful?