Countdown Clock

Our Countdown Clock widgets provide a great way to add some drama to an upcoming event. Choose from a standard text-based display, or a sleek circular display. No matter which way you go, you will find an extensive set of options for fonts, sizing, and color, as well as timing precision down to the second.

Demo: https://demo.wocode.com/countdown

Tutorial Video

Setup

  • This widget offers 2 separate widgets. Both can be found in the Widgets collection.
    • Countdown – Circle: This widget displays multiple numerical countdowns with customizable circle graphics
    • Countdown – Standard: This widget displays multiple numerical countdowns
  • Select a widget to use and drop it into your project.

Both widgets have similar options. Options for both widgets are explained below:

  • Unique ID: Creates a unique identifier to allow multiple instances of the widget.
  • Event Year/Month/Day/Time: These settings are self explanatory, and allow you to set the time details of your event.
  • Enable Weeks/Days/Hours/Minutes/Seconds Displays: These toggles enable the display of the named label.

TIPS:

  • If you plan to use multiple Countdown Clocks on the same page, be sure to use the “Unique ID” field to enter unique names for each widget
  • There is logic built into the widget that allows weeks and days to display in a logical way. Depending on what you choose to display (weeks, days, minutes, hours, seconds), the widget will recalculate the numbers based on what’s displayed. For example, if your event is 10 days away, if you have days enabled, it will display 10 days. But if you enable weeks in addition to days, it will display 1 week, 3 days.

WIDGET OPTIONS (DESIGN)

The design section offers several styling options for your countdown clock. These settings will not be discussed here, as they are self-explanatory, and do as they are named.