Using the Countdown Widget in Composer 2 – ASP Knowledge Base

The Countdown Widget lets you create an eye-catching countdown to an important date or deadline on your website.

It can be used to build anticipation for your event, highlight registration or early-bird deadlines, promote ticket sales, or draw attention to any other time-sensitive milestone.

The upgraded Countdown Widget offers significantly more design flexibility than the previous version, with different layouts, shapes, colours, typography and background treatments available directly within ShowOff.

Adding a Countdown Widget

1. Add the widget

Navigate to the Page or Panel where you would like the countdown to appear.

Within the visual editor, select the Widget icon and choose Countdown.

Countdowns can be added within page content or Panels.

2. Choose your countdown date

Set the date and time that you would like the countdown to run towards.

The countdown will update automatically as the deadline approaches, so there is no need to manually maintain the numbers once it has been configured.

3. Choose the time format

You can control how much information is displayed in your countdown.

Available formats include:

Hours / Minutes / Seconds
Days / Hours / Minutes
Days / Hours / Minutes / Seconds
Months / Days / Hours

Days / Hours / Minutes is the default format.

Choosing a Countdown Layout

The Countdown Widget gives you control over how the countdown is presented.

Inline

The Inline layout displays the countdown as a single horizontal group, with each number accompanied by its corresponding text label.

This works particularly well when you want a simple countdown that fits naturally alongside other page content.

The surrounding container can still be customised with backgrounds, borders and rounded corners.

Boxed

The Boxed layout gives you more visual styling options and can be used to make the countdown a stronger feature on the page.

Depending on the style selected, the countdown can display:

Each unit within its own individual box
The complete countdown within a grouped box
An unboxed presentation

Individual boxes can use square, circle or lozenge shapes.

Grouped layouts use a rectangular container, which can be increasingly rounded to create a pill-style appearance.

The Countdown Widget has been designed to work across desktop and mobile layouts.

Customising the Numbers

The Digits settings control the countdown numbers themselves.

You can customise:

Font family
Font size
Colour fill
Colour outline
Gradient
Number format
Bold styling

Colours can use your existing website palette or, where available, a custom colour.

This gives you the flexibility to make the countdown blend into your existing design or become a much stronger visual feature.

Customising the Labels

The text beneath or alongside the numbers — such as Days, Hours, Minutes and Seconds — can be customised separately from the digits.

You can control:

Whether text labels are displayed
Whether abbreviated labels are used
Font family
Font size
Colour
Uppercase styling
Bold styling

For example, you could use large, prominent numbers with smaller supporting labels.

Adding Separators

For supported layouts, you can display a separator between each part of the countdown.

Available separator styles include:

Colon :
Dash -
Slash /
Line |
None

The separator can also have its own font, size, colour and bold setting.

Separators are available for Inline and Grouped Box layouts. They are not used when each countdown unit is displayed inside an individual box.

Styling Boxed Countdowns

Boxed countdowns include additional controls for the container surrounding the countdown.

Background

You can choose from:

Solid colour
Gradient
Blur / Frosted Glass

Solid and gradient backgrounds can use your existing website colours or custom colours.

The Frosted Glass option creates a translucent effect and includes different blur strengths and light or dark background treatments.

Frosted Glass can also be used with circular countdown blocks.

Borders and corners

Where supported by the selected shape, you can also configure:

Border colour
Border thickness
Corner radius

Increasing the corner radius on a rectangular grouped countdown can be used to create a pill-style appearance.

Positioning the Countdown

For Boxed countdowns, the widget can be aligned:

Left
Centre
Right

Centre is the default.

Inline countdowns follow their inline layout and therefore do not use this positioning setting.

Using a Countdown in a Panel

Countdowns can also be placed within Panels, making them useful for highly visible event deadlines and promotional messages.

If you are using a dedicated Countdown Panel, Composer 2 also allows the panel to be fixed to the bottom of the browser so that it remains visible while visitors move through the website.

To configure this:

Navigate to Settings
Select Design and Appearances
Open Sections
Select Countdown
Enable Make the countdown fixed to the bottom?
Save your changes

For temporary campaigns, you can also use the Panel’s Publishing Options to automatically stop displaying the Panel after a particular date.

Tips for a Great Countdown

Countdowns work particularly well for:

Event opening dates
Registration deadlines
Early-bird pricing deadlines
Ticket sales
Calls for papers
Launches and announcements
Other time-sensitive event milestones

Keep any surrounding message short and clear, and make sure your chosen colours provide enough contrast for the countdown to remain easy to read.

With the expanded styling options, it can be tempting to use several effects at once. In most cases, a clear layout, strong typography and one distinctive background treatment will produce the best result.

Always preview your countdown across desktop and mobile before publishing, particularly when using larger text, individual shapes or a fixed Countdown Panel.