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.
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
- In Admin Center, click the Apps and integrations icon
(
) in the sidebar, then select Apps > Channel apps.
- Click Zendesk Marketplace and search for "Iframe".
- Click the Iframe app icon.
- Click Install App in the upper right of the page.
- 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.
- 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:
- Twilio status: http://status.twilio.com/
- Salesforce.com status: http://trust.salesforce.com/trust/status/
- Google App Engine: http://code.google.com/status/appengine
- Skype: http://heartbeat.skype.com
- Google Analytics: http://www.google.com/analytics/status#hl=en
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}}
To add a Text app to the agent interface
- In
Admin Center, click the Apps and integrations icon
(
) in the sidebar, then select Apps > Channel apps.
- Click Zendesk Marketplace and search for "Text".
- Click the Text app icon.
- Click Install App in the upper right of the page.
- Specify a title. Example: "Customer Order Lookup".
- 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.
- Click Install.
To view the text, navigate to a ticket and open the Apps panel by clicking the Apps button in the upper right.
8 Comments
Hello,
is there anyone trying to give agents view on SharePoint Sites or documents? The 'refusing connection' error appears on our side.
Anyone managed to solve this through security settings on SharePoint Site? Is the APP working after this?
Thanks
Hello @...,
Appreciate you letting us know about the nefarious link! We've gone ahead and resolved the issue, but it always helps when the community lets us know when these links break so we can fix them asap.
Best regards.
Can react js be used inside iframe.html? And if yes, how to integrate this?
We're looking to utilize this to embed Sprout videos in various help center articles but not having any luck. What would be the proper input for the iFrame URL field in the app setup?
Hi John! Apologies if I'm misunderstanding, but we do not currently have any way of using a ZAF app in the help center. If you're looking to embed videos in your help center, take a look at this portion of our article on the process for that.
Thanks for the quick response Greg. I have tried inserting the code snippet via source code with no luck.
I had installed this app as I thought it was required to enable this type of embedding. https://www.zendesk.com/marketplace/apps/support/1/iframe/
In the setup for this it asks for the iFrame URL. We are trying to embed Sprout videos. I've attached a screen shot.
Here is an example embed code.
<iframe class='sproutvideo-player' src='https://videos.sproutvideo.com/embed/069edbba161ae3c48f/8ad62c58bd12dd9e' width='630' height='354' frameborder='0' allowfullscreen referrerpolicy='no-referrer-when-downgrade' title='Video Player'></iframe>
Any ideas?
Bea B Hi!
I failed too with Sharepoint, did you find a way please ? :s
Best regards,
Raphaël
The link in the installation for the icon set 1 & 2 doesn't work. Can this please be fixed. Thanks

Please sign in to leave a comment.