In some cases, there may be content you want to display in Uberflip that can’t be imported into your Hub. This may be externally hosted reports, web pages, or documents that need to live elsewhere.
The iFramer app gives you a simple way to iFrame any externally hosted page into an item. Simply provide the URL and it will seamlessly display the contents in an iFrame when the Item is viewed on your Hub.
- Easily iFrame any URL into an Item: enable iFramer for an individual Item by simply adding a special tag to it. Items enabled with iFramer will seamlessly display the contents of that Item's canonical URL in an iFrame when the Item is viewed on your Hub.
- Seamlessly Display Office Documents and PDFs: If an Item's canonical URL ends with a Microsoft Office file extension (.docx, .xlsx, etc.), iFramer will display the document in-browser using Office Web Viewer. If the URL goes to a PDF document, iFramer will display it using Google PDF Viewer.
- On any Hub where you want to use this app, you must enable the setting Include Item tags for Custom Code. You can find this setting under Hubs > Hub Options > Advanced > Content Experience: to enable, check the box next to Include Item tags for Custom Code.
- If your Hub uses Front End V2, you must also install the Compatibility Pack to use this app. If you are not sure if your Hub uses Front End V2, see this article for help
You can configure settings for this app at both the account level and the Hub level:
- Settings at the account level will apply across all Hubs within your Uberflip account
- Settings at the Hub level will apply to that Hub only, and will override any existing account level settings for that Hub.
For instructions on how to configure account level and Hub level settings for Uberflip Marketplace apps, see this help article.
You can configure the following settings for this app at both levels:
Toggle this switch on (green) or off (grey) to turn iFramer on or off. Turning the app on will only have an effect once you add the special tag to your Items (see below).
Dropbox App Key
Enter your Dropbox App Key if you want to use iFramer to display content from Dropbox. See the "How To Use" section below for details on how to obtain a Dropbox App Key.
If you do not enter a Dropbox App Key and use iFramer to display content hosted on Dropbox, the iFrame will show a "View File on Dropbox" link rather than the content itself.
Embed the iFrame
Toggle this switch on (green) if you want the iFrame to be displayed within standard Uberflip Item elements. If enabled, the Item's title, author, and publication date (if not hidden) will be displayed above the iFramed content, and the Item's body content and the "About the Author" box will be displayed below.
Leave this setting off (grey) if you want to use the default behaviour, where only the iFramed content is displayed, and the Uberflip Item elements are hidden.
How To Use
iFrame content in a Hub Item
- Add the tag itemType.iframe to any Item where you want to display external content in an iFrame when the Item is viewed.
- Specify the content to be iFramed by entering a URL in the Item's Description field. The URL can be either:
- The sole contents of the Description field, or
- Appear after the end of the normal description text, separated by only one space (e.g. "This is an iFramer Item https://www.example.com") — adding more than one space will cause the iFramed content not to appear
- When viewed, Items with both the special tag and a valid URL in their Description field will display the contents of the URL in an iframe.
Note: URLs that end with a supported Office Document filetype extension (.doc/.docx/.ppt/.pptx/.xls/.xlsx) or .pdf will automatically be displayed in the iFrame using the Office Web Viewer or Google PDF Viewer, respectively.
iFrame content from Dropbox
If you want to iFrame content that is hosted on Dropbox, some additional setup steps are required. This is because iFramer must use Dropbox Embedder (Dropbox's own embed viewer) to display this content, and doing so requires a Dropbox App Key.
To use iFramer for Dropbox content:
- Create a Dropbox app (this will be available immediately, and does not require approval from Dropbox)
- Register the domain(s) of your Hub(s) as "Chooser / Saver / Embedder domains" on your Dropbox app
- Copy your Dropbox App Key from your app
- Paste the Dropbox App Key into the iFramer app settings
- Once this setup is complete, you can embed content from Dropbox using the method outlined above under iFrame content in a Hub Item.
See the following article from Dropbox for instructions on how to create a Dropbox app, register domains for Embedder, and get your Dropbox App Key (you only need to read the section "Setting up the Embedder"):