Your business’s contact information should always be accessible from your website. But not every business operates 24/7, and you won’t always have someone ready to answer the phone.

So why display your phone number prominently when your office isn’t even open?

If the business is open, show their phone number

That’s why BONE Creative uses code that checks the current time and day. If the business is open, we display the phone number. And if it’s closed, we display an email call to action!

Simple tricks like this can increase your website’s ability to sell to a worldwide market.

How do you do it?

Before we compressed sites with WP Rocket (see article), we programmed our time code in PHP. We first defined the timezone of the website in our WordPress header.

<?php
/* wp_head(); */
date_default_timezone_set('America/Los_Angeles');
$current_time_date = getdate();
$currently_in_business_hours = false;
?>

Then we followed it with a simple conditional that checks the time and day and displays the correct content:

<?php if ($current_time_date['hours'] >= 9 && $current_time_date['hours'] < 17 && $current_time_date['wday'] != 0 && $current_time_date['wday'] != 6): ?>

<a href="tel:000-000-0000">000 000 0000</a>

<?php else: ?>

<a href="mailto:info@yourdomain.com">Email Us!</a>

<?php endif; ?>

This works great. But if the website is cached, the conditional statement can’t function correctly. The conditional will fire each time the website is cached (usually once a day) and not when your visitors access the website.

To solve our caching issue, we opted for Javascript.

With Javascript (and the jQuery library) the web page can be fully cached, and still dynamically show information. Our code is based on the business’s timezone and operating hours.

// **************************************************************
//
// Allows you to show or hide information, such as phone or email
// depending on whether or not the business is open at the current time
//
// Requires: jQuery
//
// Example Usage:
/*
Bone.toggleContactByHour({
// Hide this when the business is closed
objectToHideWhenClosed: $('#phone'),
// Show this when the business is closed
objectToShowWhenClosed: $('#email'),
// Target timezone (UTC/GMT of local business)
businessTimezone: -7,
// Hour that the business opens (24 hour clock)
openingHour: 8,
// Hour that the business closes (24 hour clock)
closingHour: 17,
// Days of the week the business is closed
// 0 = Sunday, 1 = Monday and so on
// Delete this option if they don't close any day of the week
closedDays: [0, 6]
});
*/
// **************************************************************

var Bone = Bone || {};

Bone.toggleContactByHour = function (settings) {

// If you don't have jQuery, stop!
if (!window.jQuery) {
return;
}

// Hide this when the business is closed
var objectToHideWhenClosed = settings.objectToHideWhenClosed || null;

// Show this when the business is closed
var objectToShowWhenClosed = settings.objectToShowWhenClosed || null;

// If either of these settings were left out, stop!
if (!objectToHideWhenClosed || !objectToShowWhenClosed) {
return;
}

// Target timezone (UTC/GMT of local business)
var businessTimezone = settings.businessTimezone || -7;

// Hour that the business opens (24 hour clock)
var openingHour = settings.openingHour || 8;

// Hour that the business closes (24 hour clock)
var closingHour = settings.closingHour || 17;

// Days of the week the business is closed
var closedDays = settings.closedDays || [];

// Get current date from local computer
var d = new Date();
var day = d.getDay();
var hour = d.getHours();

// Get local timezone (Difference between UTC/GMT and local time)
var localTimezone = -(d.getTimezoneOffset() / 60);

// Hour of the day in the business's timezone
var businessHour = hour - localTimezone + businessTimezone;

// Do things when the business is closed
var weAreClosed = function () {
objectToHideWhenClosed.hide();
objectToShowWhenClosed.show();
};

// Find out if we're closed by hour
if (businessHour > closingHour || businessHour < openingHour) {
weAreClosed();
} else {
// Find out if we're closed by day
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i]) {
weAreClosed();
}
}
}
};

Conclusion

Showing relevant content to your audience will always have a positive impact on the business’s bottom line. Give our Javascript time conditional a shot, and watch the results!