Setup a timer

The timer widget counts down to a given time. Once the countdown reaches 0, a given message is presented, or the counter starts counting up, showing as a negative time.

Stream Utils provides a convenient timer setup form to configure a timer. These are the fields you'll find on the form:

Look & feel of your timer

These fields specify how your timer should look

Field	Description
Prefix	Shown to the left of the countdown, can be left blank. Make sure to end with a space if you want a whitespace between the prefix and the timer.
Format	The time format used to present your timer.
When done	Text shown after the timer reaches 0. If you want your timer to continue counting up, leave blank.
Layout	Select a layout you want to use. Leave blank if you want to create your own layout in your recording software. (See below)

Set an absolute timer

This field set a specific point in time to countdown to

Field	Description
Countdown to	A datepicker to set the actual date to countdown to. The time is considered to be given in your local timezone.

Set a relative timer

These fields allow you to set a countdown relative to the current time, or relative to the set absolute timer.

Field	Description
Set relative time	Enter a number in the first field and select a time unit (seconds, minutes, hours, days) in the second
From now	Click this button if you want to set a timer relative to your current local time. eg. If your current time would be first of january 2020 at noon, and you entered 1 hour, your timer would count down to first of janary 2020, 1PM.
From current	Click this burron if you want to change your current timer with the values entered in the fields described above. eg. If you are currently counting down to december 25th 2020 at 11PM, and you entered 30 minutes, your timer would now count down to 25th of janary 2020, 11:30PM.

Link

This section offers a convenient way to copy your timer link, so you can paste it in your favourite streaming/recording software. It also provides a preview of your timer which changes as you change values in the form above it.

The pre-made layouts allow you to quickly integrate a timer in your video content without the need of further customization. However, if you'd rather design your own layout, to better fit the overall look and feel of your channel, you can also ommit the pre-designed layouts by selecting "None". In that case, provided your streaming software allows you to edit the CSS for the browser source, you can add custom styling as shown below.

/* Root element, container of the timer element */
.container {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}

/* The time element itself, receive the actual remaining time */
.timer {
  font-family: 'felix clean';
  border-radius: 25px;
  background-image: linear-gradient(to bottom, #ffff00, #00ffff);
  padding: 0px 30px 70px 20px;
  font-style: normal;
  font-size: 82px;
  color: black;
  padding: 0 30 0 20;
  word-spacing: -20px;
  line-height: 0.8em;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

/* If the timer element is empty hide it (makes sure the background dissapears) */
.timer:empty {
  display: none;
}

.split {
  display: none;
}

With the CSS configured like the one above, you timer will look like this:

Timer example

The timer widget actually uses to approaches to present itself: a text formated one, as the one shown above and a more finegrained "per time unit" one, as the one shown below.

@import url('https://fonts.googleapis.com/css?family=Bangers');

.timer {
  display: none;
}

.container {
  font-family: 'Bangers';
}

.split {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
}

.split * {
  width: 120px;
  text-align: center;
  background-color: rgb(35, 133, 128);
  color: white;
  margin: 0 2px;
}

.split *:nth-child(odd) {
  order: 1;
  padding: 25px 0;
  font-size: 32px;
  text-shadow: 4px 4px 5px black;
}

.split *:nth-child(even) {
  order: 2;
  padding-bottom: 25px;
}

The CSS above is exactly the same as the one used in the out-of-the-box provided "Cards" layout.

Elgato Streamdeck integration

We also provide an elgato streamdeck plugin that enables you to configure a timer in the stream deck software. It provides 3 actions:

Set a timer that counts down to a fixed moment in time (Setup fixed timer), much like the "setup an absolute timer".
Set a timer that counts down to a relative moment from the current time (Setup timer from now), much like the "setup a relative timer", clicking the from now button
Add or subtract time from the currently running timer (Add/Remove time), much like the "setup a relative timer", clicking the from current button

The plugin will ask you to enter your timer url, which is shown in the "Link" section on the timer setup. You can download the plugin here, just open the downloaded file, the stream deck application will then ask you if you want to install it.