You can display your support hours on your Help Center by customizing the template. Here are two examples of how you could display your support hours on the Help Center.

Floating notice panel

This version gives you a pop up notice that only displays when outside of your support hours. It is fixed to it’s position on every page, the dismiss will allow visitors to close it for that session but it will reopen if they come back again later.

To apply this, go to. Admin > Help Center > Help Center Design, open the Template Editor and go to Internal > custom-header.html.

Paste the code below into your custom-header.html template; the code lives there but the panel is position: fixed, so it does not render in the header.

<div id="dp-offline" class="dp-po dp-offline" hidden>
  <svg class="dp-offline-icon" viewBox="0 0 28 28" fill="none" aria-hidden="true" focusable="false">
    <rect width="28" height="28" rx="4" fill="currentColor" fill-opacity=".1"/>
    <g opacity=".3" fill="currentColor">
      <path d="M15 4c.55 0 1 .45 1 1v.5h.5a1 1 0 1 1 0 2H16V8a1 1 0 1 1-2 0v-.5h-.5a1 1 0 1 1 0-2h.5V5c0-.55.45-1 1-1Z"/>
      <path d="M20.5 8c.55 0 1 .45 1 1v1.5H23a1 1 0 1 1 0 2h-1.5V14a1 1 0 1 1-2 0v-1.5H18a1 1 0 1 1 0-2h1.5V9c0-.55.45-1 1-1Z"/>
    </g>
    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
      d="M10.6317 6.29289c.2943.29426.3756.74.2041 1.11917A9.3 9.3 0 0 0 10.1849 10.4452c0 4.0703 3.2996 7.3699 7.3699 7.3699a9.3 9.3 0 0 0 3.0331-.6509c.3792-.1715.8249-.0902 1.1192.2041.2943.2942.3755.74.2041 1.1191C20.4419 21.7362 17.1713 24 13.3698 24 8.19502 24 4 19.805 4 14.6301c0-3.8014 2.26378-7.07204 5.51256-8.54126.37917-.17147.82494-.09021 1.11914.20415Z"/>
  </svg>

  <div class="dp-offline-body">
    <p class="dp-offline-head">Support is offline</p>
    <p class="dp-offline-when">
      It's currently outside of our working hours.
      Our team will be back online soon.
    </p>
    <a class="btn btn-primary" href="/new-ticket/">Open a new ticket</a>
  </div>

  <button type="button" class="dp-offline-x" aria-label="Dismiss this notice">&times;</button>
</div>

<style>
/* The panel carries .dp-po as well as its own class. That one word is what lets
   btn btn-primary above render as the theme's real button — colour, radius,
   padding, weight and hover all come from whatever is set in Colors and Fonts,
   with nothing here to keep in step. Outside .dp-po the class does nothing at all. */
.dp-offline, .dp-offline * { box-sizing: border-box; }

.dp-offline {
  position: fixed; left: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: flex-start; gap: 12px;
  width: 300px; max-width: calc(100vw - 36px);
  padding: 16px;
  font-family: var(--font-family-sans-serif, sans-serif);
  font-size: 14px; line-height: 1.45;
  background: #fff; color: #3f3c35;                /* 11:1 */
  border: 1px solid #d3d6d7; border-radius: 10px;
  box-shadow: 0 4px 18px rgb(0 0 0 / .12);
}
.dp-offline[hidden] { display: none; }

/* every fill in the icon is currentColor, so the tile, the sparkles and the moon
   all take the brand colour and keep their own opacity */
