Providing agents with more information using the Iframe and Text apps

Note: As of March 2015, the Sidebar Icon app was renamed the Iframe app.

Two apps, the Iframe 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 Iframe app

An iframe is an HTML element that lets you nest one web page in another web page. The Iframe app is designed to let Zendesk agents quickly flip to a web page in 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 Iframe app was formerly called the Sidebar Icon app. The app can only be installed in new Zendesk.

You can embed a lot of different web pages in the Zendesk agent interface with the Iframe 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 Iframe 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 the Iframe app to the agent interface

  1. Click Manage () in the left nav bar, then select Marketplace from the Apps category.
  2. Search for "Iframe".
  3. Click the Iframe app icon.

  4. Click Install App in the upper right of the page.
  5. Configure the app:
    • Iframe URL: Required. Put the link to the page you want to display when agents click on the Iframe app.
    • Inactive Icon URL: An image to be displayed when you're 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 Iframe app.
    • Title: Required. A title differentiating the app from other apps.
  6. Click Install.

Examples

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

  • Title: Twitter Status
  • Iframe URL: http://status.twitter.com/
  • Inactive Icon URL: https://twitter.com/images/resources/twitter-bird-light-bgs.png
  • Hover Icon URL: https://twitter.com/images/resources/twitter-bird-dark-bgs.png
  • Selected Icon URL: https://twitter.com/images/resources/twitter-bird-light-bgs.png

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 Iframe 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 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 panel 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 Text app can only be installed in new Zendesk.

To add a Text app to the agent interface

  1. Click Manage () in the left sidebar, then select Marketplace from the Apps category.
  2. Search for "Text".
  3. Click the Text app icon.

  4. Click Install App in the upper right of the page.
  5. Specify a title. Example: "Customer Order Lookup".
  6. 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.

  7. Click Install.

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

Have more questions? Submit a request

Comments

  • Avatar
    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.

  • Avatar
    Chris

    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. 

  • Avatar
    Justin

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

  • Avatar
    Chris

    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.

  • Avatar
    Justin

    Excellent! Thanks for sharing! 

  • Avatar
    Jennifer Rowe

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

  • Avatar
    Jonathan March
    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.

  • Avatar
    Jonathan March

    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.

  • Avatar
    Jennifer Rowe

    Message received, Jonathan. :)

    Will send a reminder to the team.

  • Avatar
    Kristian Blackburn

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

  • Avatar
    Maxime
  • Avatar
    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!

  • Avatar
    Maxime

    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 ?

     

  • Avatar
    Marci Abraham

    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!

  • Avatar
    Maxime

    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?

  • Avatar
    Eric Hallquist

    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!

  • Avatar
    Brian Leist

    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.

  • Avatar
    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!

  • Avatar
    Maxime

    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

     

  • Avatar
    Julianna

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

  • Avatar
    Matt Mickle

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

  • Avatar
    Emily

    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!

  • Avatar
    Eric Hallquist

    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.

  • Avatar
    Emily

    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!

  • Avatar
    Jonathan Semones

    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.
  • Avatar
    Matt Mickle

    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. 

  • Avatar
    Jonathan Semones

    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.

  • Avatar
    Maxime

    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-and-FFox-security-updates

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

    Maxime

  • Avatar
    McCabe Tonna

    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. 

  • Avatar
    Aaron Ilika

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

Please sign in to leave a comment.