In this five-part tutorial series, you’ll learn how to build a Zendesk app from start to finish. The application you will create is called Applicant X-ray.
This tutorial covers the first steps in creating the application:
- What you will need
- Planning Application Files
- ZCLI Installation
- Creating the Application Files
The other tutorials in the series teach you how to compile and install the application:
- Part 2: user interface design
- Part 3: creating and inserting templates
- Part 4: getting data
- Part 5: Installing the app in Zendesk Support
Since the tutorials build on each other, please do them in order and finish each tutorial before moving on to the next .
To download the full source code of the app in this tutorial, click xr_app.zip. You can review the code as you go or review your work.
Disclaimer: Zendesk provides this article for instructional purposes only. Zendesk does not provide support for the content. Post any issues to the Zendesk Apps Framework (ZAF) community or search for a solution online.
What you’ll need
To create and upload a private Support app, you must have the Zendesk Suite Growth plan or higher, or the Support Professional plan or higher. If you’re on the Team plan, Zendesk offers developers a free sponsored Enterprise account to test and debug apps. We only ask that you do not use it to provide real support. See Requesting a Sponsored Trial Account.
You can also test apps in the trial account, which gives you access to all Enterprise features.
Planning Your App
You should have a good idea of how your application will look and work before you start working on it. The requester’s X-ray application will display the following information about the requester:
- Requester’s name
- Any user tags applied to the requester in Zendesk Support
- Date the requester was added to Zendesk Support
- Time the requester last connected to Zendesk Support
The application will display this information in the Applications panel on the right when the agent opens a ticket in the Zendesk Support agent interface.
The application will include a “Report Bugs” link that allows the agent to report an error in an email to the author of the app.
Here’s a mockup of the user interface:
ZCLI Installation
In this section, you will install the line interface Zendesk Command Center (ZCLI). ZCLI allows you to:
- Automatically create all files and folders needed for a new application
- Test your application locally in a browser
- Validate your application
- Package your application for upload
ZCLI installation is a one-time task. Once installed, you can use ZCLI for all your Zendesk app projects. Follow the instructions in Installing and Upgrading ZCLI. You must also authenticate ZCLI with your Zendesk account. See Authentication in the ZCLI documentation. Once you’re done, return here to continue the tutorial.
Note: ZCLI replaces Zendesk Application Tools (ZAT), which is in maintenance mode. To use ZAT instead, see Installing and Using ZAT.
Creating the Application Files
After installing ZCLI, you can start building your application. The first step is to create the initial files for a new application called Requester X-ray in a folder called xr_app. You can use ZCLI to accomplish this task.
Create the application files
-
In your command line interface (the command prompt in Windows or Terminal in macOS), navigate to the folder where you want the application files to be saved in a subfolder.
Use the cd command (to change directory) to navigate to a child folder. Example:
-
Run:
-
At the prompts, enter the following values:
- Directory name: xr_app
- Author name: Your name
- Author email: Your email address
- Author Website: Leave blank and press Enter.
- Application Name: Requester X-ray
ZCLI creates files from application startup in xr_app folder.
-
Open your file explorer and navigate to the files.
The folder contains assets and translations , plus a manifest.json file and README.md. You can add as many files as you need when you’re building your app, but for now that’s all you need to start building an app.
Since it’s an iframe app, you can host the app on Zendesk Support or on a remote server with any technology stack you want. If you only use client-side technologies, like you are here, you can just host it in Zendesk Support.
Everything is in place to start building. In the following tutorial, you’ll learn more about the HTML file that will be integrated into Zendesk Support. You’ll add a footer, add some style sheets, and replace the logo to meet the design requirements specified in Planning your app above. Getting Started: Part 2 – User Interface Design.
.