angular-zendesk-widget
Angular wrapper for the Zendesk Web Widget
Installation
Via bower:
$ bower install angular-zendesk-widget
Or grab the latest release and add the JavaScript directly:
<script type="text/javascript" src="dist/angular-zendesk-widget.min.js"></script>
<script type="text/javascript" src="dist/angular-zendesk-widget.js"></script>
Usage
First, you'll need to setup the widget during the Angular configuration phase using the ZendeskWidgetProvider
:
angular.module('myApp', ['zendeskWidget'])
.config(['ZendeskWidgetProvider', function(ZendeskWidgetProvider) {
ZendeskWidgetProvider.init({
accountUrl: 'crosslead.zendesk.com'
});
}]);
Then simply inject the ZendeskWidget
service and use it to call any of the Web Widget API methods:
JavaScript:
angular.module('myApp')
.controller('MyAppCtrl', ['ZendeskWidget', function(ZendeskWidget) {
$scope.doCustomWidgetStuff = function() {
ZendeskWidget.identify({
name: $scope.currentUser.displayName,
email: $scope.currentUser.email,
externalId: $scope.currentUser._id,
});
ZendeskWidget.activate({hideOnClose:true});
};
}]);
HTML:
<div ng-app="myApp" ng-controller="MyAppCtrl">
<a ng-click="doCustomWidgetStuff()">Click me</a>
</div>
Settings
The following are all the settings that you can pass to ZendeskWidgetProvider.init()
:
ZendeskWidgetProvider.init({
accountUrl: 'crosslead.zendesk.com',
beforePageLoad: function(zE) {
zE.hide();
}
});