Skip to content

Instantly share code, notes, and snippets.

@bmease
Last active Feb 15, 2017
Embed
What would you like to do?
A dashing widget that displays tickets for Freshdesk.com

Description

A dashing widget that displays tickets for Freshdesk.com

  • Displays unassigned tickets subject and time.
  • Displays Ticket counts assigned to Agents.
  • Time for each ticket changes color depending on age.

Preview

Freshdesk Dashing Widget

Usage

Add the widget HTML to your dashboard

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">               
      <div data-id="freshdesk" data-view="Freshdesk" data-title="Freshdesk Tickets"></div>
    </li>
  1. Create a directory called freshdesk under widgets and copy freshdesk.coffeescript, freshdesk.html, freshdesk.scss into the directory.

  2. Copy freshdesk.rb into your jobs folder.

  3. Modify the FRESHDESK_URL and FRESHDESK_USERNAME in the freshdesk.rb file.

  4. Add freshdesk-background.png to the assets/images folder.

More Info

Freshdesk API Documentation

clamp = (value) ->
return Math.max(0, Math.min(Math.floor(value), 255))
gradient = (value) ->
if value > 1 then value = 1
start = [255, 255, 255]
end = [255, 0, 0]
finalColor = []
for startChannel, i in start
finalColor.push(startChannel * (1-value) + end[i])
return (clamp(x) for x in finalColor)
class Dashing.Freshdesk extends Dashing.Widget
ready: ->
onData: (data) =>
Batman.mixin Batman.Filters,
prettyTime: (dateStr) ->
now = new Date()
date = new Date(dateStr)
elapsed = now.getTime() - date.getTime()
# Percent passed 1 day
value = elapsed / (24 * 60 * 60 * 1000)
color = gradient(value)
days = Math.floor(elapsed / 24 / 60 / 60 / 1000)
hours = Math.floor(elapsed / 60 / 60 / 1000)
minutes = Math.floor(elapsed / 60 / 1000)
seconds = Math.floor(elapsed / 1000)
if days >= 1
plural = if days is 1 then '' else 's'
return "<span style='color: rgb(#{color});'>#{days} day#{plural} ago</span>"
if hours >= 1
plural = if hours is 1 then '' else 's'
return "<span style='color: rgb(#{color});'>#{hours} hour#{plural} ago</span>"
if minutes >= 1
plural = if minutes is 1 then '' else 's'
return "<span style='color: rgb(#{color});'>#{minutes} minute#{plural} ago</span>"
if seconds >= 0
return "Now"
return dateStr
firstName: (name) ->
name.split(' ')[0]
<h1 class="title">Unassigned Tickets</h1>
<ol>
<li data-foreach-item="items" data-showif="item.unclaimed">
<span class="subject" data-bind="item.subject | truncate 32"></span>
<span class="time" data-bind="item.created_at | prettyTime | raw"></span>
</li>
</ol>
<h1 class="title">Agents</h1>
<table>
<tr>
<th class="name" data-foreach-agent="agents">
<span data-bind="agent.name | firstName"></span>
</th>
</tr>
<tr>
<td class="count" data-foreach-agent="agents">
<span data-bind="agent.count"></span>
<span data-bind-id="agent.name"></span>
</td>
</tr>
</table>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
# Enter your freshdesk url and api key.
FRESHDESK_URL = 'example.freshdesk.com'
FRESHDESK_VIEW_URL = '/helpdesk/tickets.json?filter_name=all_tickets'
FRESHDESK_USERNAME = 'SECRET_API_KEY'
# Password is blank
FRESHDESK_PASSWORD = ''
FRESHDESK_IGNORE_USERS = ['No Agent', ]
SCHEDULER.every '60s' do
http = Net::HTTP.new(FRESHDESK_URL, 443)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
http.start() {|http|
req = Net::HTTP::Get.new(FRESHDESK_VIEW_URL)
req.basic_auth FRESHDESK_USERNAME, FRESHDESK_PASSWORD
response = http.request(req)
json = JSON.parse(response.body)
items = []
agents = {}
for ticket in json
if ticket['status'] != 5
unclaimed = if ticket['responder_id'] then false else true end
obj = { subject: ticket['subject'], created_at: ticket['created_at'], unclaimed: unclaimed }
items << obj
end
agent = agents[ticket['responder_name']]
if agent
agent['count'] = agent['count'] + 1
else
agents[ticket['responder_name']] = {}
agents[ticket['responder_name']]['name'] = ticket['responder_name']
agents[ticket['responder_name']]['count'] = 1
end
end
agents_list = []
agents.each do |key, value|
obj = { name: value['name'], count: value['count'] }
# Show only agents that exist
if !FRESHDESK_IGNORE_USERS.include?(value['name'])
agents_list << obj
end
end
send_event('freshdesk', { items: items, agents: agents_list })
}
end
$background-color: #16a085;
$background-color-name: #067660;
$background-color-count: #4d4b4b;
.widget-freshdesk {
background: url('/assets/freshdesk-background.png') no-repeat;
background-color: $background-color;
background-position: center;
color: #ddd;
ol {
list-style-type: none;
font-size: 1.5em;
font-weight: bold;
}
.title {
font-size: 2em;
font-weight: bold;
color: #fff;
}
table {
border-collapse: separate;
border-spacing: 6px;
border-color: white;
}
.name {
background-color: $background-color-name;
font-size: 1.5em;
font-weight: bold;
}
.count {
background-color: $background-color-count;
font-size: 1.5em;
font-weight: 900;
}
}
@justinreeves00

This comment has been minimized.

Copy link

@justinreeves00 justinreeves00 commented Feb 15, 2017

I can not get this to display information. i think Freshdesk changed their API is there any way you could check and see if that has affected this widget?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment