Zendesk Tutorial PDF

HelpDesk Build your rst Support app

Forewords

Some Digital Marketing Tools that you may consider in the next page. You can combine all these tools to get optimal results.

Forewords 1. Builderall, sales funnel creator It is obviously one of the best free sales funnel creator, landing page along with free email tools with 100 subscribers, it is a must tool for digital marketer. The paid tier is also very good, the features almost same with ClickFunnels but with far cheaper price.

Although you cannot use your own domain for free tier, but they put advertisement which is your a liate link on the site you created. So, it is win-win solution, you get commission and Builderall get customer.

2. Sqribble, easy eBook Creator This is tool for eBook marketing. Combine it with BuilderAll and you can make a lead magnets. The eBook created looks very professional. It has lifetime deal for about $20 using this link with coupon CINDERELLA 3. Viddyoze, 3D animation video creator If you want to make stunning video easily, you can use Viddyoze. Though, to get the latest and coolest template, you have to subscribe. But, the basic one is already good.

4. DoodleOze, whiteboard and doodle animation creator.

Tool to make whiteboard animation or doodle (cartoon). Make informative video or tutorial using this tool. Many digital marketer use whiteboard or doodle animation for their sales video and converts.

5. Speechelo or NewsCaster Vocalizer, These tool will help you to voice over the video you made using other tools mentioned above. As you can see in Fiverr, voice over is very expensive. For 200 words, the cost around $10. If you use Speechelo or NewsCaster Vocalizer, you may not get super professional voice like Morgan Freeman, but you will get natural sounding voice over that hard to di erentiated with human voice. It is because they use AI Deep Learning for the text-to-speech. I speculate that they use Amazon Polly.

6. Video Marketing Blaster After you make video along with voice over, you can use video marketing blaster to help you with the YouTube SEO. It is not instant result, but it is much better than if you research it yourself.

Build your rst Support app

Part 1 - Laying the groundwork In this ve-part tutorial series, you'll learn how to build a Zendesk app from start to nish. The app you'll build is called Requester X-ray.

This tutorial covers the rst steps to building the app: hat you'll need W Planning the app Installing the Zendesk app tools Creating the app les 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 nish 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.

Note: Zendesk provides this article for instructional purposes only. Zendesk does not provide support for the content. Please post any issue in the comments section below or in the Zendesk Apps community, or search for a solution online.

What you'll need To build and upload a private app, you must have Zendesk Support on the Professional or Enterprise plan. If you're on the Essential or Team plan, Zendesk o ers developers a free, sponsored Enterprise account for testing and debugging apps. We ask only that you don't use it to provide actual support. See Request a sponsored test account.

Build your rst Support app

Build your rst Support app You can also try out apps in the Trial account, which gives you access to all Professional 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: t he requester's name any user tags applied to the requester in Zendesk Support the date the requester was added to Zendesk Support the 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:

Build your rst Support app

Build your rst Support app

Installing the Zendesk app tools In this section, you'll install the Zendesk app tools (also known as ZAT). Among other tasks, the tools let you perform the following tasks: utomatically create all the necessary les and folders for a new app A Test your app locally in a browser Validate your app Package your app for upload Installing the tools is a one-time task. Once installed, you can use ZAT for all your Zendesk app projects.

Follow the instructions in Installing and using the Zendesk apps tools. After you're done, return here to continue the tutorial.

Creating the app les After installing the Zendesk app tools, you can start building the app. The rst step is to create the starter les for a new app called Requester X-ray in a folder called xr_app. You can use the ZAT tools to accomplish this task.

Create the app les

Build your rst Support app

Build your rst Support app

Build your rst Support app

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

Use the cd command (for change directory) to navigate to a child folder. Example: Tip: To go back up to a parent directory, use cd followed by a space and two periods. Example: cd ..

2. Run the following ZAT command: $ zat new

If you get an error that the command doesn't exist, make sure the Zendesk app tools are installed. See Installing the Zendesk apps tools.

3. At the prompts, enter the following values: author's name - your name author's email - your email author's url - your website url if you have one, or press Enter to leave it blank app name - Requester X-ray iFrame URI - press Enter to leave it blank. You'll use the default local iframe le directory name - xr_app The ZAT tool creates and lists the les. The window should look as follows in macOS:

