How to add a clock in StreamElements

In today's post, I am going to show you how to add a clock in StreamElements with some simple codes. Why StreamElements you may ask? That's because StreamElements doesn't have a simple widget like clock that you can easily add as compared to StreamLabs.

Codes??? "I don't know any coding!" But fear not as I would be providing you with the codes and all you need to do it just some simple copy and paste.

1. Prerequisites

Obviously you have the intention of using or is already using StreamElements.

2. Create a Blank Overlay

Navigate to My Overlays and Create Blank Overlay.

3. Add Custom Widget

Add a Custom Widget where you will need to paste in some codes into the HTML, CSS and Javascript section.

4. Open Editor

Open up Editor and let the fun begins.

5. Paste in the Codes

After the Editor opens, you will see a pop up window that looks like this.

Do not be intimidated by this if you did not know any such coding beforehand. Just know that there are 3 sections that you will need to overwrite the codes and that's all.

The codes in HTML, CSS and JS needs to be overwritten, simply copy and paste to overwrite all existing code in that section.

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<div id="time"></div>

CSS

#time {
  font-size: 24px;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  text-shadow:
   -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}

JS

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  m = checkTime(m);
  document.getElementById('time').innerHTML =
  h + ":" + m;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};
  return i;
}

startTime();

6. Click Done and that's it.

That's it. Simply copy the Overlay Link URL and use that in your OBS Studio or StreamLabs OBS.