The Custom Widgets page is where you can create a custom widget using a TinyMCE Editor or you can create a more advanced custom widget using HTML, CSS, and/or JavaScript.

Important: Create your custom widget on Stage, if your plan has a Stage environment. Once you are satisfied the custom widget performs correctly, copy and paste the custom widget information into the Live environment.

For this guide, we are going to create a widget that counts down to an event date:

What We’ll Cover

Finding the Page
Getting Started
Defining the Container Box
Defining the Header
Adding a Title and Subtitle
Defining the Body
Defining the Clock Container and Styles
Defining the Time
Adding a Footer
Adding Logic
Defining a SetInterval function
Getting Today’s Date and Time
Finding the Distance Between Now and a Target Date
Calculating Time
Outing the Results
Defining an End State
Saving the Widget
Full HTML
Full CSS
Full JavaScript

Finding the Page

In Web Office Admin, navigate to: Code Customization > Custom Widgets.

https://[CLIENTID].admin.directscale.com/#/Widgets

Getting Started

Click + ADD WIDGET to open the New Widget pop-up window
Enter the Name for this custom widget.
Specify the Width for this custom widget (based on number of columns).

For this guide, we’re going to select Two Column.

This widget will contain three sections: a header, body, and footer all within a container box.

Defining the Container Box

HTML

In the editor, add a <div> and assign it the CSS class class="countdown-container".

<!-- Countdown Widget - HTML -->

<div class="countdown-container">

</div>

Now, under the CSS tab, add the class definitions.

CSS

/* Countdown Widget - CSS */

.countdown-container {
    background: #fff;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.12);
    box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: 10px;
}

Feel free to customize where you see fit.

Defining the Header

HTML

Within <div class="countdown-container">, add a <div> and assign it the CSS class class="countdown-header".

<div class="countdown-container">

    <div class="countdown-header">

    </div>

</div>

CSS

.countdown-header {
    display: block;
    min-height: 58px;
    padding: 16px 12px;
    position: relative;
    background-color: $color-primary;
}

Adding a Title and Subtitle

That header is going to need some text, so lets add the countdown title and subtitle.

HTML

Within <div class="countdown-header">, add a <div> and assign it the CSS class class="countdown-title".

Type your title within <div class="countdown-title"></div>


<div class="countdown-header">

    <div class="countdown-title">INTERNATIONAL CONVENTION</div>

</div>

For the subtitle, add an <h3> and assign it the CSS class class="countdown-subtitle".

Type your subtitle within <h3 class="countdown-subtitle"></h3>

    <div class="countdown-header">

        <div class="countdown-title">INTERNATIONAL CONVENTION</div>

        <h3 class="countdown-subtitle">Sep 8th-10th – Las Vegas, NV</h3>

    </div>

CSS

.countdown-title {
    color: #fff;
    font-size: 22px;
    text-align: center;
}

.countdown-subtitle {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

Defining the Body

Define the body that will appear under the header. The body will contain the countdown numbers.

HTML

Within <div class="countdown-header">, under <div class="countdown-header"></div>, add a <div> and assign it the CSS class class="countdown-body".

    <div class="countdown-header">
        <div class="countdown-title">INTERNATIONAL CONVENTION</div>
        <h3 class="countdown-subtitle">Sep 8th-10th – Las Vegas, NV</h3>
    </div>

    <div class="countdown-body">

    </div>

CSS

.countdown-body {
    background-color: $color-one;
    max-height: 100%;
    background-position: Left;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 200%;
    color: white;
    border-top: 1px solid white;
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding: 16px;
}

Defining the Clock Container and Styles

Next, define the clock container and styles.

HTML

Within <div class="countdown-body">, add a <div> and assign it the CSS class class="countdown-clock".

<div class="countdown-body">

    <div class="countdown-clock">

    </div>

</div>

CSS

.countdown-clock {
    font-family: sans-serif;
    font-weight: 100;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}

Defining the Time

Now we’ll define the days, hours, minutes, and seconds squares that will decrement towards the date you set.

HTML

Within <div class="countdown-clock">, add a <div></div> with no class. Within that <div>, add a <span></span> and assign it the ID id="days".

<div class="countdown-body">
    <div class="countdown-clock">

        <div>

            <span id="days"></span>

        </div>

    </div>
</div>

Under the <span id="days"></span>, add a <div></div> and assign it the class class="label-text".

Type Days within <div class="label-text"></div>

<div class="countdown-clock">
    <div>
        <span id="days"></span>

            <div class="label-text">Days</div>
    </div>

</div>

Repeat the above for Hours, Minutes, and Seconds.

<!-- Countdown Widget - HTML -->

<div class="countdown-container">
    <div class="countdown-header">
        <div class="countdown-title">INTERNATIONAL CONVENTION</div>
        <h3 class="countdown-subtitle">Sep 8th-10th – Las Vegas, NV</h3>
    </div>

    <div class="countdown-body">
        <div class="countdown-clock">
            <div>
                <span id="days"></span>
                <div class="label-text">Days</div>
            </div>

            <div>
                <span id="hours"></span>
                <div class="label-text">Hours</div>
            </div>

            <div>
                <span id="minutes"></span>
                <div class="label-text">Minutes</div>
            </div>

            <div>
                <span id="seconds"></span>
                <div class="label-text">Seconds</div>
            </div>

        </div>
    </div>
</div>

The id= in the above will be referenced in the JavaScript, so you’ll want to make sure there are no spelling or capitalization errors.

Finally, add <div id="clock-expired" style="display:none;">EXPIRED</div> under <div class="countdown-clock">EXPIRED</div>.

This is what will display when the countdown as finished.

<div class="countdown-body">
    <div class="countdown-clock">
        <div>
            <span id="days"></span>
            <div class="label-text">Days</div>
        </div>

        <div>
            <span id="hours"></span>
            <div class="label-text">Hours</div>
        </div>

        <div>
            <span id="minutes"></span>
            <div class="label-text">Minutes</div>
        </div>

        <div>
            <span id="seconds"></span>
            <div class="label-text">Seconds</div>
        </div>
    </div>
        
     <div id="clock-expired" style="display:none;">EXPIRED</div>

</div>

CSS

.countdown-clock > div{
    padding: 5px;
    border-radius: 3px;
    display: inline-block;
}
/*controls the size and color of the countdown squares*/
.countdown-clock div > span{
    width: 75px;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    border-radius: 3px;
    display: inline-block;
    background: $color-primary;
}

.label-text {
    padding-top: 5px;
    font-size: 12px;
}

#clock-expired{
    margin-top: 120px;
    text-align: center;
    font-size: 20px;
}

