Create your own Zendesk popup notifications with SweetHawk apps

Zendesk popup notifications are notices that appear at the top right-hand side of your screen in Zendesk. This is what one might look like:

This article will show you how you can use Zendesk triggers or automations to define when popup notifications should appear (ie. the ticket conditions), what they should say, look like and how long they should appear for. 

PRE-REQUIREMENT: The method defined below will only work if you have one of the paid SweetHawk apps (listed below) installed and made available to all agents on your desk. This is because, unfortunately, it is not possible to popup a notification purely with Zendesk triggers (ie. there needs to be an app that the trigger talks to that pushes the notification through). 

Here are the 3 steps to making it happen...

1. Create an HTTP target

2. Create a trigger

3. Define the who, what, when and how of your popup notification in the trigger. 

Step 1: Creating the HTTP target

The first step is to setup an HTTP target. To do this first click on the cog on the left of the screen, then scroll to the bottom and click on "Extensions". Then at the top right click on "add target" like this:

Select HTTP target from the list:

Name it "Notify". 

For the URL add in this: https://yourhelpdesk.zendesk.com/api/v2/apps/notify.json

(Replace yourhelpdesk with the name of your help desk)'

Set the method to "POST"

...and the content type to "JSON"

Finally, tick the box to enable 'Basic Authentication' and enter in your Zendesk credentials... it should look like this when you're done: 

Once you're happy to go ahead and 'create' the target.

Step 2: Create a Zendesk trigger.

To create the trigger that will make the popup notification appear, click on the cog on the left of the screen, then click on triggers, finally click on 'add trigger' at the top right-hand side like this: 

Under "Meet all of the following conditions" you can put in whatever ticket conditions you want to define for when you want the notification to show. 

Under "Perform these actions" add the rule:

"Notify target" - "Notify" 

You'll then need to enter in some JSON code to define what you want your popup notification to say and do.

But, alas, this leads us onto the final step.

Step 3: Define your notification.

In the JSON body of the "notify" target you will need to enter in some code that looks like this: 

{
 "app_id": 92612,
 "event": "notify",
 "body": "{\"message\":\"Well howdy doody, this is an example popup notification for ticket:{{ticket.id}}\",\"kind\":\"alert\",\"sticky\":true}",
 "agent_id": "{{current_user.id}}"
} 

...But before you get too worried about what this all means, let's break this down into parts.

app_id

Let's start with the "app_id". This is simply the ID of the SweetHawk app you currently have installed that will be taking care of the popup for you. Here is a list of all the SweetHawk apps this method works with: 

Deadline: 92612
Reminders: 92599
Due Time: 86805
Tasks: 86381
Calendar: 77153
Approvals: 102117
Survey: 134574

So in the example above, we have the ID set to 92612; meaning we have the Deadline app installed. If you have a different app installed, say Reminders or Tasks, simply replace the ID with the corresponding ID in the list above.  

event

Next up you can see in the code for "event" its value is set to "notify". This part should not be changed. It is required to tell the app that it will be posting the popup notification.

agent_id

This lets you define which agent(s) you want to send the popup notification to with a Zendesk placeholder. So in the example above, we have it set to the current user of the ticket with {{current_user.id}} (ie. this is whichever agent is updating the ticket). 

However, if we wanted to notify the assignee of the ticket, we could use {{ticket.assignee.id}}.

BUT what if you want to send it to all agents, then simply delete the argument entirely.

body

The body is where you define what the message will say and look like, there is 1 mandatory part and 3 optional parts to the body. These are: 

• message (mandatory) The message is what you want to say and can include Zendesk placeholders 
  
  
• kind (optional) sets the colour of the notification message. The default value is green. Possible values are:
  
  

  value	colour	example
  'notice'	green
  'alert'	yellow
  'error'	red

  
  
  
• duration (optional) the duration (in milliseconds) that the notification is displayed. If you omit the argument, the default value is 4000.
  
  
• sticky (optional) controls whether the notification will stay open until the user intentionally closes it. If you omit the argument, the default value is {sticky: false}. To change it, use {sticky: true}.

Ok, so now you should have everything you need to create your own popup notifications!

Now for a final example... let's say you currently have the SweetHawk Calendar app installed, you want your notification to say "Please look at ticket #{{ticket.id}} urgently" in red, and you want it to be shown to all agents and for it to stay visible until the agent clicks the notification away. This is what the JSON would look like: 

{
 "app_id": 77153,
 "event": "notify",
 "body": "{\"message\":\"Please look at ticket #{{ticket.id}} urgently\",\"kind\":\"error\",\"sticky\":true}",
}

{
 "app_id": 77153,
 "event": "notify",
 "body": "{\"message\":\"Please look at <a href='/agent/tickets/{{ticket.id}}'>Ticket #{{ticket.id}}</a> urgently\",\"kind\":\"error\",\"sticky\":true}",
}