.dp-offline-icon {
  flex: none; width: 28px; height: 28px; margin-top: 1px;
  color: var(--brand-primary, #1464ad);
}

.dp-offline-body { min-width: 0; }
.dp-offline-head { margin: 0 0 5px; padding-right: 18px; font-weight: 700; }
.dp-offline-when { margin: 0 0 13px; color: #635f54; }   /* 5.5:1 */

.dp-offline-x {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  background: none; border: 0; border-radius: 6px;
  color: #635f54; cursor: pointer;
}
.dp-offline-x:hover { background: #f1f1ef; }

@media print { .dp-offline { display: none !important; } }
</style>

<script>
(function () {
  var OPEN = 9, CLOSE = 17, ZONE = 'Europe/London';
  var DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
  var KEY = 'dp-offline-dismissed';

  /* Add ?dp-preview=offline to any URL to see it during working hours. Without
     this you cannot check your own change until you are closed. */
  var PREVIEW = /[?&]dp-preview=offline(&|$)/.test(location.search);

  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else { fn(); }
  }

  ready(function () {
    var el = document.getElementById('dp-offline');
    if (!el) { return; }

    var p = {};
    new Intl.DateTimeFormat('en-GB', {
      timeZone: ZONE, weekday: 'short', hour: '2-digit', hourCycle: 'h23'
    }).formatToParts(new Date()).forEach(function (x) { p[x.type] = x.value; });

    var open = DAYS.indexOf(p.weekday) > -1 && +p.hour >= OPEN && +p.hour < CLOSE;
    if (open && !PREVIEW) { el.remove(); return; }

    /* dismissed for this browsing session only, so it is not a nag on every page
       but still shows up on their next visit */
    try {
      if (sessionStorage.getItem(KEY) && !PREVIEW) { el.remove(); return; }
    } catch (e) {}

    el.querySelector('.dp-offline-x').addEventListener('click', function () {
      el.remove();
      try { sessionStorage.setItem(KEY, '1'); } catch (e) {}
    });

    el.hidden = false;
  });
}());
</script>

Display support hours in the header

Alternatively you can show an open or closed notice in the header as well as the current time for the visitor.

Again you want to edit your customer-header.html template with the following code:

 <div id="dp-hours" class="dp-hours" hidden>
  <span class="dp-hours-dot" aria-hidden="true"></span>
  <span id="dp-hours-state"></span>
  <span class="dp-hours-sep" aria-hidden="true">&middot;</span>
  <time id="dp-hours-clock"></time>
</div>

<style>
.dp-hours {
  /* custom-header renders outside .dp-po, which is where the theme sets its font.
     Without this line the text comes out in the browser default serif. */
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 13px;
  line-height: 1.2;

  display: inline-flex; align-items: center; align-self: center; gap: 8px;
  margin-left: 20px;
  padding: 5px 12px; border-radius: 99px; white-space: nowrap;
  background: #f1f1ef; color: #3f3c35;          /* 9.6:1 */
}
.dp-hours[hidden] { display: none; }
.dp-hours time { font-variant-numeric: tabular-nums; }
/* decorative only, and aria-hidden, so it is never read out between the two */
.dp-hours-sep { opacity: .45; }

.dp-hours-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #8a5300; }                        /* closed, 5.6:1 */
.dp-hours[data-open="yes"] .dp-hours-dot { background: #14795a; }   /* open, 4.8:1 */

/* in the breadcrumb strip, sit at the far right of the row */
.dp-hours.is-crumb { margin-left: auto; }

/* nowhere to put it: stay at the top of the page, but padded */
.dp-hours.is-loose { margin: 10px 0 10px 22px; }

/* keep the state on a narrow screen, drop the clock */
@media (max-width: 600px) { .dp-hours time { display: none; } }
</style>

<script>
(function () {
  var OPEN = 9, CLOSE = 11, ZONE = 'Europe/London', LABEL = 'London';
  var DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

  /* ?dp-preview=closed forces the closed state, so you can check both looks
     without waiting until the evening. */
  var PREVIEW_CLOSED = /[?&]dp-preview=closed(&|$)/.test(location.search);

  /* custom-header runs at the very top of <body>, so the header and breadcrumb do
     not exist yet. Without this wait every selector below returns null and the
     element is left stranded at the top of the page. */
  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else { fn(); }
  }

  function place(el) {
    /* First choice: the top bar, straight after the site name. The right-hand
       cluster carries ml-auto, so it stays pinned right and this fills the gap. */
    var right = document.querySelector('.dp-po-header-right');
    var cluster = right && right.parentNode;
    var row = cluster && cluster.parentNode;
    if (row && getComputedStyle(row).display === 'flex') {
      row.insertBefore(el, cluster);
      return;
    }
    /* Second choice: the breadcrumb strip. */
    var crumbs = document.querySelector('.breadcrumb-outer .container');
    if (crumbs) { el.className += ' is-crumb'; crumbs.appendChild(el); return; }
    /* Neither exists in this theme: leave it where it was pasted, padded. */
    el.className += ' is-loose';
  }

  ready(function () {
    var el = document.getElementById('dp-hours');
    var state = document.getElementById('dp-hours-state');
    var clock = document.getElementById('dp-hours-clock');
    if (!el) { return; }

    function tick() {
      var p = {};
      new Intl.DateTimeFormat('en-GB', {
        timeZone: ZONE, weekday: 'short', hour: '2-digit', minute: '2-digit', hourCycle: 'h23'
      }).formatToParts(new Date()).forEach(function (x) { p[x.type] = x.value; });

      var open = !PREVIEW_CLOSED
        && DAYS.indexOf(p.weekday) > -1 && +p.hour >= OPEN && +p.hour < CLOSE;

      el.setAttribute('data-open', open ? 'yes' : 'no');
      state.textContent = open ? 'Support open until ' + CLOSE + ':00' : 'Support closed';
      clock.textContent = p.hour + ':' + p.minute + ' ' + LABEL;
      clock.setAttribute('datetime', p.hour + ':' + p.minute);
    }

    place(el);
    tick();
    setInterval(tick, 30000);   // a live clock, not the time the page happened to load
    el.hidden = false;          // reveal only once it is in position
  });
}());
</script>

To customize the date, times, and other aspects displayed in either banner you can reference these elements and update them with your own details: