The Iframe app lets agents access additional information from the Zendesk agent interface. This article describes the app and how to install it.
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).
To install the Iframe app
- In Admin Center, click
Apps and integrations 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 X (formerly Twitter) focused? You can embed X’s status page into your Zendesk. Here are the Iframe app settings for the X status page.
- Title: X Status
- Iframe URL: https://api.twitterstat.us
- 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
10 comments
BeaB
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
3
Devan La Spisa
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.
0
KD Gomez
Can react js be used inside iframe.html? And if yes, how to integrate this?
0
John Brunker
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?
0
Greg Katechis
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.
0
John Brunker
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?
0
Raphaël Péguet - Officers.fr
BeaB Hi!
I failed too with Sharepoint, did you find a way please ? :s
Best regards,
Raphaël
0
shelley
The link in the installation for the icon set 1 & 2 doesn't work. Can this please be fixed. Thanks

0
Dane
I have informed our Product Team regarding this behavior. Cheers!
0
Stephen Whyte
Beatrice Bettini I'm struggling with the same issue. We recently migrated from Google Workspace to O365 and all of our documents have been converted and saved to Sharepoint. Now I'm trying to figure out how to integrate them into Zendesk.
If you've figured out a workaround I would very much appreciate some pointers.
0