These instructions explain how to support the embedding of iframe code in flexible assets.
Using iframes, you can add and display web-based content that's hosted by other services, such as OneDrive, DropBox, and Lucidchart, in IT Glue. This offers you the opportunity to embed a "live" diagram image that will continually update as changes are made to the source file.
First, a user with a Manager or Administrator role will need to add a Textbox field to the flexible asset type to add support for embedded media (iframes):
- Click Account from the top navigation bar.
- Click Flexible Asset Types from the sidebar.
- Click the pencil icon to the right of the asset you'd like to add your iframe content to.
- On the next screen, scroll down and click the + New field button.
- Give the new field a name ("Network Diagram") and choose the field's attributes, selecting Textbox as the kind of field.
- Click Save to save your changes.
To embed your third-party iframe code in a flexible asset:
- Make sure you follow the instructions for publishing your content that's recommended by the third-party platform. Any content will have to be published to the web first.
- Copy the <iframe> embed code provided by the third-party source. The example below is HTML code to embed a diagram from Lucidchart:
- From IT Glue, open the flexible asset you want to copy the embed code to.
- Click Edit.
- Locate the textbox field ("Network Diagram").
- Open the Embed Media box by clicking on the (Embed Media icon).
- Paste the embed code and click OK.
After saving the flexible asset, the embedded HTML should be interactive. For example, you should be able to pan around the image within its window, and click + and – buttons to zoom in and out.
Keep in mind that not all content will work as an iframe. This will require you to do some testing to know if the iframe content can be embedded. If you have issues viewing your iframe content after it's published, you may have to disable third-party browser security extensions/add-ons, such as Privacy Badger.
Setting the frame size
If you need to enlarge the frame, first check what resize options the third-party source provides. Otherwise, you can resize the frame that displays the embedded media by using standard HTML iframe properties.
Open the HTML source and look for width and height values inside the iframe tag. Change the values to get the frame size you want. For example:
<iframe width="100%" height="600px"
Save it, and refresh the screen to see the frame size change.
A few notes about OneDrive
- Our tests using embedded images from OneDrive (personal) were successful, but not from OneDrive for Business.
- We did, however, find a way to embed images that are hosted in OneDrive for Business: you generate a shared link, and then in the textbox field, you can click the (Image icon) and paste the shared link in the Image Properties dialog:
Note: We recommend that you choose the best possible quality for images. If the images contain a lot of detail, we suggest an image quality of 300dpi. For a less detailed image, an image quality of 150dpi will suffice.