Countdown Ticker

This plugin is super handy if you want to have a timer built into your Ceros experience. It allows users to display a count down (or up) clock set to whatever you’re counting down, or up, to. NYE? Birthday celebration? Product launch? Seriously, anything.

How we did it

We loop through all the text components in the Ceros experience that have the relevant tag applied. Then, with a little help from Moment.js, we updated their contents every second with the amount of time between now and the time set in the custom HTML. We use the SDK payload of the text component to control how the time is formatted in it.

How to implement

1. Add the Custom HTML

Paste the following code into the “Custom HTML” field of your Ceros experience. You can find this under the Settings panel in the top right corner.

2. Update Attribute

• Update the data-countdown-datetime attribute in the custom HTML above to follow the ISO 8601 format. Ensure you are using the appropriate UTC time offset for your time zone.
• The above HTML, for example, will count down to New Years Day, 2018 in the Eastern Time Zone (UTC -05:00).
• If you would like to count up from a date and time in the past, add the following attribute data-countdown-mode="COUNT-UP" immediately after the the-final-count-down.min.js?v=1" in the custom HTML.

3. Create Text Boxes

• Create a Text Box for each unit of the counter you wish to display. Typically this will involve creating a heading and a textbox with placeholder numbers for the specific time denotation – e.g. years, weeks, days, hours, minutes and so on.
• Tag each of the Text Boxes created in the above step with count-down.
• Note: The Countdown will NOT work if the Text Boxes are in a Group.  The Text Boxes can be on their own in the Layers panel, or within a folder.

4. Set Payload

• Set the payload of each textbox in your design to the coordinating value below (including capitalisation). The plugin will recalculate based on the units you’ve selected to show (e.g. for 13 months – if YEAR is included it can display 1 year and 1 month, or if only MONTH is included it will display 13 months.)

  • CENTURIES
  • DECADES
  • YEARS
  • MONTHS
  • DAYS
  • HOURS
  • MINUTES
  • SECONDS
• Refresh the preview link for your experiences to see your changes.

5. Test

Open the preview link and test.