Build your rst Support app

Build your rst Support app 4. Open your le browser and navigate to the les.

The folder contains an assets and translations folder, plus a manifest.json and README.md le. You can add as many les 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 like Handlebars and jQuery, 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 le to be iframed into Zendesk Support. You'll add a footer, add some stylesheets, and replace the logo to meet the design requirements speci ed in Planning the app above. Get started: Part 2 - Designing the user interface.

Have more questions? Submit a request

Build your rst Support app

Build your rst Support app

Part 2 Designing the user interface In the previous tutorial in this series, you installed the Zendesk app tools and created the starter les for an app named Requester X-ray. In this tutorial, you'll work on the user interface so that it meets the design requirements of your app. The tutorial covers the following tasks:

Reviewing the main HTML le A Zendesk app lives in an iframe in the product. Like any iframe app, developing a Zendesk app consists of combining static and dynamic elements in the HTML le to be displayed in the iframe.

Build your rst Support app

Build your rst Support app The ZAT tools created a default HTML le called iframe.html in your assets folder (xr_app/assets/iframe.html). The HTML le de nes the visual elements of your app -- such as the header -- that don't change when the app changes states. Open the iframe.html le in your favorite text editor.

To interact with the Apps framework, the HTML le must import the ZAF SDK v2 library in a script tag: <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>

After importing the SDK, you can use the ZAFClient.init() method to create a Zendesk JavaScript API client: var client = ZAFClient.init();

Build your rst Support app

Build your rst Support app The client provides an interface between your app and a host application such as Zendesk Support. The client gives you a number of methods to interact with the Apps framework. Use the get() and set() methods to read and write data in the framework APIs. Use the invoke() method to run methods in the framework APIs. Use the request() method to make HTTP requests to any REST API. Use the on() method to listen to events. The starter le gives an example:

client.invoke('resize', { width: '100%', height: '200px' });

Testing the app Your app doesn't do much yet but you can already run it using the ZAT tools.

Run your app often to test your latest changes.

I highly recommend using private browsing or the Incognito mode in your browser when testing and developing apps. Your browser may cache certain les used by the app. If a change is not working in your app, the browser might be using an older cached version of the le. With private browsing, les aren't cached.

To enable private browsing in Chrome, click the menu button on the upperright corner of the browser window and select New Incognito Window. In Firefox, click the menu button on the upper-right corner and select New Private Window.

Test your app

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app 1. In your command-line interface, navigate to the xr_app folder. Example if you're in the projects folder: 2. Start the local HTTP server included in the ZAT tools by running the following command: After a moment, a status message appears informing you that a local web server has started up.

3. In your browser's private or incognito window, navigate to any ticket in Zendesk Support. You'll need to sign in as an agent or administrator. The URL should look something like this: https://subdomain.zendesk.com/agent/tickets/123

4. Append ?zat=true to the ticket URL, and reload the page.

The URL should look like this: https://subdomain.zendesk.com/agent/tickets/123?zat=true

Tip: Bookmark the modi ed URL for easy access in the future.

You might also want to create a dummy ticket for app testing.

Build your rst Support app

Build your rst Support app 5. If you're using the Chrome browser, the content of your app may be blocked. Click the lock icon on the left side of the address bar and select Site settings. On the Settings page, scroll to the Insecure Content section and select Allow.

Click the lock icon in the address bar: On the Settings page, allow insecure content: Note: Firefox doesn't block app content but Safari does and has no option to disable blocking. You must use Chrome or Firefox to work with the local zat server.

6. If the app doesn't appear in the sidebar on the right side of the ticket interface, click the Apps button on the upper-right side to display the sidebar.

The Requester X-ray app should appear in the sidebar: Even if the app appears in a Zendesk Support page, it's actually running locally on your machine.

Note: If nothing happens, check for a shield or lock icon in the Address bar. See step 5. If still nothing happens, make sure your Support account is on the Professional or Enterprise plan. Apps are only supported on these plans.

The framework displays a "Requester X-ray" heading that's not de ned in the iframe.html le. The heading is de ned in the manifest.json le in your app's root folder.

Open the manifest.json le in your text editor. The le already contains values you supplied when you created the app les.

Build your rst Support app

Build your rst Support app

The heading is de ned in the name property ("Requester X-ray").

