Flip Clock Countdown gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

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.

The countdown gadget showing 20s left until a Christmas event.

Sections in this article:  

Considerations and caveats

Time zones

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). 

Placement

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.

Set up

Follow these steps to set up this gadget:

  1. Place an  Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. While the widget can be placed anywhere on a page, for the best experience, place it in a side column.
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select Igloo Gadget Depot.
  4. Select the Flip Clock Coundown gadget from the library.
  5. Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  7. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Options tab

Setting Description
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 select  Translation and enter a description for each supported language. 

General options
Setting Description
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...

Message options
Setting Description

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, 2021/12/24 23:59:00.

Clock options
Setting Description
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.

Animation options
Setting Description
Countdown timer

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.

Advanced clock options

Appearance tab

Note:

Your digital workplace's theme overwrites many of the settings on this tab. However, the settings listed below are usable.

Appearance options
Setting Description
Class

 Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets.
Height

 Select the height of the widget.

The default value is Auto (leftmost slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px.

Selecting a Height other than Auto will add a vertical scrollbar to the gadget.

Using it

Once set up, the clock will begin ticking down to the configured time. There are no additional ways to interact with the clock.