Sections

Add a notification banner

Notification banners allow you to communicate important information to your visitors, like service outages, product or pricing changes and general announcements.

This guide describes how to create a custom notification banner and display it within your Zendesk Help Center. This best-practice approach builds on our powerful theming framework and ensures that your notification is customizable, dismissible and can support multiple languages if required.

Notifications can contain links to categories, sections or articles within your Help Center or external pages. Because they do not rely on you creating articles or other content within Zendesk Guide to support them, you don’t need to worry about what effect they’ll have elsewhere in your Help Center.

We also have a range of ready-made content styles and elements that come free with all of our themes. You can use them to highlight important information in your article content by simply applying a class name in the editor.

Add your notification

The following example demonstrates a notification that could be used to warn visitors about important information like service outages. When placed at the start of your header.hbs template the notification will span the width of the entire screen, capturing the visitor’s attention and potentially reducing support requests.

The customer portal is currently unavailable for unexpected maintenance.

<div class="relative p-4 text-white bg-red-500">
  <div class="flex align-items-start">
    <svg class="svg-icon fill-current bottom-0 font-size-3xl mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <g stroke="none" stroke-width="1" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <circle opacity="0.3" cx="12" cy="12" r="10"></circle>
        <rect x="11" y="7" width="2" height="8" rx="1"></rect>
        <rect x="11" y="16" width="2" height="2" rx="1"></rect>
      </g>
    </svg>
    <p class="m-1 font-medium mr-auto">
      The customer portal is currently unavailable for unexpected maintenance.
    </p>
  </div>
</div>

It’s built using utilities as well as a warning icon from our elements section. You can swap the icon for another in our collection or use a service like Noun Project to browse literally millions of icons.

Customize your notification

Appearance

Because of the modular nature of the notification, you can make significant changes to its look-and-feel by using changing the utilities or replacing the icons.

For example, if you’d prefer to display a notification to your customers about potential shipping delays you could use change the background color using .bg-orange-500 and use a warning icon instead:

Due to delays in our fulfillment centers your delivery may take an additional week to arrive.

<div class="relative p-4 text-white bg-orange-500">
  <div class="flex align-items-start">
    <svg class="svg-icon fill-current bottom-0 font-size-3xl mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g stroke="none" stroke-width="1" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M11.1669899,4.49941818 L2.82535718,19.5143571 C2.557144,19.9971408 2.7310878,20.6059441 3.21387153,20.8741573 C3.36242953,20.9566895 3.52957021,21 3.69951446,21 L21.2169432,21 C21.7692279,21 22.2169432,20.5522847 22.2169432,20 C22.2169432,19.8159952 22.1661743,19.6355579 22.070225,19.47855 L12.894429,4.4636111 C12.6064401,3.99235656 11.9909517,3.84379039 11.5196972,4.13177928 C11.3723594,4.22181902 11.2508468,4.34847583 11.1669899,4.49941818 Z" opacity="0.3"></path>
        <rect x="11" y="9" width="2" height="7" rx="1"></rect>
        <rect x="11" y="17" width="2" height="2" rx="1"></rect>
      </g>
    </svg>
    <p class="m-1 font-medium mr-auto">
      Due to delays in our fulfillment centers your delivery may take an additional week to arrive.
    </p>
  </div>
</div>

Functionality

A few simple additions to what we already have will allow visitors to dismiss the notification.

We’re using AlpineJS in order to allow you to copy this example directly into your theme. You can add AlpineJS to your theme in a single step by copying the following code into the document_head.hbs template:

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

Copying the following example into your theme’s header.hbs template will add a notification containing a dismiss button. If a user dismisses the notification, their decision will be remembered for the duration of their browser session.

Due to delays in our fulfillment centers your delivery may take an additional week to arrive.

<div
  class="relative p-4 text-white bg-orange-500 hidden"
  x-data="{ show: true }"
  x-init="show = !sessionStorage.getItem('hide-notification') && $refs.content.innerText.trim()"
  :class="{ 'hidden': !show }">
  <div class="flex align-items-start">
    <svg class="svg-icon fill-current bottom-0 font-size-3xl mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g stroke="none" stroke-width="1" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M11.1669899,4.49941818 L2.82535718,19.5143571 C2.557144,19.9971408 2.7310878,20.6059441 3.21387153,20.8741573 C3.36242953,20.9566895 3.52957021,21 3.69951446,21 L21.2169432,21 C21.7692279,21 22.2169432,20.5522847 22.2169432,20 C22.2169432,19.8159952 22.1661743,19.6355579 22.070225,19.47855 L12.894429,4.4636111 C12.6064401,3.99235656 11.9909517,3.84379039 11.5196972,4.13177928 C11.3723594,4.22181902 11.2508468,4.34847583 11.1669899,4.49941818 Z" opacity="0.3"></path>
        <rect x="11" y="9" width="2" height="7" rx="1"></rect>
        <rect x="11" y="17" width="2" height="2" rx="1"></rect>
      </g>
    </svg>
    <p class="m-1 font-medium mr-auto" x-ref="content">
      Due to delays in our fulfillment centers your delivery may take an additional week to arrive.
    </p>
    <button
      class="not-a-button p-2 cursor-pointer hover:text-gray-100"
      @click="show = false; sessionStorage.setItem('hide-notification', true)">
      <svg class="svg-icon fill-current bottom-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1080">
        <polygon points="980.528,205.539 874.462,99.473 540,433.935 205.539,99.473 99.473,205.539 433.935,540 99.473,874.462 205.539,980.527 540,646.066 874.462,980.527 980.527,874.462 646.066,540 "/>
      </svg>
    </button>
  </div>
</div>

In this example, the element containing the actual notification content has an attribute of x-ref="content". If there is no notification content or the user has already dismissed the notification, the notification will not be shown.

The relevant parts of the example are:

  1. The .hidden class on the notification element to hide it by default.

  2. AlpineJS directives on the notification element to conditionally show the notification.

    • The x-data="{ show: true }" directive initializes a new component variable show and sets it to true.
    • The x-init="show = !sessionStorage.getItem('hide-notification') && $refs.content.innerText.trim()" directive updates the show variable based on:
      • The user’s preference stored in sessionStorage; and
      • The content of the notification contained within the element with the x-ref="content" attribute.
    • The :class="{ 'hidden': !show }" directive removes the .hidden class if show is false, meaning the notification should be displayed.
  3. A dismiss button which, when clicked, hides the notification and saves the user’s preference.

    • The @click="show = false; sessionStorage.setItem('hide-notification', true)" directive ensures that when a visitor clicks on the dismiss button:
      • The show variable is set to false, hiding the notification; and
      • The user’s preference is saved in sessionStorage.

The result is a fully self-contained notification component that you can copy and paste into any theme. It will just work, without the need for any custom CSS, JavaScript or changes to your Help Center content. Who said custom functionality had to be hard?

Localize your notification

If your Help Center supports multiple languages and you would like your notifications to be presented in your visitor’s preferred language you can replace the static notification text with dynamic content using the Zendesk {{dc}} helper.

The dynamic content should only be created once, but translated into multiple languages using variants. Each variant can include additional HTML if required:

Creating dynamic content with the notification content

Once your dynamic content snippet has been created you can update your notification with a reference to it. In this case our dynamic content has a title of hc_notification, so the helper is {{dc 'hc_notification'}}:

<div
  class="relative p-4 text-white bg-orange-500 hidden"
  x-data="{ show: true }"
  x-init="show = !sessionStorage.getItem('hide-notification') && $refs.content.innerText.trim() && $refs.content.innerText.trim() !== '#'"
  :class="{ 'hidden': !show }">
  <div class="flex align-items-start">
    <svg class="svg-icon fill-current bottom-0 font-size-3xl mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g stroke="none" stroke-width="1" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M11.1669899,4.49941818 L2.82535718,19.5143571 C2.557144,19.9971408 2.7310878,20.6059441 3.21387153,20.8741573 C3.36242953,20.9566895 3.52957021,21 3.69951446,21 L21.2169432,21 C21.7692279,21 22.2169432,20.5522847 22.2169432,20 C22.2169432,19.8159952 22.1661743,19.6355579 22.070225,19.47855 L12.894429,4.4636111 C12.6064401,3.99235656 11.9909517,3.84379039 11.5196972,4.13177928 C11.3723594,4.22181902 11.2508468,4.34847583 11.1669899,4.49941818 Z" opacity="0.3"></path>
        <rect x="11" y="9" width="2" height="7" rx="1"></rect>
        <rect x="11" y="17" width="2" height="2" rx="1"></rect>
      </g>
    </svg>
    <p class="m-1 font-medium mr-auto" x-ref="content">
      {{dc 'hc_notification'}}
    </p>
    <button
      class="not-a-button p-2 cursor-pointer hover:text-gray-100"
      @click="show = false; sessionStorage.setItem('hide-notification', true)">
      <svg class="svg-icon fill-current bottom-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1080">
        <polygon points="980.528,205.539 874.462,99.473 540,433.935 205.539,99.473 99.473,205.539 433.935,540 99.473,874.462 205.539,980.527 540,646.066 874.462,980.527 980.527,874.462 646.066,540 "/>
      </svg>
    </button>
  </div>
</div>

Because the dynamic content helper will display a message if the dynamic content itself is empty, the notification’s x-init attribute has been updated to include $refs.content.innerText.trim() !== '#'. This means that you can hide the notification by replacing the dynamic content with # when it’s not required.

Questions or feedback about this guide? Let us know