You're free to change or delete all the HTML markup in the iframe.html le.

Review your mockup to identify the changes you need to make:

The review gives you your rst to-do list:

Build your rst Support app

Build your rst Support app lean up the default code, which includes deleting the "Hello, World!"

C heading and moving the JavaScript to another le Add a footer that displays "Report bugs" with a link to your website where users can report bugs.

Add styles to format the footer Replace the default logo in the header Note: You can ignore the main content for now. You'll insert it with a template in the next tutorial in the series.

Build your rst Support app

Build your rst Support app

Cleaning up the default code 1. Start by deleting the <h2> heading in iframe.html.

2. Create a le named main.js in the assets folder.

3. In main.js, add the following function, which contains the JavaScript code in iframe.html: $(function() { var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '200px' }); });

This jQuery statement de nes a self-invoking, anonymous function that runs after the document is loaded in the browser -- in other words, when the DOM is ready.

4. While the code is open in front of you, resize the app by changing the height property in the resize method from 200px to 120px.

5. Back in iframe.html, delete the following <script> tag, which you don't need anymore: <script> // Initialise Apps framework client. See also: // https://developer.zendesk.com/apps/docs/developer-guide/getting_started var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '200px' }); </script>

6. Replace it with the following <script> tag to import your new script: <script src="main.js"></script>

Insert the tag after the <script> tag that references the ZAF SDK to make sure the SDK is loaded in memory before your script runs.

Build your rst Support app

Build your rst Support app 7. Because your script uses jQuery, import jQuery into your iframe.html le: <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

Again, insert the tag before the <script> tag that references your main.js to make sure that jQuery is loaded in memory before your script runs. The body of your iframe.html le should look as follows: <body> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script> <script src="main.js"></script> </body>

8. Save both les.

Adding a footer According to the mockup, the footer should display a "Report bugs" link. The spec speci es that the link should let the user go to your website to report a bug.

Build your rst Support app

Build your rst Support app Add a footer link

1. In the body of the iframe.html le, add the following footer block before the script tags: <footer> <a href="https://mysite.github.io/support" target="_blank">Report bugs</a> </footer>

2. Save the le and click the Reload All Apps icon in Zendesk Support.

In the mockup, the link text in the footer is smaller and uses a di erent typeface. In the next step, you'll add some CSS to start styling your app.

Adding styles By default, ZAT imports the Zendesk Garden stylesheet in the iframe le: <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock@7.0.21,npm/@zendes kgarden/css-utilities@4.3.0">

Build your rst Support app

Build your rst Support app Zendesk Garden is designed to be a common baseline of styles and components between all Zendesk products. The default link above doesn't include all Zendesk Garden assets, only the Garden component CSS and CSS utilities. A complete list of assets you can import is available from the jsDelivr CDN. See https://www.jsdelivr.com/?query=zendeskgarden. The jsDelivr les are npm packages that can also be installed from npm. See https://www.npmjs.com/search?q=zendeskgarden. Use the Zendesk Garden assets if you want your app to match the look and feel of Zendesk products.

You don't have to use Zendesk Garden in your projects. The choice is yours. In this tutorial, you decide to use the popular Bootstrap CSS as the base stylesheet for your app. You'll add any modi cations in a separate le named main.css.

Build your rst Support app

Build your rst Support app 1. In iframe.html, replace the Zendesk Garden <link> tag with the following Bootstrap <link> tag: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorig in="anonymous">

2. Add a link to a stylesheet named main.css after the Bootstrap <link> tag: <link href="main.css" rel="stylesheet">

3. Create a le named main.css in the assets folder.

4. Add the following rule to main.css to style the footer: footer { font-size: 10px; padding-top: 20px; }

5. Save the le and click Reload All Apps in Zendesk Support.

The next task is to change the logo.

Build your rst Support app

Build your rst Support app

Changing the logo By default, the framework displays the image named logo-small.png in your assets folder. To change the logo of the app, just replace the logo-small.png le in the assets folder with your own image.

Your replacement logo-small.png le should meet the following specs: Size: 128x128 pixels. The CSS will scale the image to t the header. The same image will also be used in the Zendesk Support user interface later and scaled accordingly.

File format: PNG-24 with transparency.

