Availability Plugin

This was originally built for Armstrong Bank’s new website redesign. They requested a time & date/call center feature that detects when their service center is on & offline. The script works in combination with moment.js and moment-timezone-with-data.js to determine the time of the location, which should also automatically adjust for DST. This particular setup places the text “Available” or “Not Available” with a green or red dot next to it depending on the status.

It also works with the CMS header/footer section–that code, if un-commented, manually sets a class to one of the HTML elements. Then, the existing script (not in the CMS header/footer) sets the span to always be “Not Available”.

How To

Script

Plugin File

It makes the most sense to put this as its own file, inside the scripts > plugins folder, since there’s so much to it.

While you’re there, don’t forget to also add moment.js and moment-timezone-with-data.js to your plugins folder too!

// Call Center Availability
// Note: Requires moment.js AND moment-timezone-with-data.js to function, in order to detect if it's within DST.
// ==================================================================================================================================
function available() {
	// First, find the current time/date in Muskogee, OK (where this FI is located)
	var area = 'America/Chicago', // we know Muskoge, OK is in this timezone
		areaInfo = moment.tz(area),
		extra = areaInfo.format('YYYY-MM-DD') + ' ',
		currentTime = areaInfo,
	    // Determine if it's the weekend (Saturday or Sunday) from date info
	    dayOfWeek = areaInfo.day(),
	    isWeekend = dayOfWeek === 6 || dayOfWeek === 0,
	    // Set available hours
	    // ...on a weekday (Monday - Friday)
	    startWeekday = moment(extra + '07:00:00'),
	    endWeekday = moment(extra + '23:00:00'),
	    // ...on a weekend (Saturday - Sunday)
	    startWeekend = moment(extra + '09:00:00'),
	    endWeekend = moment(extra + '17:00:00'),
	    // Set the span for the availability attribute
	    statusSpace = $('.availability');

	function availableNow() {
		statusSpace.removeClass('not-available').addClass('available').text('Available Now');
	}
	function notAvailable() {
		statusSpace.removeClass('available').addClass('not-available').text('Not Available');
	}	
	

	if ($('.phone-question').hasClass('phone-manual')) {
		// Override available in the CMS
		console.log('manual override active');
		notAvailable();
	} else {
		// Set normal hours
		if (isWeekend === false) {
			// It's a weekday, so use the weekday hours of 7am - 11pm
			if(areaInfo.isBetween(startWeekday,endWeekday)) {
				availableNow();
			} else {
				notAvailable();
			}
		} else {
			// It's a weekend, so use the customer care hours of 9am - 5pm.
			console.log("stop working it's the weekend");
			if(areaInfo.isBetween(startWeekend,endWeekend)) {
				availableNow();
			} else {
				notAvailable();
			}
		}
	}
}

script.js

This goes in the scripts.js, basically needed because you can’t run the available function when the tooltip is hidden–so instead, run it as soon as the tooltip is open. May not be needed if your site has the availability plugin visible by default!

$('.question-space-wrapper .phone-question[data-toggle="tooltip"]').on('shown.bs.tooltip',function() {
  available();
});

Styles

This may be different for your site, but this was the setup for the available/unavailable green & red dots that Armstrong used.

.availability {
  font-style: italic;
  position: relative;
  &:after {
      content: '';
      height: 10px;
      width: 10px;
      border-radius: 50%;
      position: relative;
      display: inline-block;
      margin-left: 5px;
  }
  &.available:after {
      background-color: $green;
  }
  &.not-available:after {
      background-color: $red;
  }
}

HTML

Wherever you want the “Available/Not Available” text & icon/dot/whatever to show up, put this.

<span class="availability"></span>

CMS

Within the Settings > Footer Code section of the CMS, put this in its entirety. The comment includes instructions to the client for how to manually set the call center as unavailable (on holidays, etc.) so it should not be deleted.

<script type="text/javascript">
  // Availability Plugin - Remove the slashes in front of "document.addEventListener" to turn on manual offline. Put them back to return to automatic.
//document.addEventListener("DOMContentLoaded", function() {document.querySelector('.phone-question').classList.add('phone-manual');});
</script>

Example Sites

• Armstrong Bank (Click the question mark icon in the hero ad, then click the telephone icon to get a tooltip with the availability plugin inside it.)

Tags: plugin, script, js, javascript, jquery, bs4, html, cms