Forums/Community/Support tips & notes

Providing agents with more information using the Sidebar Icon and Text apps

Adam
posted this on September 21, 2012 10:29

Two apps, the Sidebar Icon app and the Text app, let agents access additional information from the Zendesk agent interface. This article describes the two apps and how to install them.

Using the Sidebar Icon app

The Sidebar Icon app is designed to let Zendesk agents quickly flip to a web page within the agent interface and then flip back to their tickets without interrupting their workflow. This can be especially useful if agents use a page to look up things like orders or other data.

Note: The Sidebar Icon app can only be installed in new Zendesk.

You can embed a lot of different web pages in the Zendesk agent interface with the Sidebar Icon app. However, not all pages will be displayed properly and some might be displayed but then exhibit strange behavior. A rule of thumb is to choose web pages that are very simple.

Also, some sites actively prevent other web sites from loading their content in this way. They do this for security reasons so hackers can't pretend to be those companies. When this happens, you’ll see the Sidebar Icon app but there won’t be any content when you click it.

Important: The latest versions of Firefox or Chrome browsers may block web pages from being loaded into Zendesk. To view the pages, agents must click the shield icon in the browser's Address bar and agree to load an unsafe script (Chrome) or to disable protection on the page (Firefox).

Reason: The browser detects and blocks any attempt to request an unsecured HTTP page through a secured HTTPS connection such as Zendesk's. The browser blocks the page because the page can be read or modified by attackers even if the page is served over HTTPS. For more information, see this article on the Firefox website and this post in the Google Chrome forum.

To add a Sidebar Icon app to the agent interface

  1. Click Admin () in the sidebar, then select Apps > Marketplace.
  2. Select Sidebar Icon.

  3. Click Install App in the upper right of the page.
  4. Configure the app:
    • iFrame URL: Required. Put the link to the page you want to display when agents click on the Sidebar Icon app.
    • Inactive Icon URL: An image to be displayed when you are not interacting with the app. Pick something that contrasts with the grey color of the Zendesk panel for visibility.
    • Hover Icon URL: An image to be swapped in when an agent hovers the mouse over the image but hasn’t clicked or done anything yet.
    • Selected Icon URL: An image to be displayed when an agent has clicked on and activated the Sidebar Icon app.
    • Title: Required. A title differentiating the app from other apps.
  5. Click Install.

Examples

Is your business Twitter focused? You can embed Twitter’s status page into your Zendesk. Here are the Sidebar Icon app settings for the Twitter status page.

Make sure your agents know how to set their browser to allow the page to load. See the note in the introduction for more information.

Here are other examples of web pages that can be loaded into the Sidebar Icon app:

Thanks go to http://www.transparentuptime.com/2009/01/comprehensive-list-of-saas-public.html and http://delicious.com/lennysan/healthdashboard for a really comprehensive list of SaaS dashboards. The Zendesk dashboard is available at http://www.zendesk.com/support/system-status.

Community tip from Chris! After much experimentation I discovered that a 35x35px document with 20x20px glyphs will match very nicely to the icons currently displayed in the sidebar.

Using the Text app

The Text app lets you display any text you want in the Apps sidebar in the agent interface. For example, you can display an important message to agents, provide instructions about filling out tickets, or add a link to your retail system.

The Text app also supports data placeholders. Placeholders let you include dynamic data in the text you want to display. This ability is useful if you want to display a link that includes parameters about the current ticket, requester, or user. Example:

http://www.mysite.com/orderlookup.php?customer={{ticket.requester.email}}
Note: The Sidebar Icon app can only be installed in new Zendesk.

