Engagement / On-Site / Notification

Notification Settings

Notification Configuration Properties

Property Type Description Default
notificationId String To show a specific notification, specify the notificationId null
skipRules boolean If set to true, targeting rules specified in the dashboard for the active notifications are not executed. Thus, all the active notifications, unless notificationId is specified, become eligible to be shown. false
forcedRender boolean If set to true, the clicked or closed notifications also become elgible to be shown. false
delay number Time delay, in miliseconds, to show a survey on a page. It overrides the time delay specified in the dashboard. null
defaultRender boolean If set to false, the eligible notification is not displayed by default. true
customData object Specify your custom data for notification here in proper JSON format to submit along with every notification click. If not set then webengage.customData is referred null
ruleData object Specify your rule data here in proper JSON format to filter you audience, with the keys you specified in the WebEngage Dashboard while editing rule for the corresponding Notification. If not specified webengage.ruleData is refered null
tokens object Specify your tokens data here in proper JSON format. If not specified webengage.tokens is refered null

Examples of using Notification Properties

Delay a particular notification rendering
webengage.notification.options({
	'delay' : 5,
	'notificationId' : '_NOTIFICATION_ID_'
});

Note : If you have already set the time-delay in the notification rule while creating it, delay value pased in the webengage.notification.options will overwrite it.

Skip rules on a page for notifications
webengage.notification.options('skipRules', true);
Custom rules - showing a "we are offline" notification every Sunday
var daysInWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
webengage.notification.options('ruleData', {day : daysInWeek[(new Date()).getDay()]});

Note: In custom rules section, on the targeting page, you can use the "day" variable to create targeting rules. For example, if the day is "Sunday", display a notification on your contact page that your support team is currently offline.

Notification Callbacks

Callback Description Data
onOpen invoked on notification open Data Object
onClose invoked when a notification is closed Data Object
onClick invoked when a notification is clicked Data Object

Examples of using Notification Callbacks

Callback handler when a notification is closed
webengage.notification.onClose(function (data) {
    if (data.notificationId === '_NOTIFICATION_ID_') {
        alert("You are really missing out on this great offer!");
    }
});

Notification onOpen callback data (JSON)

{
	"notificationId": "173049892",
	"licenseCode": "311c48b3",
	"type": "notification",
	"title": "Checkout the new pricing",
	"event": "open",
	"activity": {
			"pageUrl": "http://webengage.net/",
			"pageTitle": "In-site customer Feedback, targeted Surveys & push Notifications for Websites - WebEngage",
			"referrer": "",
			"browser": "Chrome",
			"version": 27,
			"OS": "Windows",
			"country": "India",
			"region": "Maharashtra",
			"city": "Mumbai",
			"ip": "127.0.0.1"
		},
	"customData": {
			"userName" : [ "john" ],
			"gender" : [ "male" ],
			"customerType" : [ "Gold" ],
			"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
		}
}

Notification onClick callback data (JSON)

{
	"notificationId": "173049892",
	"licenseCode": "311c48b3",
	"type": "notification",
	"title": "Checkout the new pricing",
	"event": "click",
	"actionLink": "http://webengage.com/pricing",
	"actionText": "Check out",
	"activity": {
			"pageUrl": "http://webengage.net/",
			"pageTitle": "In-site customer Feedback, targeted Surveys & push Notifications for Websites - WebEngage",
			"referrer": "",
			"browser": "Chrome",
			"version": 27,
			"OS": "Windows",
			"country": "India",
			"region": "Maharashtra",
			"city": "Mumbai",
			"ip": "127.0.0.1"
		},
	"customData": {
			"userName" : [ "john" ],
			"gender" : [ "male" ],
			"customerType" : [ "Gold" ],
			"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
		}
}

Notification onClose callback data (JSON)

On notification close, the callback data for close event will be the same as the last event (whether Open or Click) for that notification.

{
	"notificationId": "173049892",
	"licenseCode": "311c48b3",
	"type": "notification",
	"title": "Checkout the new pricing",
	"event": "click",
	"actionLink": "http://webengage.com/pricing",
	"actionText": "Check out",
	"activity": {
			"pageUrl": "http://webengage.net/",
			"pageTitle": "In-site customer Feedback, targeted Surveys & push Notifications for Websites - WebEngage",
			"referrer": "",
			"browser": "Chrome",
			"version": 27,
			"OS": "Windows",
			"country": "India",
			"region": "Maharashtra",
			"city": "Mumbai",
			"ip": "127.0.0.1"
		},
	"customData": {
			"userName" : [ "john" ],
			"gender" : [ "male" ],
			"customerType" : [ "Gold" ],
			"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
		}
}

Notification Methods

webengage.notification.render

This method allows you to override notification settings as configured in the dashboard. It also overrides any provided global widget settings on the page. This method accepts all notification configuration properties.

Name Type Description
options Object Notification configuration properties & callbacks

Examples of Render Method

Open a notification on click of a button
webengage.notification.options('defaultRender', false);
webengage.onReady(function(){
	document.getElementById("_BUTTON_ID_").onclick = function () {
		webengage.notification.render();
	};
});
Open a notification on page scroll (down)
webengage.notification.options('defaultRender', false);
var getScrollPercentage = function () {
	var documentHeight = $(document).height();
	var viewPortHeight = $(window).height();
	var verticlePageOffset = $(document).scrollTop();
	return Math.round(100* (viewPortHeight+verticlePageOffset)/documentHeight);
}
var notificationDisplayed = false;
webengage.onReady(function(){
	window.onscroll = function (event) {
		if (!notificationDisplayed && getScrollPercentage() >= 70) {
			webengage.notification.render({ notificationId : '_NOTIFICATION_ID_' }); // invoking webengage.notification.render with specific notification id
			notificationDisplayed = true;
		}
	};
});

Please scroll down a bit to see this in effect.
Also, notice that we are calling webengage.notification.render by passing it notificationId option.

Passing Custom Data / Rule Data
webengage.notification.options('defaultRender', false);
webengage.notification.options('ruleData', { 'categoryCode' '_CATEGORY_CODE_', 'paidCustomer' : true });
webengage.onReady(function(){
	document.getElementById("_BUTTON_ID_").onclick = function () {
		webengage.notification.render({
			'customData' :  { 'userId' : '_USER_ID_', 'age' : _AGE_ }
		});
	};
});
Popping an alert onClose of a notification
webengage.notification.options('defaultRender', false);
webengage.onReady(function(){
	document.getElementById("_BUTTON_ID_").onclick = function(){
        webengage.notification.onClose(function(){
            alert("You have closed the notification");
        });
		webengage.notification.render();
	};
});

webengage.notification.clear

Clears any rendered notification.

Examples of Clear Method

Clear a notification on click of a button
webengage.notification.options('defaultRender', false);
webengage.onReady(function(){
	document.getElementById("_BUTTON_ID_").onclick = function () {
		webengage.notification.clear();
	};
});

Engagement / On-Site / Notification