Customization

Notific.io provides a simple and clean UI out of the box, but it's also possible to modify the look and feel of the notification trigger and UX.

Notific.io provides a simple and clean UI out of the box, but it's also possible to modify the look and feel of the notification trigger and UX.

The default notification button is located in the bottom right corner of the web app. This can be disabled by calling Notific.destroyButton(); or by using button: false in the setup script.

The notification panel can be triggered by calling the function Notific.toggle(). This can be used to create your own notification panel trigger button.

Custom Notification panel button

Instead of showing the default notification button you can create your own by using the Notific object, which is globally available and provides all the necessary functions and events for you. All custom code should be placed after the Notific integration script tag.

In the example below we'll use the bell icon from Font Awesome. The example HTML could be embedded for example in the main navigation of your website.

<li class="notific">
    <a href="#">
        <i class="fa fa-bell notific-bell"></i>
        <span class="notific-count"></span>
    </a>
</li>

CSS

.notific {
  position: relative;
}

.notific-bell {
  font-size: 1.5em;
}

.notific-count {
  display: none;
  font-size: 0.8em;
  line-height: 0.8em;
  color: white;
  background: red;
  padding: 3px;
  right: 0;
  bottom: 0;
  position: absolute;
  border-radius: 3px;
}

JavaScript

<script src="https://cdn.notific.io/[APP_ID].js"></script>
<script>
Notific.destroyButton();

// Do something when count of unread notifications changes
Notific.on('unread', function(count) {
    var el = document.querySelector('.notific-count');

    el.innerHTML = count;
    el.style.display = count ? 'block' : 'none';
});

// Toggle notification panel by clicking your custom button element
document.querySelector('.notific').addEventListener('click', function(e) {
    Notific.toggle(e);
}, false);
</script>

Further reading