Hi there,

Since I got appointed as Community Moderator in January, I realized that I do not have one single article in the Zendesk Community. I usually prefer to answer stuff than asking questions here :)

However, I think for almost 2 years now we have a pretty unique setup in our office in Vienna, which I want to finally show some other Zendesk nerds here.

This will be quite a long topic, so I will update it on a weekly basis until we get the final result.

Finished Project

Based on the current support ticket backlog in our Zendesk account, my desk is colorized with a LED light strip.

🔴   🟠   🔵   🟢

All in real-time, you just need some Triggers, a bit of coding experience, and Philips Hue Bridge + LED bulb/strip.

💡 Over the course of the next few weeks, I will show you how 💡 (2020-09-01)
     - Added Script and Zendesk How-to (2020-09-16)

How to get there

What do you need?

• Philips Hue
  - Android / iOS App
  - Bridge
  - Any Lamp/Strip which supports color
  
  
• Google Account
  
  
• IFTTT Account

How to setup Zendesk

For this we need an existing or new custom view, a trigger, and an extension.

View

Simply use an existing view of your backlog, or create a new one with your own definition how the light should react.

Then note down its ID, we will need this soon.

Trigger

Extension

How to setup the server

1) Go to script.google.com

2) New Project

3) Paste this code

/* The script should work on its own,
/* simply edit the variables below to your own stuff */
/* ################################################# */

// fetch new key here by clicking on (Documentation)
// https://ifttt.com/maker_webhooks
var ifttt_key = "ACCESS_KEY";

// insert your zendesk view ID
var backlog_view = "VIEW_ID";
// insert your zendesk subdomain
var zendesk_subdomain = "SUBDOMAIN"
// insert your zendesk API key - BASE 64 encoded
var zendesk_apikey_base64 = "API_KEY_BASE_64"

// insert the thresholds for your colors.
var threshold_green = 1;
var green = "green";
var threshold_blue = 2;
var blue = "blue";
var threshold_yellow = 3;
var yellow = "yellow";
var threshold_orange = 4;
var orange = "orange";
var red = "red";
var error = "error";

//insert the busy hours of your office
var begin_workday = 8;
var end_workday = 16;

/* ################################################### */

//─────────────────────────────────────────────────
/* ##### API ##### */
/* https://developers.google.com/apps-script/guides/web */
function doGet(e) {
  setLightStrip();
  return HtmlService.createHtmlOutput('<b>GET</b> <br> Webhook received <br>'); //required for whole script to work
}

function setLightStrip(){
  
  var count;
  var color;
  
  count = getViewCount(backlog_view);  
  
  if(count < threshold_green){
    color = green;
  }else if(count < threshold_blue){
    color = blue;
  }else if(count < threshold_yellow){
    color = yellow;
  }else if(count < threshold_orange){
    color = orange;
  }else if(count >= threshold_orange){
    color = red;
  }else{
    color = error;
  }
  
  setLight(color);
  return;
}

function setLight(color){
  if(busyHours()){
    ifttt(color);
    Logger.log(color);
  }else{
    Logger.log("Office not busy.")
  }
}

//─────────────────────────────────────────────────


//IFTTT
function ifttt(target){
  options = {
    'method' : 'post',
  };
  UrlFetchApp.fetch("https://maker.ifttt.com/trigger/" + target + "/with/key/" + ifttt_key);
}

//Zendesk
function getViewCount(id){
  // GET Zendesks view count  
  var headers = {
    "Accept":"application/json", 
    "Content-Type": "application/json",
    "Authorization":"Basic " + zendesk_apikey_base64
  };
  
  var options = {
    'method' : 'get',
    "headers": headers,
    'contentType': 'application/json',
    // Convert the JavaScript object to a JSON string.
    //'payload' : JSON.stringify(data)
  };
  
  var response = UrlFetchApp.fetch("https://" + zendesk_subdomain + ".zendesk.com/api/v2/views/" + id + "/count.json", options);
  
  var data = JSON.parse(response.getContentText());
  Logger.log(data.view_count.value);
  return data.view_count.value; 
}

//Helper functions
function busyHours(){
  var now = new Date();
  if(now.getDay() >= 1 && now.getDay() <= 5 && now.getHours() >= begin_workday && now.getHours() <= end_workday){
    return true; 
  }else{
    return false; 
  }
}

4) Publish => Deploy => Web App

5) If prompted, allow access to your Google Account.

How to setup IFTTT

TBD

How to setup Philips

1) Create a new room with the Hue app and add the lights you want to control

2) Set up those 5 colors from the code.

3) It should look somehow like that

How to stitch everything together

There's not really a good order to do all that stuff, since there are some requirements within each other. e.g. Zendesk Extension needs URL of Server.
However, I think this is the best one:

1. Set up Philips Hue
2. Create IFTTT recipes
3. Set up Zendesk
   - View
   - Trigger
4. Set up Server
5. Set up Zendesk again
   - Extension
6. Finish Server and deploy