screenshots and docs

Author: physik932

README.md

@@ -17,14 +17,13 @@ A Zendesk App to help you generate links for agents.
 ## Usage 
 ### Deploying from ZIP
 
-To quickly install this application, navigate to the latest releases and download the attached `app-<DATE>.zip`.  You can upload this to Zendesk 
 Attached to the latest release is the `app-<DATE>.zip` asset that can be [uploaded to your Zendesk instance](https://developer.zendesk.com/documentation/apps/getting-started/uploading-and-installing-a-private-app/#uploading-and-installing-a-private-app-in-zendesk):
 
-1. In Admin Center, click the Apps and integrations icon () in the sidebar, then select Apps > Zendesk Support apps.
-2. Click Upload App.
-3. Enter a Name for the app.
-4. Click Choose file and select the zip file for your private app.
-5. Click Save.
+1. In Admin Center, click the Apps and integrations, click Zendesk Support Apps.
+2. Click Upload private app.
+3. Enter the App Name.
+4. Click Choose File and select the zip file.
+5. Click Upload.
 6. In the pop-up box that appears, click Agree and upload this App.
 7. When prompted, click Install.
 
@@ -38,36 +37,40 @@ Once the app is uploaded, you can Install it to the configured areas of Zendesk.
 
 ### Configuring the JSON Array of URLs
 
-The following is an example of what can be entered into this app's settings:
+To configure the URL buttons, you must supply a JSON array of URLs with `title` and `url` properties.  Here is an example:
 
 ```javascript
 [
-  {
-    "title": "First Title",
-    "url": "http://example.com/?name={{ticket.requester.name}}"
-  },
-  {
-    "title": "Second Title (with custom field)",
-    "url": "http://example.com/?custom={{ticket.custom_field_424242}}"
-  }
+    {
+        "title": "Facebook",
+        "url": "https://www.facebook.com"
+    },
+    {
+        "title": "Instagram",
+        "url": "https://www.instagram.com"
+    },
+    {
+        "title": "Twitter",
+        "url": "https://www.twitter.com"
+    },
+    {
+        "title": "LinkedIn",
+        "url": "https://www.linkedin.com"
+    },
+    {
+        "title": "TikTok",
+        "url": "https://www.tiktok.com"
+    }
 ]
-
-```
-This example will generate the following HTML inside the app:
-```html
-<ul>
-  <li>
-    <a href="http://example.com/?name=Phillip_J_Fry">First Title</a>
-  </li>
-  <li>
-    <a href="http://example.com/?custom=customValue">Second Title (with custom field)</a>
-  </li>
-</ul>
 ```
 
-### Sample Placeholders
+This will yield the following display:
+
+![social_media_sites](./assets/screenshot-0.png)
 
-Below is a list of just a few of the available object properties available as placeholders.  To see the full list of fields, please see the [Zendesk Apps Reference - API Reference](https://developer.zendesk.com/api-reference/apps/introduction/).  For example, you can use object properties available in [all locations](https://developer.zendesk.com/api-reference/apps/apps-support-api/all_locations/) and object properties available in the [ticket sidebar](https://developer.zendesk.com/api-reference/apps/apps-support-api/ticket_sidebar/) .
+### Using Zendesk Object Properties
+
+Below is a list of just a few of the available object properties available as placeholders. To see the full list of fields, please see the [Zendesk Apps Reference - API Reference](https://developer.zendesk.com/api-reference/apps/introduction/). For example, you can use object properties available in [all locations](https://developer.zendesk.com/api-reference/apps/apps-support-api/all_locations/) and object properties available in the [ticket sidebar](https://developer.zendesk.com/api-reference/apps/apps-support-api/ticket_sidebar/).
 
 ```
 * {{ticket.id}}
@@ -86,7 +89,47 @@ Below is a list of just a few of the available object properties available as pl
 * {{currentUser.email}}
 ```
 
+Here is an example configuration of a URL button that has the email of the user:
+
+```javascript
+[
+    {
+        "title": "Email User",
+        "url": "mailto:{{ticket.requester.email}}"
+    }
+]
+```
+
+This generates the following button:
+
+We can highlight this button and see the following URL:
+
+![screenshot](./assets/screenshot-1.png)
+
+### Using Custom Fields in URLs
+
+Zendesk allows for [custom fields](https://support.zendesk.com/hc/en-us/articles/4420210121114-Using-custom-fields) to be added in various places like Users, Tickets, and Organizations for Zendesk Admins.  These custom fields can be used in your URLs as well.  
+
+For example, let's say we use the custom field for the customer like `Issue Topic`, a drop down where they pick their issue type.  When a custom field is created, you will see a column for the `Field ID` generated and you can copy it for the URL. If this object has an ID of `1234567890`, it can be used in a URL like so:
+
+```javascript
+[
+  {
+    "title": "Customer Related Issues",
+    "url": "http://example.com/issues?customer_id={{ticket.requester.id}}&issue_type={{ticket.custom_field_360371540635070}}"
+  }
+]
+```
+
+Given an issue type of "new feature", this would generate a URL with the values set:
+
+![customer_related_issues](./assets/screenshot-2.png)
+![customer_related_issues_url](./assets/screenshot-3.png)
+
+An important note here is that URLs generated by custom fields are not updated dynamically.  If the custom field is on the Agent side for example and is updated, the page will need to be refreshed to update the URLs.
+
 ## Issues
+
 To submit an issue, please follow the [available template](/.github/ISSUE_TEMPLATE.md).
 
 ## Contribution