Pro Countdown

Add countdown timers with a personalized countdown end time for each new visitor that lands on the page. Set up the countdown with dynamic data, and sync with either the Modal or Notifications elements, ideal for creating little popups/notices that have a set timer based on the user’s first visit to the site. Options for both evergreen countdowns, and countdowns with specific time/dates based on dynamic data.

Update – The countdown element now supports fixed end dates with the ability to use dynamic data for the end date / time.

The format for the endtime is 2024-02-18 00:00:00

If using ACF for the time date picker, make sure to select the correct return format.

Fields

Type – Each field can either be adding days, hours minutes or seconds.

Value – The number to add in the timer for that field (can be added via dynamic data)

Format – Similar to Bricks’ native countdown timer, you can change the format including the text for each field.

Action

What action to take when the countdown reaches zero. Either when the user is on the page to see it happen, or returns after it has already hit zero.

Hide – The element was output nothing.

Countdown – Display the countdown, just showing zero values.

Custom text – Replace the countdown with some text to show.

Redirect – Will redirect the user to the given URL.

Auto-close Modal/Notification – If the countdown is inside a Model element or Header Notification, this option it is closed when the counter reaches zero. (make sure to set the modal or header notification reshow to ‘Only show if evergreen countdown hasn’t ended’ to make sure if the user returns after the countdown, it isn’t shown again).

Direction

The individual items inside the counter can be displayed horizontally or vertically.

Items

Each field is a separate item and can be styled. The direction can be changed to have the text below or to the side of the number, and then your standard style controls.

Separator

In between each item there is a separator. The default value is a colon. This can be changed, customised or completely removed.

Notes on accessibility..

– By default the element has the attributes role=”timer” & aria-atomic=”true”

This element adds a new trigger to Bricks’ interactions options, so you can trigger actions based on the state of the element.

Triggers

Countdown End – Triggers at the moment the countdown reaches zero. And also if the user returns to the page after the countdown has ended.

Options

Delay – How long to wait after the event until the chosen action takes place .

This content is restricted to BricksExtras users. Login if you already have an account.