To add a Text app to the agent interface

  1. Click Admin () in the sidebar, then select Apps > Marketplace.
  2. Select Text.

  3. Click Install App in the upper right of the page.
  4. Specify a title. Example: "Customer Order Lookup".
  5. Specify the text you want to display.

    If you want to use a link as your text, don’t use <a> tags. Just type out the address you want (don’t forget http:// ) and Zendesk will automatically make it a link.

  6. Click Install.

To view the text, navigate to a ticket and open the Apps sidebar by clicking the Apps button in the upper right.

 

Comments

User photo
Robin Laurén

What i would find really useful is to be able to pass arguments with sidebar icon apps, just like you suggest with the text link apps. I do realize that there may be an out.-of-scope issue here; if there is no ticket visible, you can't really push ticket fields...

As a healthy alternative, having an app like the sidebar icon app which loads like the text app, at the right margin of the tickets, would be really nifty.

I realize that this is something that shuold be done with "proper" apps, but having read through the specs a multitude of times, i still can't wrap my head around how i should be making calls to servers outside our Zendesk instance.

January 30, 2013 12:05
User photo
Chris
deviantart

I'm trying to create some custom Sidebar Icons and would like to know the exact size these images need to be in order to appear pixel perfect. The CSS for these elements seems to be set to several different sizes and percentages so when I save my icons they either blow up or shrink and are not sharp like the icons I created in photoshop. Any tips on what size these should be would be appreciated. 

February 22, 2013 08:07
User photo
Justin Seymour
Zendesk

60px by 40px (png) is a pretty good size. You might have to play with centering a bit within the image itself. 

February 25, 2013 04:38
User photo
Chris
deviantart

Hi Justin, I'm not sure if it's just me but I looked at the source code and saw those dimensions in the CSS and tried that before I contacted you guys. Unfortunately the icons were still shrunken and showed up a blurry if I tried to match the current icon style/size you lot have for Lotus. After much experimentation I discovered that a 35x35px document with 20x20px glyphs will match very nicely to the icons currently displayed in the lotus sidebar. :)

Zendesk note: This information was added to the article.

February 28, 2013 05:21
User photo
Justin Seymour
Zendesk

Excellent! Thanks for sharing! 

February 28, 2013 06:47
User photo
Jennifer Rowe
Zendesk

Chris, thanks so much for reporting back and sharing what you learned. I updated the article with your note as a Community Tip! Thanks!

February 28, 2013 13:14
User photo
Jonathan March
Enthought

1. Click on a sidebar icon, which opens the desired web page in an iFrame.

2. Then click on a link in that web page, opening a different web page in the same iFrame.

3. Use other sidebar icons, views, etc. 

4. Click back on the original sidebar icon. You are still on the secondary web page, not the main one for that icon.

5. That might be desirable at times, but the problem is that there is apparently no way to get back to the original website associated with that sidebar icon, short of reloading the browser tab.

FWIW, this is reminiscent of (though more stubborn than) the fact that when one opens a macro definition (for example), there is no way to cancel and return to the macro list other than by loading a different "manage" page and then returning to macros.

March 21, 2013 16:37
User photo
Jonathan March
Enthought

Added Sidebar Apps in order A,B,C,D. They appear in the Sidebar in order D,A,B,C. Why? Still need a way to reorder Apps.

March 21, 2013 16:47
User photo
Jennifer Rowe
Zendesk

Message received, Jonathan. :)

Will send a reminder to the team.

March 22, 2013 10:49
User photo
Kristian Blackburn

Can you set the order of these yet - as there is no logic to how these are added!

April 26, 2013 03:42
User photo
Maxime
Product Manager

Hi Kristian, check this feature request out : https://support.zendesk.com/entries/23404688-Ability-to-manually-or...

April 26, 2013 09:43
User photo
Josh Smith

Is it possible to get sidebar icons to open into a tab?  We love the functionality, but often the kinds of things we need to add are used regularly, not just bouncing to it to grab something at times.  That would be a fantastic addition!

May 31, 2013 09:50
User photo
Maxime
Product Manager

Hi John

There are no plans to do that currently, but i'll keep it in mind if I hear some more. you could open a feature request in our feature request forums to get some exposure ?

 

