Engagement / On-Site / Feedback

Feedback Settings

Feedback Configuration Properties

Property Type Description Default
delay number Time delay, in miliseconds, to show the feedback tab on a page. null
formData Array of Object Specify values in the feedback form for the pre-population of the fields. example null
alignment String Shows the feedback tab on the left/right side of the webpage. The possible value that you can specify here is left or right. As specified in feedback tab configuration
borderColor String Renders feedback tab with the specified border color As specified in feedback tab configuration
backgroundColor String Renders feedback tab with the specified background color As specified in feedback tab configuration
defaultCategory String Shows the feedback form based on the feedback category specified here. As specified in feedback category configuration
showAllCategories boolean If set to true, the feedback form appears with feedback category dropdown menu to let the end users to submit contextual feedbacks. If set to false, the feedback form appears based on the default feedback category specified without any feedback category dropdown menu. true
showForm boolean If set to true, feedback form slides out, on page load, by default. false
defaultRender boolean If set to false, the feedback tab is not displayed by default. true
customData Object Specify your custom data here in proper JSON format to submit along with every feedback got submitted, if not specified webengage.data is referred. null

formData Object

Property Type Description
name String Label of the field in the feedback form which you want to prepopulate data or want to hide or make it mandatory
value String Specify the value of the field
mode String Specify if the field should be hidden, read only or default (no-change). So values only supported are hidden and readOnly and default
isMandatory Boolean Specify if the field should be mandatory or not.
options String Array Applicable only in case of ‘Category’ field. Specify in case you want to show specific values in the category dropdown.

NOTE : To see the example code click here

Examples of using Feedback Properties

Set feedbackTab alignment to right
webengage.feedback.options('alignment', 'right');
Set feedbackTab background colours and border colours
webengage.feedback.options({
	'backgroundColor' : '#ff9',
	'borderColor' : '#f99'
});
Prepopulate email and keep it readonly, hide message, specific options for category drop-down
// Values in the category drop-down 'Like' & 'Question'

webengage.feedback.options('formData', [
	{
		'name' : 'email',
		'value' : '_EMAIL_VALUE_',
		'mode' : 'readOnly'
	}, {
		'name' : 'message',
		'mode' : 'hidden'
	}, {
		'name' : 'category',
		'isMandatory' : false,
		'value' : 'like',
		'options' : ['Like', 'Question'] // make sure you send right category lables
	}
]);

Feedback Callbacks

Callback Description Data
onOpen invoked on survey open Data Object
onClose invoked when a survey is closed Data Object
onSubmit invoked when a question is answered Data Object

Examples of using Feedback Callbacks

Close the feedback window in 5 second just after someone submits feedback.
webengage.feedback.onSubmit(function (data) {
        var feedbackInstance = this;
        setTimeout(function(){
            feedbackInstance.close();
        }, 5000);
});

Feedback onOpen callback data (JSON)

{
		"licenseCode": "311c48b3",
		"type": "feedback",
		"activity": {
		"pageUrl": "http://webengage.net/publisher/feedback-configuration/fields/311c48b3",
		"pageTitle": "Feedback Configuration - WebEngage",
		"ip": "127.0.0.1",
		"city": "Mumbai",
		"country": "India",
		"browser": "Firefox",
		"browserVersion": "18",
		"platform": "Linux",
		"activityOn": "2013-02-11T08:09+0000"
	},
		"customData": {
			"userName" : [ "john" ],
			"gender" : [ "male" ],
			"customerType" : [ "Gold" ],
			"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
		}
}

Feedback onSubmit callback data (JSON)