Border : None because the corners will be rounded by the CSS. The assets folder also includes a logo.png image. Replace this image with a 320x320 version of your logo. The 320x320 version will be displayed in the Zendesk Marketplace where Support admins can browse for public and private apps to install.

Build your rst Support app

Build your rst Support app Change the logo

1. Right-click each of the following image links and download them into the assets folder in your app folder. If prompted, agree to overwrite the existing version of the les. Â [logo-small.png] Â [logo.png] 2. Click Reload All Apps in Zendesk Support.

If the updated image doesn't appear, you'll need to do a hard refresh of the page in Zendesk Support. See the instructions for Firefox or Chrome on their respective websites. You can also clear your browser cache or paste the URL into another browser.

3. If you're moving to the next tutorial, you can leave the ZAT server running. If you're done for this session, you can shut down the server by switching to your command-line interface and pressing Control+C.

Build your rst Support app

Build your rst Support app In this tutorial, you cleaned up the iframe.html le created by the ZAT tools, moved the JavaScript in a separate le, added a footer, added some styles, and replaced the logo to meet the design requirements of your app.

In the next tutorial, you'll create a template to display the related information about the requester. Continue to Part 3 - Creating and inserting templates.

Have more questions? Submit a request In the previous tutorials in the series, you created the starter les for an app named Requester X-ray and modi ed the HTML le to be iframed into Zendesk Support. The HTML le displays only the header and footer of your app. In this tutorial, you'll create a template to display the information you'll retrieve about the requester, as well as a template to display an error message in case there's a problem retrieving the data. You'll also learn how to insert templates into the app.

Templates are typically the building blocks of an app's user interface. They de ne di erent states, or views, for an application. For example, one template can contains an HTML form for entering search terms, and another template can dynamically list the search results.

You can use any templating engine you like for your apps. For this project, you decide to use Handlebars.js.

Creating and inserting templates This tutorial covers the following tasks: Â

Build your rst Support app

Build your rst Support app

Choosing a templating engine You can use any templating engine -- and whatever version -- you like with your apps. For this project, you decide to use Handlebars.js, one of the most popular templating libraries.

Import the Handlebars library in your app by inserting the following

<script> tag in iframe.html

before the

<script> tag that references your main.js le: <script src="https://cdn.jsdelivr.net/npm/handlebars@4.3.3/dist/handlebars.min.js"></script>

Creating a template for requester information After reviewing the design requirements at Planning the app, you conclude that the app requires a single template to display the information about the requester. The mockup suggests you need a 2-column by 4-row table to show the information.

Build your rst Support app

Build your rst Support app

In Handlebars, you can de ne templates by including them in <script> tags.

Build your rst Support app