June 01, 2013 00:41
User photo
Marci Abraham
nrocnetwork

I'm with Josh about opening in a tab....did this get added as a Feature Request? I'd be happy to go add my support there!

July 02, 2013 10:16
User photo
Maxime
Product Manager

Can you guys tell me a bit more about the use case? Describe to me why you'd need that and how you'd envision it working?

July 02, 2013 13:03
User photo
Eric Hallquist
dropcam

I'm trying to add our Zendesk KB as a sidebar icon (i.e. support.mydomain/forums or /home) but end up with the blank page and just the app title. Does Zendesk block this content? I had it working in my sandbox at one point but it no longer works in either our sandbox or live Zendesk. I do have another sidebar icon app working fine. I have the answer suggestion app but would like to make it easy for new agents to browse the KB if they aren't sure what they are looking for.

Btw, this is a cool feature!

July 17, 2013 12:26
User photo
Brian Leist
serviceautopilot

I really like this App too! But it definitely needs the ability to be able to re-display or have open the original Zendesk screen which was being viewed prior to executing the App. For example, I might be viewing a Ticket and I need to access this other site to look up information.  I have no way to easily get back to the Ticket I was viewing.  I need to go back to my Dashboard or a Ticket view then into the Ticket.  It would be nice if I could just click on the App icon and it closes the website and takes me back into my original screen. 

Optionally, opening the App website in a new tab would also work.  I could bounce between my Ticket and the other website.  Btw, thanks for all the cool Apps.  Just getting started exploring them.

July 24, 2013 07:18
User photo
Julianna

hi all!

i'd added a couple of google docs on the sidebar and they work great! i just don't know where to find the icon images so i can visually differentiate the spreadsheet from the word doc. and, well the icons, can they be found on the google somewhere domain somewhere or do i grab some and host them on one of my domains? i see twitter has it's own, as seen on the instructions.

i googled with no luck. would appreciate the help! thank you!

September 14, 2013 01:28
User photo
Maxime
Product Manager

Hi Julianna,

All you need to do is find any image / icon on the web (just do a google search or go on iconfinder.com) and grab the image direct URL (with .jpg or .png or any other image extension at the end of it)

Then simply go in your App settings and update the URLs for the icons (as shown here: http://cl.ly/ROus)

Good luck

 

September 14, 2013 20:17
User photo
Julianna

Hi Maxime! Sorry I missed your reply. Thank you, I'll do that. :)

September 20, 2013 10:53
User photo
Matt Mickle
jamasoftware.com

How can I order the sidebar Icons appropriately? They seem to be added in a completely random order.

September 30, 2013 15:11
User photo
Emily
Zendesk

Hi Matt, 

 

While it's not currently possible to reorder apps (without deleting them and re-adding them in the order you'd like), we have plans to add this feature. Keep an eye on this Feature Request thread for an update when it's ready!

October 07, 2013 13:51
User photo
Eric Hallquist
dropcam

Hi Emily,

