Custom Notification popup

This tutorial video explains how to create a custom notification popup in Notific.io.

You can find all the example codes below.

HTML

<li class="notific">
    <a href="#">
        <i class="fa fa-bell notific-bell"></i>
        <span class="notific-count"></span>
    </a>
    <div class="notific-popup"></div>
</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;
}

.notific-popup {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 15px;
  padding: 10px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

JavaScript

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

// 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';
});

var popup = document.querySelector('.notific-popup');
var currentNotification = null;

Notific.on('popup-open', function(notification) {
    popup.style.display = 'block';
    popup.innerHTML = notification.title;
    currentNotification = notification;
});

popup.addEventListener('click', function() {
    if (!currentNotification) {
        return;
    }
    Notific.view(currentNotification);

    popup.style.display = 'none';
    currentNotification = null;
}, false);

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

<?php
$secretKey = '[SECRET_KEY]';

// This data would normally come from your app's database
$data = [
    'id' => '[USERS_ID_IN_YOUR_APP]',
    'name' => '[USERS_NAME_IN_YOUR_APP]',
    'email' => '[USERS_EMAIL_IN_YOUR_APP]'
];

ksort($data);

$hmac = hash_hmac(
    'sha256',
    json_encode($data),
    $secretKey
);

$data['hmac'] = $hmac;
?>

Notific.setUser(<?=json_encode($data)?>);
</script>

Next tutorial: Creating a since you’ve been gone modal