How to customise alert button in Notific.io

This tutorial explains the process of customising alert button in notific.io. Notific.io is an extremely flexible and easy to use tool for delivering and presenting push notifications on webapps. It is also lightning fast to integrate – just one line in your .html file(s) and you are good to go.

We have added the example codes used in the video below for your convenience. Feel free to copy – paste these to your own site as you see fit.

Example codes for customising alert button

HTML example codes

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

CSS example codes

.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 example codes

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

Thank you for checking this tutorial for Notific.io. Next tutorial explains the process of Authenticating a user to receive private notifications.