Dynamic content by operating hours

Written by Nathan Bolton

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 } ?>

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

To solve our compression issue, we opted for Javascript.

With Javascript (and the jQuery library) the web page can be fully compressed, 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 &amp;gt; closingHour || businessHour &amp;lt; openingHour) {
        weAreClosed();
    } else {
        // Find out if we're closed by day
        for (var i = 0; i &amp;lt; 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!

Articles

Contact

Coffee’s on us!

Our team of designers and marketers ensure quality service by doing all our work in-house. Nothing gets lost in translation. We strive to keep clients through creativity, transparency, and great service!

Phone
250 984 BONE (2663)
BONE Creative
Studio 100 - 1600 Quadra St
Victoria BC Canada. (Map)
V8W 2L4
Email
info@bonecreative.com

Contact BONE Creative