In this guide:
About the Plugin
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.
Click here to import Demo Experience
Click here to view a recorded webinar that overviews this plugin!
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
Step 1: Add the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Ceros Studio. Press OK to finish and close the panel.
<script id="ceros-countdown-clock" data-countdown-datetime="3000-01-01T00:00:00-05:00" src="//labs.ceros.com/sdk-plugins/the-final-count-down/the-final-count-down.min.js?v=2"></script>
Step 2: Update Attribute
• Update the data-countdown-datetime attribute in the custom HTML 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 Year's Day, 3000 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=2" in the custom HTML. When using the count-up version of this plugin, please be sure to change the data-countdown-datetime attribute to a date in the past.
Step 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.
• While selecting each of your counter text boxes, open the SDK Panel. In the Enter Tag field beneath the SDK ID, enter the tag count-down. Press Enter/Return on your keyboard to finish adding the tag.
Step 4: Set Payload
Continuing within the SDK Panel, set the payload (the second Enter Payload field) of each text box in your design to the coordinating value below (including capitalization). 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
Your text boxes should look like this in the SDK Panel after adding the count-down tag and the appropriate payload: