├── send_notification
    ├── zcli.apps.config.json
    ├── assets
    │   ├── logo.png
    │   ├── logo-small.png
    │   ├── logo.svg
    │   └── iframe.html
    ├── README.md
    ├── translations
    │   └── en.json
    └── manifest.json
├── receive_notification
    ├── zcli.apps.config.json
    ├── assets
    │   ├── logo.png
    │   ├── logo-small.png
    │   ├── logo.svg
    │   └── iframe.html
    ├── README.md
    ├── translations
    │   └── en.json
    └── manifest.json
├── .gitignore
└── README.md


/send_notification/zcli.apps.config.json:
--------------------------------------------------------------------------------
1 | {"app_id":827265}
2 | 


--------------------------------------------------------------------------------
/receive_notification/zcli.apps.config.json:
--------------------------------------------------------------------------------
1 | {"app_id":827259}
2 | 


--------------------------------------------------------------------------------
/send_notification/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/app-notification-send-receive/main/send_notification/assets/logo.png


--------------------------------------------------------------------------------
/receive_notification/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/app-notification-send-receive/main/receive_notification/assets/logo.png


--------------------------------------------------------------------------------
/send_notification/assets/logo-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/app-notification-send-receive/main/send_notification/assets/logo-small.png


--------------------------------------------------------------------------------
/receive_notification/assets/logo-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/app-notification-send-receive/main/receive_notification/assets/logo-small.png


--------------------------------------------------------------------------------
/send_notification/README.md:
--------------------------------------------------------------------------------
1 | # App Notifications Example - Send
2 | 
3 | Demonstration of how to *send* a notification event within a Zendesk ticket sidebar app.
4 | 
5 | Please submit bug reports to [Insert Link](). Pull requests are welcome.
6 | 


--------------------------------------------------------------------------------
/receive_notification/README.md:
--------------------------------------------------------------------------------
1 | # App Notifications Example - Receive
2 | 
3 | Demonstration of how to *receive* a notification event within a Zendesk ticket sidebar app.
4 | 
5 | Please submit bug reports to [Insert Link](). Pull requests are welcome.
6 | 
7 | 


--------------------------------------------------------------------------------
/send_notification/translations/en.json:
--------------------------------------------------------------------------------
1 | {
2 |   "app": {
3 |     "name":"App Notification Example - Send",
4 |     "short_description": "Demo of how to *send* a notification event.",
5 |     "long_description": "This is a very simple sample that demonstrates  \nhow to set up and send a Notify.json REST API call event.",
6 |     "installation_instructions": "Simply click Install."
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/receive_notification/translations/en.json:
--------------------------------------------------------------------------------
1 | {
2 |   "app": {
3 |     "name":"App Notification Example - Receive",
4 |     "short_description": "Demo of how to *receive* a notification event.",
5 |     "long_description": "This is a very simple sample that demonstrates  \nhow to set up a listener for a Notify.json REST API call event.",
6 |     "installation_instructions": "Simply click Install."
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/send_notification/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Demo App for Notifications (Send)",
 3 |   "author": {
 4 |     "name": "Developer Advocacy at Zendesk",
 5 |     "email": "developer-support@zendesk.com",
 6 |     "url": "https://developer.zendesk.com/documentation/"
 7 |   },
 8 |   "defaultLocale": "en",
 9 |   "private": true,
10 |   "location": {
11 |     "support": {
12 |       "ticket_sidebar": {
13 |         "url": "assets/iframe.html",
14 |         "flexible": true
15 |       }
16 |     }
17 |   },
18 |   "version": "1.0.0",
19 |   "frameworkVersion": "2.0"
20 | }


--------------------------------------------------------------------------------
/receive_notification/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Demo App for Notifications (Receive)",
 3 |   "author": {
 4 |     "name": "Developer Advocacy at Zendesk",
 5 |     "email": "developer-support@zendesk.com",
 6 |     "url": "https://developer.zendesk.com/documentation/"
 7 |   },
 8 |   "defaultLocale": "en",
 9 |   "private": true,
10 |   "location": {
11 |     "support": {
12 |       "ticket_sidebar": {
13 |         "url": "assets/iframe.html",
14 |         "flexible": true
15 |       }
16 |     }
17 |   },
18 |   "version": "1.0.0",
19 |   "frameworkVersion": "2.0"
20 | }


--------------------------------------------------------------------------------
/receive_notification/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 3 | 	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
 4 | <path id="Fill-3" d="M1.5,6.1C1.3,5.9,1,6,1,6.4l0,7c0,0.3,0.2,0.7,0.5,0.9l6,3.6C7.8,18.1,8,18,8,17.6l0-7.1c0-0.3-0.2-0.7-0.5-0.9
 5 | 	L1.5,6.1z"/>
 6 | <path id="Fill-5" d="M10.5,17.9c-0.3,0.2-0.5,0-0.5-0.3l0-7c0-0.3,0.2-0.7,0.5-0.9l6-3.6C16.8,5.9,17,6,17,6.4l0,7.1
 7 | 	c0,0.3-0.2,0.7-0.5,0.9L10.5,17.9z"/>
 8 | <path id="Fill-1" d="M2.2,3.7c-0.3,0.2-0.3,0.4,0,0.6l6.2,3.6C8.7,8,9.2,8,9.4,7.9l6.3-3.6c0.3-0.2,0.3-0.4,0-0.6L9.5,0.1
 9 | 	C9.2,0,8.8,0,8.5,0.1L2.2,3.7z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/send_notification/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 3 | 	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
 4 | <path id="Fill-3" d="M1.5,6.1C1.3,5.9,1,6,1,6.4l0,7c0,0.3,0.2,0.7,0.5,0.9l6,3.6C7.8,18.1,8,18,8,17.6l0-7.1c0-0.3-0.2-0.7-0.5-0.9
 5 | 	L1.5,6.1z"/>
 6 | <path id="Fill-5" d="M10.5,17.9c-0.3,0.2-0.5,0-0.5-0.3l0-7c0-0.3,0.2-0.7,0.5-0.9l6-3.6C16.8,5.9,17,6,17,6.4l0,7.1
 7 | 	c0,0.3-0.2,0.7-0.5,0.9L10.5,17.9z"/>
 8 | <path id="Fill-1" d="M2.2,3.7c-0.3,0.2-0.3,0.4,0,0.6l6.2,3.6C8.7,8,9.2,8,9.4,7.9l6.3-3.6c0.3-0.2,0.3-0.4,0-0.6L9.5,0.1
 9 | 	C9.2,0,8.8,0,8.5,0.1L2.2,3.7z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/receive_notification/assets/iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <!--   See Using Zendesk Garden:
 6 |     https://developer.zendesk.com/apps/docs/developer-guide/setup#using-zendesk-garden
 7 |     https://garden.zendesk.com/css-components/bedrock/
 8 |     https://garden.zendesk.com/css-components/utilities/typography/
 9 |    -->
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock@7.0.21,npm/@zendeskgarden/css-utilities@4.3.0"
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@6.4.5/dist/index.min.css"
17 |     />
18 |   </head>
19 |   <body>
20 |     <p id="messageOutput" class="u-regular" style="padding: 20px 0">
21 |       (no messages yet)
22 |     </p>
23 |     <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
24 |     <script>
25 |       // Initialise Apps framework client.
26 |       // This allows requests between your iframed app and the Zendesk UI.
27 |       // See also: https://developer.zendesk.com/apps/docs/developer-guide/getting_started
28 |       const client = ZAFClient.init();
29 | 
30 |       // Size the app's window.
31 |       client.invoke("resize", { width: "100%", height: "200px" });
32 | 
33 |       // This displays the received notification.
34 |       function handleNotification(event) {
35 |         console.log("notification: ", event);
36 |         document.getElementById("messageOutput").classList.add("u-bold");
37 |         document.getElementById("messageOutput").classList.remove("u-regular");
38 |         document.getElementById("messageOutput").innerHTML = event;
39 |       }
40 | 
41 |       // This creates a listener for the event 'api_notification.my_custom_notify_event_name'
42 |       client.on(
43 |         "api_notification.my_custom_notify_event_name",
44 |         function (data) {
45 |           handleNotification(data.body.notification_data);
46 |         }
47 |       );
48 |     </script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | .zat
  2 | */tmp
  3 | 
  4 | # Logs
  5 | logs
  6 | *.log
  7 | npm-debug.log*
  8 | yarn-debug.log*
  9 | yarn-error.log*
 10 | lerna-debug.log*
 11 | .pnpm-debug.log*
 12 | 
 13 | # Diagnostic reports (https://nodejs.org/api/report.html)
 14 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 15 | 
 16 | # Runtime data
 17 | pids
 18 | *.pid
 19 | *.seed
 20 | *.pid.lock
 21 | 
 22 | # Directory for instrumented libs generated by jscoverage/JSCover
 23 | lib-cov
 24 | 
 25 | # Coverage directory used by tools like istanbul
 26 | coverage
 27 | *.lcov
 28 | 
 29 | # nyc test coverage
 30 | .nyc_output
 31 | 
 32 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 33 | .grunt
 34 | 
 35 | # Bower dependency directory (https://bower.io/)
 36 | bower_components
 37 | 
 38 | # node-waf configuration
 39 | .lock-wscript
 40 | 
 41 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 42 | build/Release
 43 | 
 44 | # Dependency directories
 45 | node_modules/
 46 | jspm_packages/
 47 | 
 48 | # Snowpack dependency directory (https://snowpack.dev/)
 49 | web_modules/
 50 | 
 51 | # TypeScript cache
 52 | *.tsbuildinfo
 53 | 
 54 | # Optional npm cache directory
 55 | .npm
 56 | 
 57 | # Optional eslint cache
 58 | .eslintcache
 59 | 
 60 | # Optional stylelint cache
 61 | .stylelintcache
 62 | 
 63 | # Microbundle cache
 64 | .rpt2_cache/
 65 | .rts2_cache_cjs/
 66 | .rts2_cache_es/
 67 | .rts2_cache_umd/
 68 | 
 69 | # Optional REPL history
 70 | .node_repl_history
 71 | 
 72 | # Output of 'npm pack'
 73 | *.tgz
 74 | 
 75 | # Yarn Integrity file
 76 | .yarn-integrity
 77 | 
 78 | # dotenv environment variable files
 79 | .env
 80 | .env.development.local
 81 | .env.test.local
 82 | .env.production.local
 83 | .env.local
 84 | 
 85 | # parcel-bundler cache (https://parceljs.org/)
 86 | .cache
 87 | .parcel-cache
 88 | 
 89 | # Next.js build output
 90 | .next
 91 | out
 92 | 
 93 | # Nuxt.js build / generate output
 94 | .nuxt
 95 | dist
 96 | 
 97 | # Gatsby files
 98 | .cache/
 99 | # Comment in the public line in if your project uses Gatsby and not Next.js
100 | # https://nextjs.org/blog/next-9-1#public-directory-support
101 | # public
102 | 
103 | # vuepress build output
104 | .vuepress/dist
105 | 
106 | # vuepress v2.x temp and cache directory
107 | .temp
108 | .cache
109 | 
110 | # Docusaurus cache and generated files
111 | .docusaurus
112 | 
113 | # Serverless directories
114 | .serverless/
115 | 
116 | # FuseBox cache
117 | .fusebox/
118 | 
119 | # DynamoDB Local files
120 | .dynamodb/
121 | 
122 | # TernJS port file
123 | .tern-port
124 | 
125 | # VSCode/IDEs
126 | .vscode/*
127 | 
128 | # yarn v2
129 | .yarn/cache
130 | .yarn/unplugged
131 | .yarn/build-state.yml
132 | .yarn/install-state.gz
133 | .pnp.*
134 | 
135 | # MacOS
136 | .DS_STORE
137 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Demo App Notify Send/Receive Event
 2 | 
 3 | This repo contains **two apps** which you will load into your Zendesk instance.
 4 | 
 5 | The first app **sends** a notification event, along with some data, to another app. 
 6 | 
 7 | The second app **receives** the event and its data and displays it.
 8 | 
 9 | These apps are a demonstration of the notification event/endpoint used within Zendesk apps.
10 | 
11 | ## Getting started
12 | 
13 | Follow these steps to get a local copy up and running.
14 | 
15 | ### Prerequisites
16 | 
17 | - Zendesk Command Line (ZCLI)
18 | 
19 | [Using Zendesk Command Line](https://developer.zendesk.com/documentation/apps/app-developer-guide/zcli/#installing-and-updating-zcli)
20 | 
21 | ### Installation
22 | 
23 | **1. Clone the repo**
24 | 
25 | ```
26 | git clone https://github.com/zendesk/app-notification-send-receive.git
27 | ```
28 | 
29 | **2. Install the apps**
30 | 
31 | Create the Receive app first:
32 | 
33 | * `cd receive_notifications` 
34 | * Run `zcli apps:create` and enter your admin and test instance information
35 | * Make note of the app_id value displayed in the terminal - you'll need it later
36 | 
37 | Create the Send app:  
38 | 
39 | * `cd send_notifications`
40 | * Navigate to assets/iframe.html and edit the following values
41 | * In `sendNotification()`, enter the Receive Notification `app_id` that you took down earlier
42 | * Replace `YOURSUBDOMAIN` with your own subdomain associated with your Zendesk instance
43 | * Either enter a valid `agent_id` or remove `agent_id` (don't forget to remove the preceding comma from the JSON object if you remove `agent_id`)
44 | * `zcli apps:create`
45 | 
46 | Do a refresh of your Apps and click the Send app's 'send' button. You should see the current date and time show up in the Receive app's display.
47 | 
48 | ### Run apps locally
49 | 
50 | To test either app individually in your local environment, use the following steps.
51 | 
52 | **Run Receive App**
53 | 
54 | 1. Navigate to app directory
55 | 
56 | ```
57 | cd receive_notification
58 | ```
59 | 
60 | 2. Run the app
61 | 
62 | ```
63 | zcli apps:server
64 | ```
65 | 
66 | **Run Send App**
67 | 
68 | 1. Navigate to app directory
69 | 
70 | ```
71 | cd send_notification
72 | ```
73 | 
74 | 2. Run the app
75 | 
76 | ```
77 | zcli apps:server
78 | ```
79 | 
80 | [Testing your Zendesk app locally](https://developer.zendesk.com/documentation/apps/app-developer-guide/zcli/#testing-your-zendesk-app-locally)
81 | 
82 | <!-- Links to relevant resources such as help center articles or dev docs -->
83 | 
84 | ## Additional Resources
85 | 
86 | - [Send Notifications to App](https://developer.zendesk.com/rest_api/docs/core/apps#send-notification-to-app)
87 | - [ZAF Client API](https://developer.zendesk.com/api-reference/apps/apps-core-api/client_api/)
88 | - [Zendesk Apps Guide](https://developer.zendesk.com/documentation/apps/)
89 | - [Apps Support API documentation](https://developer.zendesk.com/api-reference/apps/apps-support-api/introduction/)
90 | 
91 | <!-- Issue reporting with link to repo issues page -->
92 | 
93 | ## Issues
94 | 
95 | You can [create an issue on Github](https://github.com/zendesk/app-notification-send-receive/issues/new),
96 | reach out in our [Developer Community](https://support.zendesk.com/hc/en-us/community/topics),
97 | or report the issue in the [Zendesk Developers Slack group](https://docs.google.com/forms/d/e/1FAIpQLScm_rDLWwzWnq6PpYWFOR_PwMaSBcaFft-1pYornQtBGAaiJA/viewform).
98 | 


--------------------------------------------------------------------------------
/send_notification/assets/iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <!--   See Using Zendesk Garden:
 6 |     https://developer.zendesk.com/apps/docs/developer-guide/setup#using-zendesk-garden
 7 |     https://garden.zendesk.com/css-components/bedrock/
 8 |     https://garden.zendesk.com/css-components/utilities/typography/
 9 |    -->
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock@7.0.21,npm/@zendeskgarden/css-utilities@4.3.0"
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons@7/dist/index.min.css"
17 |     />
18 |     <link
19 |       rel="stylesheet"
20 |       href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@6.4.5/dist/index.min.css"
21 |     />
22 |   </head>
23 | 
24 |   <body>
25 |     <p class="u-regular" style="padding: 20px 0">
26 |       Send a notification and associated data to another app.
27 |     </p>
28 |     <br />
29 |     <button
30 |       id="sendNotify"
31 |       class="c-btn c-btn--small c-btn--pill c-btn--primary"
32 |     >
33 |       Send
34 |     </button>
35 |     <br />
36 |     <p class="u-semibold" id="requestResult" style="color: green"></p>
37 |     <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
38 |     <script>
39 |       // Initialise Apps framework client.
40 |       // See also: https://developer.zendesk.com/apps/docs/developer-guide/getting_started
41 |       const client = ZAFClient.init();
42 | 
43 |       // Size the app's window.
44 |       client.invoke("resize", { width: "100%", height: "200px" });
45 | 
46 |       // Does the work of sending a notification message from this app to another app.
47 |       async function sendNotification() {
48 |         // See https://developer.zendesk.com/rest_api/docs/core/apps#send-notification-to-app for Notify API details.
49 |         const settings = {
50 |           // url: Be sure to replace YOURSUBDOMAIN with the subdomain of your instance.
51 |           url: "https://YOURSUBDOMAIN.zendesk.com/api/v2/apps/notify.json",
52 |           type: "POST",
53 |           contentType: "application/json",
54 |           data: JSON.stringify({
55 |             // app_id: The other app's ID.
56 |             // Replace app_id with the Receive Notification app_id.
57 |             // See https://<yoursubdomain>.zendesk.com/api/v2/apps.json for all app IDs.
58 |             app_id: 827259,
59 |             // event: Used by receiving app to identify event. Notify event listeners are
60 |             // prefixed with 'notifiation.' -- example from the app receiver side:
61 |             // client.on('api_notification.my_custom_notify_event_name', (data) => handleNotification(data));
62 |             event: "my_custom_notify_event_name",
63 |             // body: You can replace with any data/JSON Object here
64 |             body: {
65 |               notification_id: 123,
66 |               notification_data: "Date is currently: " + Date(),
67 |             },
68 |             // agent_id: optional -- if you don't specify it, the notification goes to all agents.
69 |             // If you choose to not specifiy agent_id, comment out/remove from data object and delete trailing comma from body.
70 |             // agent_id: 1245
71 |           }),
72 |         };
73 | 
74 |         // Now we will handle making the request to the Notify API
75 |         try {
76 |           // client.request is the ZAF Client method that dispatches network requests
77 |           await client.request(settings);
78 |           return (document.getElementById("requestResult").innerHTML =
79 |             "Notification successfully sent!");
80 |           // Be sure to implement error handling.
81 |         } catch (error) {
82 |           document.getElementById("requestResult").style.color = "red";
83 |           document.getElementById("requestResult").innerHTML =
84 |             "Unable to send notification at this time.";
85 |           console.log("ERROR: ", error);
86 |         }
87 |       }
88 | 
89 |       // Set up the button click event that will trigger sending the notification.
90 |       const button = document.getElementById("sendNotify");
91 | 
92 |       button.addEventListener("click", sendNotification);
93 |     </script>
94 |   </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------