I’ve been using Freshdesk for a week or two now. It has quite a few limitations — like not being able to use pre-formatted code in Tickets and Topics — but it’s also quite flexible in other ways. As an example, I found a way to make custom ticket fields clickable, so I can quickly visit a customer’s website and lookup information using a WordPress plugin.
In the Freshdesk Admin menu there is an icon for Integrations, which leads to a list of ready-to-use extensions for Freshdesk and a FreshPlugs tab. FreshPlugs are custom widgets you can place on the Tickets and/or Contact pages. The widgets can include custom JavaScript, CSS, and HTML. Unfortunately, since we cannot style the helpdesk interface (only the customer portal interface), CSS has to be added within the widget itself.
Here’s an example widget to open a new browser window/tab using a custom ticket field. I’ve styled the button using WordPress CSS. Additional buttons can be included to perform other actions, such as query a WordPress plugins and/or back-end database.
<style type="text/css" media="screen">
/* button-primary styles from wordpress/wp-includes/css/buttons.css */
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 23px;
height: 24px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 3px;
-webkit-appearance: none;
border-radius: 3px;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wp-core-ui .button-primary {
background-color: #21759b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
background-image: -ms-linear-gradient(top, #2a95c5, #21759b);
background-image: -o-linear-gradient(top, #2a95c5, #21759b);
background-image: linear-gradient(to bottom, #2a95c5, #21759b);
border-color: #21759b;
border-bottom-color: #1e6a8d;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
background-color: #278ab7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
background-image: -ms-linear-gradient(top, #2e9fd2, #21759b);
background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
border-color: #1b607f;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
border-color: #0e3950;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
}
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active {
background: #1b607f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
background-image: -moz-linear-gradient(top, #21759b, #278ab7);
background-image: -ms-linear-gradient(top, #21759b, #278ab7);
background-image: -o-linear-gradient(top, #21759b, #278ab7);
background-image: linear-gradient(to bottom, #21759b, #278ab7);
border-color: #124560 #2382ae #2382ae #2382ae;
color: rgba(255,255,255,0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
/* take the full sidebar width for each button */
.wp-core-ui .button-primary {
margin:5px 0;
width:100%;
}
</style>
<div class="wp-core-ui">
<input class="button-primary" type="button" onClick="window.open('{{ticket.url_to_webpage}}', '_blank');" value="Visit Webpage URL" />
<!-- add other buttons here -->
</div>
