Widgets as you knew them in Zendesk Classic do not exist in the new version of Zendesk. They have been replaced by Zendesk Apps, which are built around a solid, maintained, and well-documented framework. The advantages of moving to a framework include much greater consistency and stability for the extensions you create. For example, in Zendesk Classic, if during one of our weekly updates we even made minor changes the DOM structure, we would unintentionally break some of your widgets. Now, with Apps, it’s on us to ensure that the framework is reliable and functions as its specified in the framework API reference.
Important! All of the extensions and widgets that you're using in your end-user facing Web portal still work in the new version of Zendesk. This is because we have not rebuilt that part of Zendesk. Only the agent and administrator interface has changed.
To see the Apps that are currently available in the new version of Zendesk, sign in to the new version of Zendesk and then select the Manage icon
and then Apps > Browse. Many of the widgets that were available in Zendesk Classic are now available as Apps, including: Salesforce, JIRA, Harvest, Freshbooks and dozens of others.
If you created your own custom widgets, you'll need to recreate them as Apps using the new framework. This document describes the differences between developing widgets and Zendesk Apps and then provides you with a number of code examples to illustrate those differences.
To develop Apps using the Zendesk App Framework, you’ll need to be proficient in the following Web development technologies:
Along with a new framework comes the following new terminology that you’ll want to become familiar with before reading any further.
| Term | Description |
|---|---|
| Framework | The JavaScript API used to build apps, and communicate with the Zendesk interface. |
| Location | Apps define where they appear on the interface, such as the ticket page or user page. |
| Requests | How you communicate with web services outside the interface (essentially just AJAX calls). |
| Events | Subscribe to certain events, such as a click or change, within the Zendesk interface (similar to jQuery.bind). |
| Templates | The UI of your App is defined by templates, which can be dynamic based on Mustache.js. |
| Manifest | Each App has a manifest that defines a number of meta information about your App, as well as some settings. |
Prototype is not accessible in the new Zendesk. It has been replaced by a combination of our new App framework and jQuery.
jQuery itself is now only accessible within an App. This means that while you can use jQuery to manipulate the DOM of your own App, you may not use jQuery to manipulate the DOM (or anything else) within the Zendesk interface itself. We’ve put this restriction in place for two reasons:
The new Zendesk interface is almost 100% JavaScript based. This is different from the old Zendesk interface, which was primarily HTML generated server side. As a result, allowing complete access to all of the new Zendesk interface would likely result in a lot of breakage of your App. The interface is dynamically generated client-side. This means there is very little notion, if any, of element IDs or classes. The IDs and classes can change very often, and as a result will just make jQuery-based development impossible for you.
Our aim was to build a solid framework that you can develop against, without the actual need to use jQuery to do so.
Also bundled in the App framework is the Underscore.js library. Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
Underscore provides ~60 functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf.