The World Clock widget for Igloo is an easy-to-use custom widget that makes it effortless to schedule your appointments if you know what time it is. Users can create multiple different world clocks within different time zones.
Create up to 6 different World Clock Time Zones
Choose Analog or Digital Displays
Change the Layout and Appearance of text and display
Add a Location Name for each Clock
Setup and Configuration
Add the Widget
To start, Add the Integration Widget to your page:
Scroll through the Add Widgets to locate the “Integrations” widget (pictured below)
Click and Hold down your right mouse button and drag the “Integrations Icon” onto your page
NOTE: This widget is available in: Full width, Two-column wide, Three-column wide, Narrow column
Next, Add “Social Edge World Clock Widget”
In the Integration Library dropdown Select Igloo Marketplace Library (Igloo Integration Library)
Select, Social Edge World Clock Widget
Proceed to Section 2. Configuring the World Clock Widget below
Configuring the Widget
Click “Edit” in the widget black bar (pictured below)
Add the “Title” to be displayed above the widget NOTE: Click Translations to add a French Translation for the Title (optional).
Add a “Title Link”
Add a short “Description” NOTE: Descriptions do not display to the end user. NOTE: Click Translations to add a French Translation for the Description (optional).
NOTE: Buttons for Translations are surrounded by a yellow square.
Analog Display Settings
Select Clock Style: Choose a style of clock to display: Analog Classic, Analog Shadow, Analog Sports Display, Digital Classic, Digital Seconds Display, Digital Classic Inline. To view the other types of clock styles, simply click the dropdown arrow next to “Clock Style” as pictured below. (Clock Styles Pictured Below)
Analog Sports Watch
Digital Classic Inline
Digital Seconds Displayed
Analog Face Color- add the Color of the clock's face (this will be applied to all time zones selected. To get certain colors along with their codes use this link: https://www.color-hex.com/
Clock Elements Style - changes the clock hands, tick marks, and second hand to black or white. To change the element style, simply click the drop down arrow to the right of the word “Black”
Border - Enable a border around the clock. Simply check off the enable box to create a border, as pictured below
Border Color - changes the color of the clock's second hand
Add up to 6 World Clock Time Zones (“ex. GMT-5 US/Eastern, GMT+3 Europe/Kiev ”). An example is pictured below.
Users can choose to either display a clock with 24 hours or a clock with twelve hours. To access this option simply click on the dropdown arrow next to “Digital Options” as pictured below. To display 24 hours instead of the default 12 hours, simply click on the Enable box underneath this drop down menu.
To adjust the Font Style, click into the dropdown and choose from Roboto, IBM Plex Mono, Exo and Orbitron.
Best Practices and Tips
Add names to clocks to differentiate time zones.
Click on the drop down arrow for that specific clock and for Time Zone Display Name type the name of the time zone area (ex: New York Headquarters, London, Etc).
Clock Displays in Wide vs. Narrow Columns
In wider columns, clocks will display side by side for filtering. In narrow columns they will stack.
Customize Your Clocks with Different Colors
Using the different colors for your clocks will help to make your clocks stand out as well as fit in with the brand image. To get the hex codes needed for each color visit this website: