# Adding a notification banner

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

Source: https://www.zenplates.co/documentation/customization/adding-a-notification-banner (Customization › Using theme settings)

Our themes include a built-in notification banner that supports multiple languages through the use of dynamic content. It can be displayed above the page header or below the hero section on the Home page.

You can customize the location, colors and content of the notification using theme settings. More advanced customization can be achieved by editing the notification's micro-template.

<div class="relative p-4 text-white bg-red-500 my-7">
  <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" />

        <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" />

        <rect x="11" y="9" width="2" height="7" rx="1" />

        <rect x="11" y="17" width="2" height="2" rx="1" />
      </g>
    </svg>

    <p class="m-1 font-medium mr-auto">Our website is currently unavailable for unexpected maintenance</p>
  </div>
</div>

## Adding a notification banner

To add the notification banner to your help center:

1. In Knowledge admin, click the Customize design icon (![Customize icon](https://www.zenplates.co/assets/images/documentation/icon-customize.webp)) in the sidebar.

2. Click Customize on the theme you want to edit.

3. In the Settings panel, select the **General page elements** section.

4. Select a location (Header or Home page) from the **Notification location** setting. Selecting "None" will hide the notification completely.

5. Create a [Dynamic Content](https://support.zendesk.com/hc/en-us/articles/4408882999066-Providing-multiple-language-support-with-dynamic-content) snippet containing the content that you'd like to have displayed in the notification banner.

   ![Creating dynamic content with the notification content](https://www.zenplates.co/assets/images/documentation/dynamic-content.png)

   The content can contain HTML and be translated into multiple languages using variants. 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.

6. Add a reference to your notification content in the **Notification content** setting. For example, if the placeholder for your dynamic content is `{{dc.hc_notification}}` the value of the setting should be `hc_notification`.