World Clock Widget User Guide 1.2.0

The Worlds Clock Widget is included in the EdgePack for Igloo

 

Current Version: 1.2.0

About the World Clock Widget

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.

Key features:

  1. Create up to 6 different World Clock Time Zones

  2. Choose Analog or Digital Displays

  3. Change the Layout and Appearance of text and display

  4. Add a Location Name for each Clock

 

 

Setup and Configuration

  1. Add the Widget

To start, Add the Integration Widget to your page: 

  1. Edit Page

  2. Scroll through the Add Widgets to locate the “Integrations” widget (pictured below) 

  1. 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”

  1. In the Integration Library dropdown Select Igloo Marketplace Library (Igloo Integration Library) 

  2. Select, Social Edge World Clock Widget



  1. Proceed to Section 2. Configuring the World Clock Widget below

  1. Configuring the Widget



Click “Edit” in the widget black bar (pictured below) 

  1. Add the “Title” to be displayed above the widget
    NOTE:  Click Translations to add a French Translation for the Title (optional).

  2. Add a “Title Link” 

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

  1. 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 Classic

Analog Sports Watch

Analog Shadow

Digital Classic Inline



Digital Seconds Displayed

Digital Classic

  1. 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/

  1. 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” 

  1. Border - Enable a border around the clock. Simply check off the enable box to create a border, as pictured below

  1. Border Color - changes the color of the clock's second hand

  1. Add up to 6 World Clock Time Zones (“ex. GMT-5 US/Eastern, GMT+3 Europe/Kiev ”). An example is pictured below.  

  1. Add a Display Name for the city/country

  2. Add the color of the text of in a hex #. Find numbers easily here: https://www.color-hex.com/

Digital Display Settings

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



Best Practice/Tip

How To…

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: 



https://www.color-hex.com/



Find the color that you want and then copy it and paste it in the color box listed under that specific world clock. 



Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeconsulting.com