Skip to main content

How do I Add and Configure Countdown Timer for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Countdown Timer on a Webpage

Overview

The Countdown Timer component allows users to display a live countdown on event webpages, showing the remaining time in days, hours, minutes, and seconds. It is commonly used to highlight important milestones such as the event start time or registration deadlines. This article explains how users can add and configure the Countdown Timer component on a webpage using the Web Builder.

Step-by-Step Approach

1. Access the Web Builder

  • On the Event dashboard, navigate to the Content module.
  • Select the Pages submenu.
  • Open the required webpage in edit mode.

2. Add the Countdown Timer Component

  • From the component panel, locate Countdown Timer.
  • Drag and drop the Countdown Timer component onto the desired section of the webpage.

3. Enter or Edit the Component ID

  • Select the Countdown Timer component.
  • In the component settings panel, enter or edit the ID field.
  • The ID can be used for navigation, styling, or tracking purposes.

4. Enter or Edit the Title

  • In the Title field, enter or update the title displayed with the Countdown Timer.

5. Select a Dependency

  • From the Dependency select field, choose a dependency if required.
  • The Countdown Timer visibility updates based on the selected dependency conditions.

6. Select Section Version Type

  • From the Section Version Type select field, choose the appropriate version.
  • This controls which version of the Countdown Timer is displayed.

7. Edit Days Value and Label

  • Edit the days value and days label directly in the Web Builder.
  • Use the available styling and formatting options to adjust appearance.

8. Edit Hours Value and Label

  • Edit the hours value and hours label using the Web Builder.
  • Apply available styling and formatting options as required.

9. Edit Minutes Value and Label

  • Edit the minutes value and minutes label directly in the Web Builder.
  • Adjust formatting to match the webpage design.

10. Edit Seconds Value and Label

  • Edit the seconds value and seconds label directly in the Web Builder.
  • Apply styling and formatting options as needed.

11. Edit Combined Time Values and Labels

  • Edit the values and labels for days, hours, minutes, and seconds together if required.
  • Use the available styling and formatting options to ensure consistency.

12. Select Merge Tags

  • From the Merge Tags select field, choose the required merge tags.
  • Merge tags dynamically display event-related or time-based data within the Countdown Timer.

13. Manage the Countdown Timer Component

  • Reposition the Countdown Timer component using drag-and-drop within the page layout.
  • Remove the Countdown Timer component if it is no longer required.

14. Save and Apply Changes

  • Publish the webpage to apply the configured Countdown Timer settings.
  • Preview the webpage to validate the Countdown Timer display and behavior.

Related to

Related articles