Time of Day Element
What is the Time of Day Element?
The Time of Day element displays the current time as a clock in your output. It’s perfect for showing attendees what time it is, displaying multiple time zones simultaneously, or keeping track of time during long events.
The element automatically updates every second and scales to fill the available space, making the time display as large and readable as possible.
How It Works
The Time of Day element is straightforward:
- Add the element to your output
- Configure the format (12-hour or 24-hour)
- Set the timezone if different from your output’s default
- The time displays and updates automatically
The clock continuously updates to show the current time. You don’t need to control anything from the Controller - it runs independently based on your configured settings.
Element Settings
Format Options
Choose how the time is displayed:
12-hour formats:
- HH:MM:SS AM - With seconds and AM/PM (2:30:45 PM)
- HH:MM AM - Without seconds, with AM/PM (2:30 PM)
- HH:MM:SS (12h) - With seconds, no AM/PM indicator (2:30:45)
- HH:MM (12h) - Without seconds, no AM/PM indicator (2:30)
24-hour formats:
- HH:MM:SS - With seconds (14:30:45)
- HH:MM - Without seconds (14:30)
Auto format:
- Auto - Automatically detects 12h/24h based on browser locale (default)
The format you choose affects how the time is displayed. Formats with seconds update more visibly, while formats without seconds provide a cleaner look for situations where second precision isn’t needed.
Font Selection
Choose the font family for the time display:
- Built-in fonts: IBM Plex Mono (default), Inter, Open Sans, Poppins, and many more
- Custom fonts: Upload your own fonts for brand-specific displays
- Monospace fonts (like IBM Plex Mono) are recommended for clean time display
Monospace fonts ensure that digits don’t shift position as the time updates, providing a more stable visual appearance.
Styling Options
Customize the visual appearance of the time:
Font weight:
- Light, Regular (default), Medium, Semibold, Bold
- Heavier weights are more readable at a distance
Font size:
- Small (76%) - Leaves more breathing room
- Medium (88%) - Balanced size (default)
- Large (100%) - Fills the maximum available space
Color:
- Any hex color value
- Default is white (#fff)
- Choose colors that contrast well with your background
The font size setting determines what percentage of the available space the time fills. Large (100%) makes the time as big as possible, while smaller sizes create space around the display.
Text Contrast
Add visual effects to improve time readability against backgrounds:
- None - No additional effects
- Shadow - Drop shadow behind the time
- Outline - Stroke outline around characters
- Background - Semi-transparent background behind time
These effects are particularly useful when displaying the time over video backgrounds or busy imagery where plain text might be difficult to read.
Timezone Settings
The Time of Day element provides flexible timezone handling:
Timezone selection:
- Room Default - Uses the timezone set in your output settings
- Override - Choose a different timezone for this specific element
- Search from hundreds of supported timezones
Timezone abbreviation:
- Show timezone abbreviation - Display timezone code after the time
- Examples: EST, PST, GMT, CET, JST
- Useful for international events or when displaying multiple time zones
Multiple timezone display: You can add multiple Time of Day elements to show different time zones simultaneously:
- One element for local time
- Another for attendee timezone
- A third for remote speaker timezone
- Each with its own timezone setting
