Sections

Notifications

Display notifications and alerts of different types throughout your Help Center.

Example

The example below demonstrates the four default styles available through the plugin: error, warning, success and tip.

  • <div data-element="notification" data-type="error" data-content="..."></div>
    <div data-element="notification" data-type="warning" data-content="..."></div>
    <div data-element="notification" data-type="success" data-content="..."></div>
    <div data-element="notification" data-type="tip" data-content="..."></div>

You can make your notifications dismissible using the dismissible option.

Usage

To create notifications you must either:

  1. Define the notification content using the content option, which can be static text or Dynamic Content if you need to support multiple languages.
  2. Identify articles to convert into notifications using the labels option, which is a comma-separated list of article labels. The plugin will convert each article matching one or more of the labels you provide into a notification, using the article content as the notification content.

Use data-element="notification" on an element to create a new notification.

<div data-element="notification" data-type="error" data-labels="notification_error">...</div>

If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The Notification plugin can be initialized using JavaScript:

<div id="notification">...</div>

<script type="text/javascript">
  ready(function() {
    var notification = document.getElementById('notification');
    if (!notification) return;

    new Notification(notification, {
      // Options go here
    });
  });
</script>

User-specific notifications

Using JavaScript you can show notifications to specific subsets of users that visit your Help Center. For example, to show a success notification to users with a tag of special_user, you could use the following code:

{{#if signed_in}}
  <div id="notification"></div>
  <script type="text/javascript">
    ready(function() {
      fetch('/api/v2/users/me.json')
          .then(function(response) { return response.json(); })
          .then(function(json) {
            var user = json.user;
            if (user.tags.indexOf('special_user') !== -1) {
              new Notification(document.getElementById('notification'), {
                content: 'This is a notification that only some users can see.',
                type: 'success'
                // Other options go here
              });
            }
          });
    });
  </script>
{{/if}}

Any other user property could be used as a condition, like the user’s role or organization membership. To learn more about the user properties returned by the Zendesk REST API, refer to their online documentation.

Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data- and use kebab case instead of camel case.

Name Type Default Description
content string '' The content to display within your notification.
labels string '' A comma-separated list of labels used to identify articles.
type string 'error' The type of notification to use (error, warning, success or tip).
dismissible boolean true True if the notifications should be dismissible.
template string
null
null The name of the template to use.
templateData object {} Additional data to expose to the templating function.

Using custom micro-templates you can customize the appearance and behavior of the notifications and even present other data within them like the article title. The templating function will receive one or more notification objects. Each notification object has the following properties:

  • notifications which is an array of notification objects, each with the following properties:
    • url (only populated if articles are used)
    • title (only populated if articles are used)
    • body
    • body_plain
    • type
  • dismissible

Events

Class Properties
notification.render Fires when the notification has been rendered.