Build your rst Support app Create the requester template 1. Open your iframe.html le and add the following <script> tag before all the other <script> tags: <script id="requester-template" type="text/x-handlebars-template"> <table> <tr> <td>Customer:</td> <td>{{name}}</td> </tr> <tr> <td>Tags:</td> <td>{{#each tags}}{{this}} {{/each}}</td> </tr> <tr> <td>Added:</td> <td>{{created_at}}</td> </tr> <tr> <td>Last signed in:</td> <td>{{last_login_at}}</td> </tr> </table> </script>

The tag de nes a template consisting of a 2x4 HTML table for displaying the requester information. The template contains several Handlebars expressions in bold. A Handlebars expression typically consists of a variable inside double curly braces. Example: {{name}} . When the app runs in Zendesk Support, the expressions are replaced by values supplied by a JavaScript data object, which is sometime referred to as a context.

The template uses the {{#each}} helper to display each tag in the array of tags received from the API.

Build your rst Support app

Build your rst Support app 2. Enclose the table row that displays tags with the {{#if}} helper (in bold): ... {{#if tags}} <tr> <td>Tags:</td> <td>{{#each tags}}{{this}} {{/each}}</td> </tr> {{/if}}

If the requester doesn't have any tags, the eld in the UI will be blank. To create a better UI experience, you can hide the entire line with the Handlebars {{#if}} helper. The line will only appear if the requester has tags. The {{#if ...}} helper displays the enclosed content if the speci ed value is truthy. Any array with a length that's anything but zero is truthy. An empty array is falsy so the table row would never get rendered.

Build your rst Support app

Build your rst Support app 3. In the mockup, the data text is green so apply a CSS class called data to each one. (You'll create the style in the next step.) <script id="requester-template" type="text/x-handlebars-template"> <table> <tr> <td>Customer:</td> <td class="data">{{name}}</td> </tr> {{#if tags}} <tr> <td>Tags:</td> <td class="data">{{#each tags}}{{this}} {{/each}}</td> </tr> {{/if}} <tr> <td>Added:</td> <td class="data">{{created_at}}</td> </tr> <tr> <td>Last signed in:</td> <td class="data">{{last_login_at}}</td> </tr> </table> </script>

4. Open the main.css le and add the following style: .data { color: #363; padding-left: 6px; }

The style makes the text green and adds a little padding on the left to separate the text from the labels.

5. Save the iframe.html and main.css les.

Build your rst Support app

Build your rst Support app If you reload the app, nothing happens because you haven't inserted the template in the HTML yet. The next step is to insert the template and then con rm that the insert works.

Build your rst Support app

Build your rst Support app

Inserting the template in your app You insert templates into an element of your choice in the document. You decide to add a <div> tag in your HTML le for inserting templates at runtime.

Only one template at a time can be inserted, but you can switch to a di erent template. For example, you can start by displaying the splash page and then switch to another page after the user clicks a button.

Build your rst Support app

Build your rst Support app

1. In iframe.html le, add the following <div> tag after the opening <body> tag but before the footer: 2. In main.js, add the following function call (in bold) after the resize statement in your self-invoking function: $(function() { var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '120px' }); showInfo(); });

3. showInfo() requester_data The second part passes the data to the template and renders the HTML. The rst line references the <script> tag that contains the template in iframe.html. The second line compiles the template. The third line adds the data to the template and generates the nal HTML. The nal line sets the HTML content of your <div> tag from step 1.

Build your rst Support app

Build your rst Support app 4. Save both les and click Reload All Apps in Zendesk Support. If your ZAT server is not already started, see Testing the app for instructions.

If nothing appears when you reload apps, try a hard refresh of the ticket interface by pressing Shift and the reload button on your browser.

Handlebars inserts the values of your requester_data object in the template and spits out the nal HTML, which the app then sets as the HTML content of the <div id="content"> tag in the iframe.html

le.

The app has a few cosmetic issues. The text is a little too big and the line spacing is a little too tight.

5. To x the issues, add the following style in main.css: #content td { font-size: 12px; padding-top: 2px; }

6. Save all the les and click Reload All Apps in Zendesk Support.

Creating a template for error messages If the app encounters a problem retrieving the user data, you want the user to see an error message about what went wrong.

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app 1. In iframe.html, add the following error template after your requester template: <script id="error-template" type="text/x-handlebars-template"> <p>{{status}} - {{statusText}} error. Please report a bug at the link below.</p> </script>

The template is designed to display HTTP status error messages such as "404 - Not found".

2. main.jsiframe.html 3. Call the function (in bold) from your self-invoking function: $(function() { var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '120px' }); showInfo(); showError(); });

4. To test it, comment out showInfo(); with double forward-slashes, save both les, and reload the app in Zendesk Support.

As with the requester template, Handlebars inserts the values of your error_data object in the template and generates the nal HTML, which the app then sets as the HTML content of the <div id="content"> tag in the iframe.html le.

5. After you're satis ed both templates work as intended, delete both the showInfo(); and showError(); function calls in the self-invoking function. You'll call these functions from a di erent place in the next tutorial.

If you're moving to the next tutorial, you can leave the ZAT server running. If you're done for this session, you can shut down the server by switching to your command-line interface and pressing Control+C.

Build your rst Support app

Build your rst Support app In this tutorial, you created templates to display requester information and an error message. You also learned how to insert the templates into your app. In the next tutorial, you learn how to get the requester's information from the Zendesk API. Continue to Part 4 - Getting data.

Have more questions? Submit a request In the previous tutorials in this series, you designed the user interface for an app named Requester X-ray. In this tutorial, you'll get the information about the requester and display it in the UI. The app will fetch the requester information from the Zendesk REST API. It'll make a request to the Show User endpoint: GET /api/v2/users/{id}.json

An endpoint is a URL where you can get or set information about a resource.

The Show User endpoint includes an id variable, which is a Zendesk Support user ID. Your app needs to supply the ID to the endpoint but it doesn't know it in advance. The ID depends on the ticket the agent is viewing in Zendesk Support.

Let's work out the app logic. First, your app should access the ticket that's currently open in the agent interface and get the requester's user ID. Second, the app should use the ID to request the user information from the Show User endpoint. If the request is successful, the app should show the requester's information in the requester template. If the request fails, the app should show an error message in a di erent template. The app logic looks like this:

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app

Part 4 - Getting data - YOU ARE HERE Calling the framework API The rst step is to get the ID of the requester from the ticket open in the agent interface.

How it works The Apps framework includes a ticket API that gives you access to the ticket data of any ticket open in the agent interface.

The framework's Ticket object doc lists the ticket properties you can retrieve.

Scanning the list in the doc, you nd one in particular, the ticket.requester property, which returns a user object describing the user. Digging into the User object doc, you nd the user.id property, which returns the user's ID as an integer.

Armed with this information, you can use the following path to get the requester's ID: 'ticket.requester.id'

Build your rst Support app

Build your rst Support app In ZAF v2, you use the client.get(path) method to query the Data API. The method doesn't return the values directly. Instead, it returns an object containing a property with a name that corresponds to the API path. Example: { 'ticket.requester.id': 29043265 }

The name string contains periods, so use JavaScript bracket notation to retrieve its value: var client = ZAFClient.init(); client.get('ticket.requester.id').then(function(data) { console.log(data['ticket.requester.id']); // something like 29043265 });

Build your rst Support app

Build your rst Support app Communication between an iframe and its parent page is asynchronous. In other words, the browser doesn't wait for a response to a request. It continues working normally while the request is being handled. You get a callback when the response is received. The .then() method is used to wait for the callback.

The method returns a Promise and takes two arguments: a function to run on success and a function to run on failure. The statement basically means, "make the request, then do one of these two things after you know the outcome." client.get('ticket.requester.id').then( run_this_fn_on_success, run_this_fn_on_failure );

For more information, see Promise.protoype.then() on the Mozilla Developer Network.

Getting the requester's user id In the previous section, you learned you can use the following path to get the requester's user ID: 'ticket.requester.id'

Plug the path in the client.get(path) method to get an answer.

To get the requester's user id

Build your rst Support app

Build your rst Support app 1. In the main.js le, insert the following statement in your self-invoking function: ... client.get('ticket.requester.id').then( function(data) { var user_id = data['ticket.requester.id']; console.log('Requester id is ' + user_id); } );

The statement gets the user id of the requester of the ticket currently open in the agent interface. After getting a successful response, it assigns it to a variable named user_id.

2. Check the id by reloading the app and looking for the console.log message in your browser console.

If your ZAT server is not already started, see Testing the app for instructions.

3. Replace the console.log() statement with the following function call: requestUserInfo(client, user_id);

The call passes the client and id variables to a new function called requestUserInfo() , which you'll create in the next section.

Its job will be to make an HTTP request to the Users API in the Zendesk REST API. You pass client along because the function will need the ZAFClient object to make the HTTP request.

Your self-invoking function so far should look as follows:

Build your rst Support app

Build your rst Support app

$(function() { var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '120px' }); client.get('ticket.requester.id').then( function(data) { var user_id = data['ticket.requester.id']; requestUserInfo(client, user_id); } ); });

Calling the REST API Now that your app can get the requester's ID from a ticket, you can use it to get the requester's "X-ray" user information from the Zendesk API.

De ning the API request You can use the client.request() method to make HTTP requests to external APIs. The method takes an object that de nes the request settings as an argument. Example: var settings = { url:'https://www.example.com/api/resource.json', type:'GET', dataType: 'json' }; client.request(settings).then( function(data) { console.log(data); }, function(response) { console.error(response.responseText); } );

Build your rst Support app

Build your rst Support app The settings are similar to the ones for the jQuery.ajax() method. See the jQuery website for details.

What are the request settings for the X-ray app? The REST API doc for the Show User endpoint provides all the information you need: the url is '/api/v2/users/{id}.json' . For Zendesk endpoints, you don't need to specify the full URL. For other endpoints, specify the full URL, such as 'https://www.example.com/api/resource.json'

the type is GET the dataType is json

Getting the requester's information In the previous section, you learned you can use the following settings to make an HTTP request to the Show User endpoint: var settings = { url:'/api/v2/users/{id}.json', type:'GET', dataType: 'json' };

To get the requester's information

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app 1. Insert the following function in the main.js le: function requestUserInfo(client, id) { var settings = { url: '/api/v2/users/' + id + '.json', type:'GET', dataType: 'json', }; client.request(settings).then( function(data) { console.log(data); }, function(response) { console.error(response); } ); }

If the request is successful, the app displays the data in the console with console.log(data) . If the request is not successful, the app displays the response in red in the console with console.error(response) .

2. Check the results of the request in your browser console. Save the le, reload the app, and look for the console.log message in the console. You should see an object containing the user data.

3. Test the results in case of failure by introducing a typo in one of the request settings. Save the le, reload the app, and look for the console.error message in the console.

Remember to x the typo in your request settings after you're satis ed that the error handling works as intended.

4. In the rst callback function, replace the console.log statement with a call to your showInfo() function: 5. In the second callback function, replace the console.log statement with a call to your showError() function: Your requestUserInfo() function should look as follows:

Build your rst Support app

Build your rst Support app

function requestUserInfo(client, id) { var settings = { url: '/api/v2/users/' + id + '.json', type:'GET', dataType: 'json', }; client.request(settings).then( function(data) { showInfo(data); }, function(response) { showError(response); } ); }

Displaying the requester information In the previous section, you passed the user information to the showInfo() function call after getting a successful response from the Zendesk API. In this section, you take the information and display it in your requester template.

Build your rst Support app

Build your rst Support app 1. In your showInfo() function de nition (not the showInfo() function call), add an argument named data to receive the user data: function showInfo(data) { ...

2. In the showInfo() function, replace the hard-coded values in your requester_data object with the values in your data argument (in bold): var requester_data = { 'name': data.user.name, 'tags': data.user.tags, 'created_at': data.user.created_at, 'last_login_at': data.user.last_login_at };

3. Save the le and click Reload All Apps in Zendesk Support to test your work. If your ZAT server is not already started, see Testing the app for instructions.

Note that the Tags line won't appear if the user doesn't have any tags in their Zendesk pro le.

The dates aren't very user friendly. You decide to spend a few minutes xing the problem.

Formatting the dates You can use standard JavaScript Date methods to format the dates.

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app 1. Add the following helper function to your main.js le: function formatDate(date) { var cdate = new Date(date); var options = { year: "numeric", month: "short", day: "numeric" }; date = cdate.toLocaleDateString("en-us", options); return date; }

The function creates a JavaScript Date object from the date string passed to the function. It formats it using a Date formatting method and returns the modi ed date.

2. Back in your showInfo() function, pass both dates to the helper function (in bold): 'created_at': formatDate(data.user.created_at), 'last_login_at': formatDate(data.user.last_login_at)

3. Save the main.js le and click Reload All Apps in Zendesk Support to test your work.

The dates should be friendlier than before.

Displaying the error message In Calling the REST API above, you passed a response object to the showError() function after getting an error response from the Zendesk API: In this section, you take the information and display it in your error template.

Build your rst Support app

Build your rst Support app 1. Add an argument (in bold) to your showError() function de nition to receive the error data: function showError(response) { ...

2. In the showError() function, replace the hard-coded values in your error_data object with the values in your response object (in bold): var error_data = { 'status': response.status, 'statusText': response.statusText };

3. Test the error page by making a typo in one of the request settings in requestUserInfo() . Save the le and reload the app. Your error template should be displayed.

Remember to x the typo in your request settings after you're satis ed that the error template works as intended.

Code complete!

Congratulations! You developed your rst working ZAF v2 app. The nal version of your main.js le should look like this: Your iframe.html le should look like this:

Build your rst Support app

Build your rst Support app

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anony <link href="main.css" rel="stylesheet"> </head> <body> <div id="content"></div> <footer> <a href="https://mysite.github

Build your rst Support app

Build your rst Support app

io/support" target="_blank">Report bugs

If you like, keep tweaking the app. You can download the completed source code of the app by clicking xr_app.zip.

The nal step involves validating, packaging, and installing the app in your Zendesk Support instance. Continue to Part 5 - Installing the app in Zendesk Support.

Have more questions? Submit a request If you followed along in the series, you should now have a working Zendesk app that you built from scratch. In this tutorial, you'll install the app in your instance of Zendesk Support. The tutorial will also show you how to test and validate the app, and then package it for uploading. esting and validating the app T Packaging the app Uploading and installing the app in Zendesk Support You can only upload and install private apps in Zendesk Support on the Professional or Enterprise plan. If you're on the Essential or Team plan, Zendesk o ers developers a free, sponsored Enterprise account for testing and debugging apps. We ask only that you don't use it to provide actual support. See Request a sponsored test account.

Build your rst Support app

Build your rst Support app

Part 5 - Installing the app in Zendesk Support Testing and validating the app Thoroughly test your app with the ZAT server. For example, open di erent tickets and switch between tickets.

Test the app

Build your rst Support app

Build your rst Support app

Build your rst Support app

Build your rst Support app 1. If your ZAT server is not already started, use the command line to navigate to the xr_app folder and start the server.

2. If your test ticket is not already open, use a browser to navigate to any ticket in Zendesk Support, append ?zat=true to the ticket URL, and reload the page. The URL should look something like this: https://subdomain.zendesk.com/agent/tickets/123?zat=true

3. In your browser's Address bar, click the shield icon on the left (Chrome) or lock icon on the right (Firefox) and agree to load an unsafe script (Chrome) or to disable protection (Firefox). If you don't do this, the browser will block your app.

In Chrome, click Load Unsafe Scripts.

In Firefox, make sure Content Blocking is set to Standard.

Click the gear icon to change it, if necessary.

Note: Safari has no option to disable content blocking. You must use Chrome or Firefox.

4. Try di erent tests.

5. When you're nished, shut down the ZAT server by pressing Control+C. Once you're satis ed the app is stable, run the ZAT validation tool to catch any problems before uploading the app to Zendesk Support. The ZAT validation tool runs the same tests that are run when an app is uploaded to the Zendesk App Market.

Validate your app 1. Use the command line to run the following command in your xr_app folder: Note: If the command prompt isn't displayed, make sure you shut down the ZAT server by pressing Control+C. 2. Fix any problems reported by the tool, then run validate again.

Build your rst Support app

Build your rst Support app

Packaging the app The next step is to package the app in a zip le that can be uploaded to your instance of Zendesk Support.

Package your app Run the following command in your xr_app folder: $ zat package

The ZAT tool packages the app in a zip le and saves it in a tmp folder in your app root folder.

Uploading and installing the app in Zendesk Support At last you're ready to upload and install the app in your instance of Zendesk Support. You need to sign in to Zendesk Support as an admin. You must be on the Professional or Enterprise plan, or you must have a free sponsored account for developers.

Upload and install the app

Build your rst Support app

Build your rst Support app 1. In Zendesk Support, click the Admin icon () in the sidebar, then select Manage from the Apps category.

2. Click Upload Private App in the upper-right corner of the page.

3. Enter the name of your app (Requester X-ray). If you did the tutorial for ZAF v1 and installed the app, use a slightly di erent name for this second version of the app.

4. Click Choose File and select the zip le of your app.

The ZAT tool placed the zip le in the tmp folder in your xr_app folder.

5. Click Upload to upload the app to Zendesk Support, then again after reading the risks and limitations.

6. When prompted, click Install.

Note: If you want to restrict access to your app to just administrators or just agents, click Enable Role Restrictions before installing and choose the users.

When the process is complete, your app should appear as a private app in your list of installed apps on the page.

Your support team is ready to use the app. Open a ticket and click the Apps button in the upper-right corner if the apps are not visible.

If you build an app that other support organizations might nd useful, consider making it publicly available in the Zendesk Marketplace. See Publish your app.

The app you built in this tutorial is a client-side app, meaning all the code runs on the client -- the user's browser. You can also build server-side apps. For a step-by-step guide, see Building a server-side app.

Have more questions? Submit a request

Build your rst Support app

ZenDesk is very helpful for helpdesk

This Zendesk Tutorial PDF eBook is sourced from https://develop.zendesk.com/hc/en-us/articles/360001074868.

This is uno cial eBook, it means it is not created by ZenDesk. Please refer to o cial documentation for the latest tutorial.