Next, we’ll add the footer link with an SVG arrow icon.

If you notice, on the pre-made widgets that come default with your system, the footers are all very consistently styled. For this step, we’re going to follow that same style to keep the consistency, but feel free to change the class names and make it your own.

HTML

Within <div class="countdown-container'>, under <div class="countdown-body">, add <a class="card-footer--link ng-scope" href="#" target="_blank"></a>

Delete the # in href="#" and add the URL to the site you want to link.

<!-- Countdown Widget - HTML -->

<div class="countdown-container">
    <div class="countdown-header"> ... </div>

    <div class="countdown-body"> ... </div>

    <a class="card-footer--link ng-scope" href="http://www.example.com/" target="_blank">

    </a>
</div>

Next, within the <a class="card-footer--link ng-scope" href="#" target="_blank"></a>, add the SVG arrow icon:

<svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>

<a class="card-footer--link ng-scope" href="#" target="_blank">

    <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
    </svg>

</a>

Under <svg></svg> add <span class="ng-scope"></span> and type your hyperlink text within.

<a class="card-footer--link ng-scope" href="#" target="_blank">
    <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
    </svg>

    <span class="ng-scope">Book Your Hotel Room!</span>

</a>

CSS

This step is using the system CSS. Any custom element you create in Web Office Admin can use the system CSS, as long as you know the class name.

Adding Logic

Now that the HTML and CSS are both defined, it’s time to add some logic to the countdown with JavaScript.

Click the JAVASCRIPT tab.

First, define a variable named countDownDate and set it equal to new Date().getTime;.

Add the date of your event within new Date(), like so: new Date("9/8/2020").

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

Defining a SetInterval function

Next, we’re going to define a function that updates the count for every one second.

Define a variable named x and set it equal to setInterval(function() {},1000);

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

}, 1000);

Getting Today’s Date and Time

Within setInterval(function() {}, get today’s date and time by defining a variable named now and setting it equal to new Date().getTime();

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

}, 1000);

Finding the Distance Between Now and a Target Date

Under var now = new Date().getTime();, find the distance between now and the target date by defining a variable named distance and setting it equal to countDownDate - now;

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and target date
    var distance = countDownDate - now;

}, 1000);

Calculating Time

Under var now = new Date().getTime();, let’s do some time calculations for days, hours, minutes, seconds by defining a variable each and setting them equal to Math.floor();.

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and target date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes, seconds
    var days = Math.floor();
    var hours = Math.floor();
    var minutes = Math.floor();
    var seconds = Math.floor();

}, 1000);

Enter the following calculations for each variable.

// Time calculations for days, hours, minutes, seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

Outing the Results

Under the time calculations, we’re going to output the results in our days, hours, minutes, and seconds IDs.

if(document.getElementById("days")){
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and target date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes, seconds
    var days = Math.floor();
    var hours = Math.floor();
    var minutes = Math.floor();
    var seconds = Math.floor();

    //Output the result in an element with id
    if(document.getElementById("days")){
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;
    }

}, 1000);

Defining an End State

Then, write a statement for when the count is over.

//If the count down is over,
if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "0";
    document.getElementById("hours").innerHTML = "0";
    document.getElementById("minutes").innerHTML = "0";
    document.getElementById("seconds").innerHTML = "0";
  }

//Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format

