Custom Notification popup – Notific.io Tutorial 5
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
Leave a Reply Cancel Reply
Read Next
Tutorial about how to integrate Zapier MailChimp to Notific.io
Can you offer a dark mode/theme for Notific.. one that picks up on prefers-color-scheme perhaps?