{
	"id": "has7e2",
	"licenseCode": "311c48b3",
	"type": "feedback",
	"fields": [{
		"id": "1fcdjgf",
		"label": "Name",
		"type": "default",
		"value": {
			"@class": "name",
			"text": "John"
		}
	}, {
		"id": "ah1ihjd",
		"label": "Email",
		"type": "default",
		"value": {
			"@class": "email",
			"text": "john@doe.com"
		}
	}, {
		"id": "cci1868",
		"label": "Category",
		"type": "default",
		"value": {
			"@class": "category",
			"text": "Suggestion"
		}
	}, {
		"id": "~78me196",
		"label": "Message",
		"type": "default",
		"value": {
			"@class": "message",
			"text": "Thank you very much for this awesome service!"
		}
	}, {
		"id": "~5d68amb",
		"label": "Attach a screenshot of this page",
		"type": "default",
		"value": {
			"@class": "snapshot",
			"thumbnailImageUrl": ""
		}
	}, {
		"id": "n283q0",
		"label": "Enter your mobile number",
		"type": "custom",
		"value": {
			"@class": "text",
			"text": "9988776655"
		}
	}, {
		"id": "pp3j84",
		"label": "Your Bio",
		"type": "custom",
		"value": {
			"@class": "text",
			"text": "I am an early beta user of this product."
		}
	}, {
		"id": "19jb68o",
		"label": "Which countries you have been to?",
		"type": "custom",
		"value": {
			"@class": "list",
			"values": ["US", "Mexico"]
		}
	}, {
		"id": "1cc6lks",
		"label": "Rate our website",
		"type": "custom",
		"value": {
			"@class": "matrix",
			"values": {
				"Experience": ["Good"],
				"Content": ["Good"],
				"Design": ["Poor"]
			}
		}
	}, {
		"id": "sht4k8",
		"label": "Upload your resume",
		"type": "custom",
		"value": {
			"@class": "file",
			"fileName": "android_sdk_developing.pdf",
			"fileSize": 1919972,
			"fileAccessUrl": "https://api.webengage.com/v1/download/feedback/response/ofq4jy",
			"fileType": "pdf"
		}
	}, {
		"id": "16qfkqk",
		"label": "What is your favourite color?",
		"type": "custom",
		"value": {
			"@class": "list",
			"values": ["Red"]
		}
	}],
	"activity": {
		"pageUrl": "http://webengage.net/publisher/feedback-configuration/fields/311c48b3",
		"pageTitle": "Feedback Configuration - WebEngage",
		"ip": "127.0.0.1",
		"city": "Mumbai",
		"country": "India",
		"browser": "Firefox",
		"browserVersion": "18",
		"platform": "Linux",
		"activityOn": "2013-02-11T08:09+0000"
	},
	"customData": {
		"userName" : [ "john" ],
		"gender" : [ "male" ],
		"customerType" : [ "Gold" ],
		"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
	}
}

Feedback onClose callback data (JSON)

On feedback close, the callback data for close event will be the same as the last event (whether Open or Submit).

{
		"licenseCode": "311c48b3",
		"type": "feedback",
		"activity": {
		"pageUrl": "http://webengage.net/publisher/feedback-configuration/fields/311c48b3",
		"pageTitle": "Feedback Configuration - WebEngage",
		"ip": "127.0.0.1",
		"city": "Mumbai",
		"country": "India",
		"browser": "Firefox",
		"browserVersion": "18",
		"platform": "Linux",
		"activityOn": "2013-02-11T08:09+0000"
	},
		"customData": {
			"userName" : [ "john" ],
			"gender" : [ "male" ],
			"customerType" : [ "Gold" ],
			"jsessionid" : [ "CB300FEC898236FF9E5A181E468CA6BC" ]
		}
}

Feedback Methods

webengage.feedback.render

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

Name Type Description
options Object Feedback Configuration Properties & Callbacks

Examples for Render Method

Show a feedback on click of a button
webengage.onReady(function(){
	document.getElementById("_BUTTON_ID_").onclick = function () {
		webengage.feedback.render({ 'showForm' : true });
	};
});

Example of clear Method

Clear a feedback on click of a button
document.getElementById("_BUTTON_ID_").onclick = function () {
	webengage.feedback.clear();
};

Engagement / On-Site / Feedback