var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and target date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes, seconds
    var days = Math.floor();
    var hours = Math.floor();
    var minutes = Math.floor();
    var seconds = Math.floor();

    //Output the result in an element with id
    if(document.getElementById("days")){
        document.getElementById("days").innerHTML = days;
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;
    }

    //If the count down is over
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("days").innerHTML = "0";
        document.getElementById("hours").innerHTML = "0";
        document.getElementById("minutes").innerHTML = "0";
        document.getElementById("seconds").innerHTML = "0";
  }

}, 1000);

That’s it! You’re work is done and it’s time to add your widget to the Web Office.

But first, click the SAVE button.

Your widget is added to the Widgets List. You can edit the widget by clicking the Edit icon.

Edit icon

Full HTML

<div class="countdown-container">
    <div class="countdown-header">
        <div class="countdown-title">INTERNATIONAL CONVENTION</div>
        <h3 class="countdown-subtitle">Sep 8th-10th – Las Vegas, NV</h3>
  </div>
  <div class="countdown-body">
      <div class="countdown-clock">
        <div>
          <span id="days"></span>
          <div class="label-text">Days</div>
        </div>
        <div>
          <span id="hours"></span>
          <div class="label-text">Hours</div>
        </div>
        <div>
          <span id="minutes"></span>
          <div class="label-text">Minutes</div>
        </div>
        <div>
          <span id="seconds"></span>
          <div class="label-text">Seconds</div>
        </div>
      </div> 
      <div id="clock-expired" style="display:none;">EXPIRED</div>
    </div>
    <a class="card-footer--link ng-scope" href="#" target="_blank">
        <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
            <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
        </svg>
        <span class="ng-scope">Book Your Hotel Room!</span>
    </a>
</div>

Full CSS

/*Direct Scale - Countdown Widget - CSS*/
.countdown-container {
    background: #fff;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.12);
    box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: 10px;
}

.countdown-header {
    display: block;
    min-height: 58px;
    padding: 16px 12px;
    position: relative;
    background-color: $color-primary;
}

.countdown-title {
    color: #fff;
    font-size: 22px;
    text-align: center;
}

.countdown-subtitle {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.countdown-body {
    background-color: $color-one;
    max-height: 100%;
    background-position: Left;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 200%;
    color: white;
    border-top: 1px solid white;
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding: 16px;
}

.countdown-clock{
    font-family: sans-serif;
    font-weight: 100;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}

.countdown-clock > div{
    padding: 5px;
    border-radius: 3px;
    display: inline-block;
}
/*controls the size and color of the countdown squares*/
.countdown-clock div > span{
    width: 75px;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    border-radius: 3px;
    display: inline-block;
    background: $color-primary;
}

.label-text {
    padding-top: 5px;
    font-size: 12px;
}

#clock-expired{
    margin-top: 120px;
    text-align: center;
    font-size: 20px;
}

Full JavaScript

 //Custom Countdown Widget - JavaScript
// this controls the date we're counting down to; keep in this specific format
var countDownDate = new Date("9/8/2020").getTime;

// Update the count every 1 second
var x = setInterval(function() {
  // Get today's date and time
  var now = new Date().getTime();
  
  // Find the distance between now and target date
  var distance = countDownDate - now;
  
  // Time calculations for days, hours, minutes, seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  //Output the result in an element with id="clock"
  /*document.getElementById("clock").innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds ";*/
 if(document.getElementById("days")){
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;
  }
  //If the count down is over, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "0";
    document.getElementById("hours").innerHTML = "0";
    document.getElementById("minutes").innerHTML = "0";
    document.getElementById("seconds").innerHTML = "0";
  }
}, 1000);

Custom Widgets

Creating a Custom Countdown Web Office Widget

What We’ll Cover

Finding the Page

Getting Started

Defining the Container Box

HTML

CSS

Defining the Header

HTML

CSS

Adding a Title and Subtitle

HTML

CSS

Defining the Body

HTML

CSS

Defining the Clock Container and Styles

HTML

CSS

Defining the Time

HTML

CSS

Adding a Footer

HTML

CSS

Adding Logic

Defining a SetInterval function

Getting Today’s Date and Time

Finding the Distance Between Now and a Target Date

Calculating Time

Outing the Results

Defining an End State

Saving the Widget

Full HTML

Full CSS

Full JavaScript

Comments

Custom Widgets

What We’ll Cover

Finding the Page

Getting Started

Defining the Container Box

HTML

CSS

Defining the Header

HTML

CSS

Adding a Title and Subtitle

HTML

CSS

Defining the Body

HTML

CSS

Defining the Clock Container and Styles

HTML

CSS

Defining the Time

HTML

CSS

Adding a Footer

HTML

CSS

Adding Logic

Defining a SetInterval function

Getting Today’s Date and Time

Finding the Distance Between Now and a Target Date

Calculating Time

Outing the Results

Defining an End State

Saving the Widget

Full HTML

Full CSS

Full JavaScript

Related articles