DocumentationAPI Reference

Building your first Support app - Part 1: Laying the groundwork

In this five-part tutorial series, you'll learn how to build a Zendesk app from start to finish. The app you'll build is called Requester X-ray.

This tutorial covers the first steps to building the app:

The other tutorials in the series teach you how to build and install the app:

Because the tutorials build on each other, tackle them in order and finish each tutorial before moving on to the next one.

To download the completed source code of the app in this tutorial, click xr_app.zip. You can review the code as you follow along or check your work.

Disclaimer: Zendesk provides this article for instructional purposes only. Zendesk does not provide support for the content. Please post any issue in the Zendesk Apps framework (ZAF) community, or search for a solution online.

What you'll need

To build and upload a private Support app, you must have the Zendesk Suite Growth plan or above, or the Support Professional plan or above. To get a free eligible account for testing, see Getting a trial or sponsored account for development.

You can also try out apps in the Trial account, which gives you access to all Enterprise features.

Planning the app

You should have a good idea of how your app will look and work before you start working on it. The Requester X-ray app 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 signed in to Zendesk Support

The app will display this information in the Apps panel on the right when the agent opens a ticket in the Zendesk Support agent interface.

The app will include a "Report bugs" link that lets the agent report a bug in an email to the app's author.

Here's a mockup of the user interface:

Installing ZCLI

In this section, you'll install the Zendesk Command Line Interface (ZCLI). ZCLI lets you:

  • Automatically create all the necessary files and folders for a new app
  • Test your app locally in a browser
  • Validate your app
  • Package your app for upload

Installing ZCLI is a one-time task. Once installed, you can use ZCLI for all your Zendesk app projects. Follow the instructions in Installing and updating ZCLI. You also need to authenticate ZCLI with your Zendesk account. See Authentication in the ZCLI documentation. After you're done, return here to continue the tutorial.

Note: ZCLI replaces the Zendesk Apps Tools (ZAT), which are in maintenance mode. To use ZAT instead, refer to Installing and using ZAT.

Creating the app files

After installing ZCLI, you can start building the app. The first step is to create the starter files for a new app called Requester X-ray in a folder called xr_app. You can use ZCLI to accomplish this task.

Create the app files

  1. In your command-line interface (the command prompt in Windows or Terminal in macOS), navigate to the folder where you want the app files to be saved in a subfolder.

    Use the cd command (for change directory) to navigate to a child folder. Example:

    cd projects

  2. Run:

    zcli apps:new

  3. At the prompts, enter the following values:

    • Directory name: xr_app
    • Author's name: Your name
    • Author's email: Your email address
    • Author's website: Leave blank and press Enter.
    • App name: Requester X-ray

    ZCLI creates app starter files in the xr_app folder.

  4. Open your file browser and navigate to the files.

    The folder contains an assets and translations folder, plus a manifest.json and README.md file. You can add as many files as you need when you're building your app, but for now it's all you need to start building an app.

    Because it's an iframe app, you can host the app in Zendesk Support or on a remote server with any technology stack you want. If you're only using client-side technologies, as you are here, you can simply host it in Zendesk Support.

Everything is in place to start building. In the next tutorial, you'll learn more about the HTML file to be iframed into Zendesk Support. You'll add a footer, add some stylesheets, and replace the logo to meet the design requirements specified in Planning the app above. Get started: Part 2 - Designing the user interface.