angular-zendesk-widget

Angular wrapper for the [Zendesk Web Widget](https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-zendesk-widget
0.1.36 years ago6 years agoMinified + gzip package size for angular-zendesk-widget in KB

Readme

angular-zendesk-widget Build Status
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:
<!-- Minified -->
<script type="text/javascript" src="dist/angular-zendesk-widget.min.js"></script>
<!-- Unminified -->
<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'
      // See below for more settings
    });
  }]);
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({
  // Your Zendesk account URL. Required
  accountUrl: 'crosslead.zendesk.com',
  // Callback to execute after the Zendesk Widget initializes
  // but before the page finishes loading. Probably the best
  // example from the Zendesk docs is hiding the widget initially (see
  // https://developer.zendesk.com/embeddables/docs/widget/api#ze.hide).
  // Note you do **not** need to wrap your calls in an extra `ze()` closure
  beforePageLoad: function(zE) {
    zE.hide();
  }
});