Getting Started

Load the script. Include it just before closing body tag on every HTML page.

                                            <script src="<unique_app_id>.js"></script>

This will integrate the default UI to your website and load new notifications in realtime.

Optional: Custom button

Instead of showing the default notification button, you can create your own by using functions and events of global Notific object. Custom code should be placed after the script tag.

Example custom button
// Remove the default notification button

// Do something when count of unread notifications changes
Notific.on('unread', function(count) {
    console.log(count + ' unread notifications');

// Do something when notification panel closes
Notific.on('close', function() {
    console.log('Notification panel closed');

// Do something when notification panel opens
Notific.on('open', function() {
    console.log('Notification panel opened');

// Toggle notification panel by clicking your custom button element
customButton.addEventListener('click', function(e) {
    console.log('Notification panel toggled');
}, false);

Optional: Identify user

Use a unique value to identify your users, include any additional attributes, information and generated HMAC (explained later). Properties that you send can be used in notifications.

    id: "UNIQUE_USER_ID", // Unique identifier for current user
    hmac: "GENERATED_HMAC", // HMAC generated from user data by using secret key
    name: "John Doe",   // Current user's name
    email: "", // Current user's email
    // Additional user properties.
    // is_trial: false,
    // plan: "enterprise"

To log out the user from Notific, call Notific.setUser(null) without any additional information.

Generate HMAC

For HMAC generation example, let's assume that the secret key is 4RjprPVSxDUnh5GhVJeLkVGrCUmzff and the unique user id is vdmr1xmt. Here are examples on how HMAC would be generated by using PHP or JavaScript.

Before the user data is passed to HMAC function, you need to sort it by keys and convert it to JSON string format. The generated HMAC also needs to be presented in hexadecimal format.

$data = [
    'id' => 'vdmr1xmt',
    'name' => 'John Doe',
    'email' => ''


$hmac = hash_hmac(
    '4RjprPVSxDUnh5GhVJeLkVGrCUmzff' // unique secret key, you get this from the app settings
function ksort(obj) {
  return Object.keys(obj).sort().reduce(function(result, key) {
    result[key] = obj[key];
    return result;
  }, {});

var secretKey = '4RjprPVSxDUnh5GhVJeLkVGrCUmzff';  // unique secret key, you get this from the app settings
var data = { 
	email: '', 
	id: 'vdmr1xmt', 
	name: 'John Doe' 

var data = ksort(data);
// Generate using CryptoJS
var hmac = CryptoJS.HmacSHA256(JSON.stringify(data), secretKey).toString();
import hmac, hashlib, json

# unique secret key, you get this from the app settings
secretKey = '4RjprPVSxDUnh5GhVJeLkVGrCUmzff'

data = {
    'id': 'vdmr1xmt',
    'name': 'John Doe',
    'email': ''

hmac =, msg=json.dumps(data, separators=(',', ':'), sort_keys=True).encode(), digestmod=hashlib.sha256).hexdigest()
require 'json'
require 'openssl'

# unique secret key, you get this from the app settings
secretKey = '4RjprPVSxDUnh5GhVJeLkVGrCUmzff'

data = {
    'id' => 'vdmr1xmt',
    'name' => 'John Doe',
    'email' => ''

hmac = OpenSSL::HMAC.hexdigest('sha256', secretKey, data.sort.to_h.to_json)

In this example the output HMAC would be f4c29b6bd6baa4048c52b4d82929660e1a098c2fec4b8acec9a28b19c31961d6.


API documentation can be found here.

You need to generate APP id and API key from the dashboard.


You can use the PHP SDK to communicate with API.

// create new recipient
$recipient = $notific->createRecipient([
	'id'    => 1, // unique user id
	'name'  => "Cpt. John Mallorca", // optional
	'email' => "", // optional

// send notification template "Welcome" to Recipient
Download the PHP SDK from GitHub