1 / 60

Zendesk Tutorial PDF

"Zendesk Makes Communicating With Customers Easy Efficient. Sign Up for a Demo. Higher Agent Productivity. Empower Your Customers. Increase Satisfaction.<br>Email, Social, Chat, Talk, Text & Message. All in One Simple Solution.<br>Zendesk is a CRM company that builds support, sales, and customer engagement software designed to help company to manage tickets. Zendesk Tutorial: Improve the Customer Experience.<br>"t

marketertrends
Download Presentation

Zendesk Tutorial PDF

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Build your ?rst Support app HelpDesk

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

  3. Forewords 1. , 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. , 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 3. , 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. , 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. or , These tool will help you to voice over the video you made using other tools mentioned above. As you can see in expensive. For 200 words, the cost around $10. If you use , 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. 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. Builderall Sqribble link with coupon CINDERELLA Viddyoze DoodleOze Speechelo NewsCaster Vocalizer Fiverr , voice over is very Speechelo or  NewsCaster Vocalizer Video Marketing Blaster

  4. 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:   What you'll need   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 . You can review the code as you follow along or check your work. xr_app.zip 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 solution online. Note: Zendesk Apps community , or search for a 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

  5. 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:   the 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

  6. 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:   Automatically create all the necessary ?les and folders for a new app   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 you're done, return here to continue the tutorial. Installing and using the Zendesk apps tools . After 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 folder called . You can use the ZAT tools to accomplish this task. xr_app Requester X-ray in a Create the app ?les Build your ?rst Support app

  7. Build your ?rst Support app Build your ?rst Support app

  8. 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 command (for change directory) to navigate to a child folder. Example: cd To go back up to a parent directory, use space and two periods. Example: Tip: followed by a cd 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 . Zendesk apps tools Installing the 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 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: Enter Build your ?rst Support app

  9. Build your ?rst Support app 4. Open your ?le browser and navigate to the ?les. The folder contains an and as you need when you're building your app, but for now it's all you need to start building an app. and ?le. You can add as many ?les README.md assets translations folder, plus a manifest.json 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 above. Get started: . interface Planning the app Part 2 - Designing the user Have more questions? Submit a request Build your ?rst Support app

  10. 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

  11. Build your ?rst Support app The ZAT tools created a default HTML ?le called folder ( of your app -- such as the header -- that don't change when the app changes states. Open the ?le in your favorite text editor. iframe.html iframe.html in your assets xr_app/assets/iframe.html ). The HTML ?le de?nes the visual elements 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 Zendesk JavaScript API client: method to create a ZAFClient.init() var client = ZAFClient.init(); Build your ?rst Support app

  12. 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 and the framework APIs. Use the method to run methods in the framework APIs. Use the method to make HTTP requests to any REST API. Use the method to listen to . The starter ?le gives an example: on() events methods to read and write data in get() invoke() set() request() 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 upper- right corner of the browser window and select Firefox, click the menu button on the upper-right corner and select . Window New Incognito Window . In New Private Test your app Build your ?rst Support app

  13. Build your ?rst Support app Build your ?rst Support app

  14. Build your ?rst Support app Build your ?rst Support app

  15. Build your ?rst Support app 1. In your command-line interface, navigate to the you're in the folder: projects 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. folder. Example if xr_app 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:// .zendesk.com/agent/tickets/ subdomain 123 4. Append The URL should look like this: ?zat=true to the ticket URL, and reload the page. https:// .zendesk.com/agent/tickets/ subdomain 123?zat=true : Bookmark the modi?ed URL for easy access in the future. You might also want to create a dummy ticket for app testing. Tip Build your ?rst Support app

  16. 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 . On the Settings page, scroll to the Insecure Content section and select . Allow Click the lock icon in the address bar: Site settings On the Settings page, allow insecure content: 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. Note: 6. If the app doesn't appear in the sidebar on the right side of the ticket interface, click the button on the upper-right side to display the sidebar. The Requester X-ray app should appear in the sidebar: Apps Even if the app appears in a Zendesk Support page, it's actually running locally on your machine. 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. Note: The framework displays a "Requester X-ray" heading that's not de?ned in the ?le. The heading is de?ned in the root folder. iframe.html manifest.json ?le in your app's Open the you supplied when you created the app ?les. ?le in your text editor. The ?le already contains values manifest.json Build your ?rst Support app

  17. Build your ?rst Support app The heading is de?ned in the property ("Requester X-ray"). name You're free to change or delete all the HTML markup in the Review your mockup to identify the changes you need to make: iframe.html ?le. The review gives you your ?rst to-do list: Build your ?rst Support app

  18. Build your ?rst Support app   Clean up the default code, which includes deleting the "Hello, World!" 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 You can ignore the main content for now. You'll insert it with a template in the next tutorial in the series. Note: Build your ?rst Support app

  19. Build your ?rst Support app Cleaning up the default code 1. Start by deleting the 2. Create a ?le named 3. In main.js iframe.html heading in in the main.js iframe.html folder. assets . <h2> , add the following function, which contains the JavaScript code in : $(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 property in the resize method from height 5. Back in , delete the following need anymore: 200px <script> to tag, which you don't 120px . iframe.html <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 tag to import your new script: <script> <script src="main.js"></script> <script> Insert the tag SDK to make sure the SDK is loaded in memory before your script runs. after the tag that references the ZAF Build your ?rst Support app

  20. 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 make sure that jQuery is loaded in memory before your script runs. The body of your ?le should look as follows: iframe.html before the tag that references your main.js to <script> <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

  21. Build your ?rst Support app Add a footer link 1. In the body of the the script tags: ?le, add the following footer block before iframe.html <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

  22. Build your ?rst Support app 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 are npm packages that can also be installed from https://www.npmjs.com/search?q=zendeskgarden Zendesk Garden https://www.jsdelivr.com/?query=zendeskgarden . The jsDelivr ?les npm . See . 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 stylesheet for your app. You'll add any modi?cations in a separate ?le named . main.css Bootstrap CSS as the base Build your ?rst Support app

  23. Build your ?rst Support app 1. In Bootstrap iframe.html , replace the Zendesk Garden tag: <link> tag with the following <link> <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 after the Bootstrap main.css tag: <link> <link href="main.css" rel="stylesheet"> 3. Create a ?le named 4. Add the following rule to main.css assets to style the footer: main.css in the folder. 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

  24. Build your ?rst Support app Changing the logo By default, the framework displays the image named folder. To change the logo of the app, just replace the in the folder with your own image. assets logo-small.png logo-small.png in your assets ?le Your replacement ?le should meet the following specs: logo-small.png   same image will also be used in the Zendesk Support user interface later and scaled accordingly.   : PNG-24 with transparency. File format   : None because the corners will be rounded by the CSS. Border Size : 128x128 pixels. The CSS will scale the image to ?t the header. The The 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. folder also includes a assets image. Replace this image with a logo.png Build your ?rst Support app

  25. Build your ?rst Support app Change the logo 1. Right-click each of the following image links and download them into the folder in your app folder. If prompted, agree to overwrite the existing version of the ?les.   [ ] logo-small.png   [ ] logo.png 2. Click in Zendesk Support. Reload All Apps 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 or on their respective websites. You can also clear your browser cache or paste the URL into another browser. assets Firefox Chrome 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

  26. Build your ?rst Support app In this tutorial, you cleaned up the 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. ?le created by the ZAT tools, iframe.html 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

  27. 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 templating libraries. Handlebars.js , one of the most popular 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 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. Planning the app , you conclude that Build your ?rst Support app

  28. Build your ?rst Support app In Handlebars, you can de?ne templates by including them in tags. <script> Build your ?rst Support app

  29. Build your ?rst Support app Create the requester template 1. Open your other ?le and add the following iframe.html <script> tag before all the <script> tags: <script id="requester-template" type="text/x-handlebars-template"> <table> <tr> <td>Customer:</td> <td> </td> </tr> <tr> <td>Tags:</td> <td> </tr> <tr> <td>Added:</td> <td> </td> </tr> <tr> <td>Last signed in:</td> <td> </td> </tr> </table> </script> {{name}} {{#each tags}}{{this}} {{/each}} </td> {{created_at}} {{last_login_at}} The tag de?nes a template consisting of a 2x4 HTML table for displaying the requester information. The template contains several expressions in bold. A Handlebars expression typically consists of a variable inside double curly braces. Example: . 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 Handlebars {{name}} {{#each}} The template uses the the array of tags received from the API. helper to display each tag in Build your ?rst Support app

  30. Build your ?rst Support app 2. Enclose the table row that displays tags with the helper (in bold ): {{#if}} ... {{#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 appear if the requester has tags. The the enclosed content if the speci?ed value is array with a length that's anything but zero is truthy. An empty array is falsy so the table row would never get rendered. {{#if}} helper. The line will only helper displays {{#if ...}} truthy . Any Build your ?rst Support app

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

  32. 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

  33. 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 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. <div> Build your ?rst Support app

  34. Build your ?rst Support app 1. In tag but before the footer: 2. In , add the following function call (in statement in your self-invoking function: iframe.html ?le, add the following tag after the opening <body> <div> main.js ) after the resize bold $(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 contains the template in 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 tag from step 1. <div> <script> tag that iframe.html . The second line Build your ?rst Support app

  35. Build your ?rst Support app 4. Save both ?les and click server is not already started, see 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. Reload All Apps in Zendesk Support. If your ZAT for instructions. Testing the app Handlebars inserts the values of your in the template and spits out the ?nal HTML, which the app then sets as the HTML content of the ?le. iframe.html requester_data object <div id="content"> tag in the 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

  36. Build your ?rst Support app Build your ?rst Support app

  37. Build your ?rst Support app 1. In template: , add the following error template after your requester iframe.html <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 ) from your self-invoking function: bold $(function() { var client = ZAFClient.init(); client.invoke('resize', { width: '100%', height: '120px' }); showInfo(); }); showError(); 4. To test it, comment out ?les, and reload the app in Zendesk Support. As with the requester template, Handlebars inserts the values of your object in the template and generates the ?nal HTML, which the app then sets as the HTML content of the <div id="content"> with double forward-slashes, save both showInfo(); error_data tag in the iframe.html ?le. 5. After you're satis?ed both templates work as intended, delete both the and function calls in the self-invoking function. You'll call these functions from a di?erent place in the next tutorial. showInfo(); showError(); 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

  38. 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 endpoint: Show User GET /api/v2/users/{id}.json An The Show User endpoint includes an 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. endpoint is a URL where you can get or set information about a resource. variable, which is a Zendesk Support id 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

  39. Build your ?rst Support app Build your ?rst Support app

  40. 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 Scanning the list in the doc, you ?nd one in particular, the property, which returns a doc, you ?nd the integer. doc lists the ticket properties you can retrieve. Ticket object ticket.requester object describing the user. Digging into the property, which returns the user's ID as an user.id user User object Armed with this information, you can use the following path to get the requester's ID: 'ticket.requester.id' Build your ?rst Support app

  41. Build your ?rst Support app In ZAF v2, you use the doesn't return the values directly. Instead, it returns an object containing a property with a name that corresponds to the API path. Example: method to query the Data API. The method client.get( path ) { '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

  42. Build your ?rst Support app Communication between an iframe and its parent page is 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 method is used to wait for the callback. The method returns a 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." asynchronous . In .then() Promise client.get('ticket.requester.id').then( run_this_fn_on_success, run_this_fn_on_failure ); For more information, see Network. Promise.protoype.then() on the Mozilla Developer 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 method to get an answer. client.get( path ) To get the requester's user id Build your ?rst Support app

  43. Build your ?rst Support app 1. In the function: ?le, insert the following statement in your self-invoking main.js ... 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 for instructions. Testing the app 3. Replace the statement with the following function call: console.log() requestUserInfo(client, user_id); The call passes the client and id variables to a new function called , 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 function will need the ZAFClient object to make the HTTP request. requestUserInfo() client along because the Your self-invoking function so far should look as follows: Build your ?rst Support app

  44. 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 APIs. The method takes an object that de?nes the request settings as an argument. Example: method to make HTTP requests to external client.request() 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

  45. Build your ?rst Support app The settings are similar to the ones for the for details. website method. See the jQuery jQuery.ajax() What are the request settings for the X-ray app? The User endpoint provides all the information you need: REST API doc for the Show   the specify the full URL. For other endpoints, specify the full URL, such as 'https://www.example.com/api/resource.json'   the is type GET   the is dataType json url is . For Zendesk endpoints, you don't need to '/api/v2/users/{id}.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

  46. Build your ?rst Support app Build your ?rst Support app

  47. 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 . If the request is not successful, the app displays the response in red in the console with . console.error(response) console.log(data) 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 function: showInfo() 5. In the second callback function, replace the console.log statement with a call to your function: showError() Your function should look as follows: requestUserInfo() Build your ?rst Support app

  48. 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 function call after getting a successful response from the Zendesk API. showInfo() In this section, you take the information and display it in your requester template. Build your ?rst Support app

  49. Build your ?rst Support app 1. In your an argument named function de?nition (not the to receive the user data: data function call), add showInfo() showInfo() function showInfo( ... data ) { 2. In the requester_data function, replace the hard-coded values in your object with the values in your showInfo() argument (in bold ): data var requester_data = { 'name': 'tags': 'created_at': 'last_login_at': }; data.user.name data.user.tags data.user.created_at data.user.last_login_at , , , 3. Save the ?le and click work. If your ZAT server is not already started, see instructions. Note that the Tags line won't appear if the user doesn't have any tags in their Zendesk pro?le. in Zendesk Support to test your Reload All Apps Testing the app for 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

  50. Build your ?rst Support app Build your ?rst Support app

More Related