Flip clock countdown gadget
The flip clock countdown gadget lets you keep users informed about an upcoming event and get people excited! This gadget counts down to a date and time you pick and shows a custom message and animation when the timer reaches zero. In addition to setting a countdown timer, you can also customize the messages it displays and hide sections of the timer. For example, you can hide the hours, minutes, and seconds if you only want to show how many days until an event.
Sections in this article:
Considerations and caveats
The end time is not time zone specific; this means that the timer will end simultaneously for everyone worldwide and will not adapt based on time zone. This means that if you set the timer to finish at 12 AM Eastern Time, a user in Melbourne, Australia, will see the timer end at the same time at 2 PM Australian Eastern Standard Time (AEST).
If you place this gadget in a narrow side column, you may need to hide some of its elements (e.g., the display of seconds) to keep them all on the same line.
Setting it up
You set up gadgets in a way similar to widgets (see, Placing and setting up a widget). However, instead of selecting a gadget directly from the widget carousel, select the Integrations widget. When editing the Integrations widget, select the Igloo Gadget Depot; then select the gadget you want to configure. For information about gadget-specific configuration options, refer to the options below.
- Title: Enter a title for the gadget. The title appears as a heading above the gadget's contents. You should use the title to give users an idea of why the gadget's content is important to them or highlight the content's purpose. Titles also serve to better structure the content of a page by clearly denoting different sections. When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select Translation and enter a title for each supported language.
- Title link: Enter the URL of a location in your digital workplace. Users who click the gadget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or absolute URL does not matter, it will convert to an absolute URL the next time you edit the gadget.
- Description: Enter a description for the gadget. The description appears between the title and the gadget's contents. You can use this text to provide additional context to the gadget or instructions for using the gadget. When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should selectTranslation and enter a description for each supported language.
- Time's Up Message: Enter a message to display when the timer ends. It will automatically display below the countdown when the timer reaches 0. If left blank, the gadget will display Countdown Complete.
- What are we counting down to?: Enter a message to display below the timer while it is counting down. If left blank, the gadget will display Counting down...
- End Date: Enter the date and time that the gadget counts down to. The time needs to be in 24 hour time, in the following format: YYYY/MM/DD HH:MM:SS. For example,
- Time's Up Animation: Select the animation that will display when the timer ends. Options include:
- Fireworks Exploding:
- Confetti Falling:
- Balloons Floating Up:
- Snow Falling:
- No Animation:
- Animation Intensity: If the default animations (Normal Intensity) are a little too flashy, you can change them to Low Intensity to tone it down. The fireworks animation is fixed and won't be affected by this field.
Advanced clock options
Select which parts of the countdown timer to display. Options include:
- Show Seconds
- Show Minutes
- Show Hours
- Show Days
To show a section, select Enable; to hide a section, deselect Enable. For example, if you want your timer to only show the days left until an event, deselect Show Hours, Show Minutes, and Show Seconds. Hiding a section does not impact how time is displayed in other sections (e.g., if a countdown is for an event in 2 days, hiding days does not result in hours initially displaying as 48). When hiding elements, you should begin with hiding seconds, then minutes, and then hours.
There are no layout options available for this gadget.
Use the Class field to add custom CSS to this gadget.
Your digital workplace's CSS theme overrides the other settings here, so these settings will not change the gadget's appearance.
Once set up, the clock will begin ticking down to the configured time. There are no additional ways to interact with the clock.