Supporting iframes in flexible assets

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. This automatically makes it possible to support iframes in records created with that flexible asset type.

  1. Click Account from the top navigation bar.
  2. Click Flexible Asset Types from the sidebar.
  3. Click the pencil icon to the right of the asset you'd like to add your iframe content to.
  4. On the next screen, scroll down and click the + New field button.
  5. Give the new field a name ("Network Diagram") and choose the field's attributes, selecting Textbox as the kind of field.

    FAT_Textbox_field.png

  6. Click Save to save your changes.

To embed your third-party iframe code in a flexible asset:

  1. 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.
  2. Copy the <iframe> embed code provided by the third-party source. The example below is HTML code to embed a diagram from Lucidchart:

    Embed_Code_IT_Glue.png

  3. From IT Glue, open the flexible asset you want to copy the embed code to.
  4. Click Edit.
  5. Locate the textbox field ("Network Diagram").
  6. Open the Embed Media box by clicking on the (Embed Media icon).
  7. Paste the embed code and click OK.

    Embed_Iframe_IT_Glue.png

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.

IT Glue does not allow your iframe to contain any <script> tags due to security concerns.


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. 

Embedding images stored in OneDrive

Our iframe embed tests using images stored in OneDrive (personal) were successful, but due to Microsoft limitations, images stored in OneDrive for Business would not embed in an iframe.

However, there is an easy way to display images from your OneDrive for Business account in IT Glue. You generate a shared link in OneDrive, and then in the textbox field in IT Glue, you can click the (Image icon) and paste the shared link in the 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.

Was this article helpful?
4 out of 5 found this helpful