Countdown Timer

Props

• None

Route Params

• webinarRegistrationId: The unique identifier for the webinar registration. Must be present in the page URL as a query parameter.

Component Attributes

• data-cc-component="timer" – Initializes the component.
• data-cc-component-target-date-time="2025-08-21T16:30:00Z" – A specific time to count down to.
• data-cc-component-repeatable-times="[ { "day": "Sunday", "hour": 16 }, { "day": "Thursday", "hour": 14, "minute": 30 } ]" – A list of weekly day/time pairs; the timer will always count down to the soonest one.

Custom Behavior

• Priority order for determining target date.
  
  • targetDateTime data attribute (if valid ISO date string)
  • repeatableTimes data attribute (if valid JSON array)
  • webinarRegistrationId from URL (fetches start time from API)
  • Defaults to midnight
• Validation: Validates all inputs and logs errors for invalid data
• Updates: Dynamically updates every second with precise timing
• Behavior: Stops at 00:00:00:00 once target is reached (no negative values)
• Tracking: Tracks timer view as page interaction

‍

1. Copy the Countdown Timer component from your base project.
2. Paste it where you'd like the countdown to appear.
3. Ensure the wrapper element includes:
   • data-cc-component="timer"
   ‍
4. Make sure the page URL includes or component props has one of the following:
   • ?webinarRegistrationId=some-id (or equivalent if adapted)
   • a targetDatetime value
   • a repeatableTimes array
5. Publish and test.

‍

1. Add a div block to your Webflow layout.
2. Add this custom attribute:
   • data-cc-component="timer"
   ‍
3. Ensure your global config includes:
   • A valid brandApiDomain
   ‍
4. Make sure the page URL contains a valid identifier (e.g., webinarRegistrationId) for fetching data or one of the available props.
5. Publish and verify the countdown initializes.

The timer is fully styled in Webflow.