About this note: (without deleting them and re-adding them in the order you'd like)

We tried that and it didn't work, the re-created apps did not appear in the new order. We have a combination of Zendesk apps and third-party apps...does that have an impact on the ordering? For example, the Jira integration was the last one we re-created and it appeared first in our list (not desired).

I'm also following the feature request to allow ordering of apps.

Thanks.

October 07, 2013 17:58
User photo
Emily
Zendesk

Hi Eric, 

 

Thanks for giving the work-around a try. Sounds like you may have encountered an indexing issue if the apps didn't order properly when you re-added them. To avoid this, wait an hour between removing and re-adding the apps. If that still doesn't set them up in the order you want, I'll create a support ticket for you so we can investigate further!

October 08, 2013 10:32
User photo
Jonathan Semones
lucity

Has anything changed for this app recently?  We implemented Zendesk several months ago and I added this app and pointed it to a simple HTML page with links that our agents needed.  It was working fine until this week.  

It finds and displays the button images which are hosted in the same location but when you click on the button the page isn't displayed it just shows the App Title and then a blank white area.  If you navigate directly to the external page in a normal browser window it shows up fine.

- I've tried removing and recreating the app, but it acts the same.

October 09, 2013 06:31
User photo
Matt Mickle
jamasoftware.com

I too am experiencing this behavior, starting this morning, all apps that previously loaded in my sidebar app no longer load. I only get a white screen. 

October 09, 2013 08:07
User photo
Jonathan Semones
lucity

I sort of figured it out.  

I'm running this in Chrome and when I looked in the search bar there was a little shield icon to the right (in firefox it shows up on the left).  Basically since my page is http instead of https it is getting blocked.  I can click the shield and tell it to load the unsecure content.  After doing that the page reloads and everything shows up.

I'm not sure if this is a browser issue or if Zendesk is loading the content differently because I didn't make any changes and it just started doing this last week.

October 09, 2013 08:16
User photo
Maxime
Product Manager

Hey Jonathan, Matt, 

Sorry about that, here is a write up I did on why is this happening: https://support.zendesk.com/entries/27879356-iFrames-issues-Chrome-...

It's indeed a Chrome/Firefox security feature causing the issue you're seeing, let me know if you have any other questions

Maxime

October 09, 2013 17:31
User photo
McCabe Tonna
customware

If anyone knows, is it possible to (easily) make a sidebar icon that when clicked applies a macro? This macro is static and will merely point to a macro so it'll be accessible with 1 click rather than 2 or three. 

October 16, 2013 15:43
User photo
Aaron Ilika
ning

Can we use custom fields in the Text app? I'd like to pull this in the same way I do in other macros.

October 30, 2013 15:38
User photo
Avi Warner
Zendesk
October 31, 2013 17:39
User photo
Aaron Ilika
ning

Hi Avi, I'm using a text-based custom field. The placeholder is {{ticket.ticket_field_22718147}} per the guide, but when I use it in the Text app, it's giving me this output:

ticket.ticket_field_22718147

Macros that use this custom field spit out the correct field information (e.g. www.ning.com). Is this unsupported in the text app? If so, it would be a great feature to add!

Thanks.

November 01, 2013 09:41
User photo
Laura D.
Zendesk

Hi Aaron, 

I think we mislead you, sorry. When I look at the Text app it has support for a limited number of placeholders, which at this time, doesn't include custom ticket fields - see screenshot below for currently supported placeholders. You can find this list if you go to Admin (gear icon) > Apps > Installed > Options > Change Settings. 

Screen_Shot_2013-11-01_at_1.18.17_PM.png

November 01, 2013 13:29
User photo
Aaron Ilika
ning

Laura, thanks—I was worried that was the case. When is "the future?"  :) Or should I file a separate feature request for this? 

November 01, 2013 14:00
User photo
Laura D.
Zendesk

Of course! I don't know when the future will be here... but there is an existing feature request for exactly this: https://support.zendesk.com/entries/23568433-TXT-app-Custom-ticket-.... I'd suggest adding to that one, the more information/activity on it the more likely the Product team will be able to see it and take it into consideration when adding new features. 

November 01, 2013 14:19
User photo
Ben Desmarais
cadence9

I would also like to see the Text app tool support custom field placeholders.

February 21, 2014 02:43
User photo
John West
Honeywell

When using the requester email placeholder {{ticket.requester.email}}, should the output be an active mailto link? I get the correct email address populated, but it is not clickable.

March 27, 2014 09:19
User photo
Emily
Zendesk

Hi John, 

Yes, the {{ticket.requester.email}} placeholder should populate the requester's email address as an active mailto link. To troubleshoot your issue, I'm creating a ticket on your behalf. I'll see you in that ticket shortly.

March 31, 2014 12:01