Notific Documentation

We are renewing our documentation.
Please don't hesitate to contact us if you have any questions!

Getting Started

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

							
                                            <script src="https://cdn.notific.io/<unique_app_id>.js"></script>
                                        
                                    

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


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.

                        
                            // Remove the default notification button
                            Notific.destroyButton();

                            // 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');
                                Notific.toggle(e);
                            }, false);
                        
                    

Identify user (optional)

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.

                            
                                Notific.setUser({
                                    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: "john.doe@example.com", // 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' => 'john.doe@example.com'
];

ksort($data);

$hmac = hash_hmac(
    'sha256',
    json_encode($data),
    '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: 'john.doe@example.com',
	id: 'vdmr1xmt',
	name: 'John Doe'
};

var data = ksort(data);
// Generate using CryptoJS https://github.com/brix/crypto-js
var hmac = CryptoJS.HmacSHA256(JSON.stringify(data), secretKey).docstring();

							        
						        
                                                    
import hmac, hashlib, json

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

data = {
    'id': 'vdmr1xmt',
    'name': 'John Doe',
    'email': 'john.doe@example.com'
}

hmac = hmac.new(secretKey.encode(), 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' => 'john.doe@example.com'
}

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

API

API documentation can be found here.

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


PHP SDK

You can use the Notific.io PHP SDK to communicate with Notific.io API.

					
// create new recipient
$recipient = $notific->createRecipient([
	'id'    => 1, // unique user id
	'name'  => "Cpt. John Mallorca", // optional
	'email' => "john@klopalairways.com", // optional
]);

// send notification template "Welcome" to Recipient
$notific->template('welcome')->sendTo($recipient);
			
		
Download the PHP SDK from GitHub