Uberflip Marketplace

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.

Features:

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

Setup

• 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.
• The iFraming function of this app primarily relies on a Stream's canonical URL to determine the source of the content to be iFramed. To set a canonical URL on a Stream, the Enable Canonical Meta Tag option must be turned on under Hubs > Content > Stream > Options tab > Enable Canonical Meta Tag.

Note: If the app can't find a canonical URL for an Item that carries the iFraming tag, it will look in the Item's description for the URL to use instead. This is useful for Items that appear in Streams where the Enable Canonical Meta Tag option can't be turned, e.g. Sales Streams. See the How To Use section below for more details.

App Settings

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:

Enable

Toggle this switch on (green) or off (grey) turn iFramer on or off. Turning the app on will only have an effect once you add either of the two special tags to your Items (see above).

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 Canonical URL field (on the Item's SEO tab). 

Alternatively, you can specify the URL to be used in the Item's Description field, for example if the Item does not accept a canonical URL. The URL can be either:

• The sole contents of the Description field, or 
• Appear after the end of the normal description text. In this case, it must 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.

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.

As a best practice, we recommend adding the iFraming tag only to Items that you have placed in a purpose-built Blog Stream. You can then manually add the desired Items whose contents will be iFramed from the canonical URL. Each Item can simply consist of:

• Title
• Canonical URL set on SEO tab or description containing the URL
• Thumbnail image
• Tagged with itemType.iframe
• Items in this Stream do not require any content in Uberflip (as the content will be within the iFrame)

Tip: For efficiency, you can also use Smart Filters to set the tags for this app on all Items in this Stream automatically as they're created.

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, you need to:

1. Create a Dropbox app (this will be available immediately, and does not require approval from Dropbox)
2. Register the domain(s) of your Hub(s) as "Chooser / Saver / Embedder domains" on your Dropbox app
3. Copy your Dropbox App Key from your app
4. Paste the Dropbox App Key into the iFramer app settings

You can find instructions on how to create a Dropbox app, register domains for Embedder, and get your Dropbox App Key in the following article (you only need to read the section "Setting up the Embedder"):

Dropbox: Using the Embedder