Embedding iFrames onto Delibr documents

Introduction to iFrames

An iFrame is a way of embedding web pages onto other web pages. In practice this means that you can embed a design file from, for instance, Figma onto a Delibr document. Embedding content directly into a document has some advantages compared to uploading design files to the document, or attaching screenshots. Mainly not having to re-upload the file/screenshot when a change is made to the original design file. 

Some use cases where iFrames are helpful

  • Embed designs directly from e.g. Figma, Invision, into a Delibr document. 
  • Embed analytics dashboards directly from e.g. Mixpanel, Metabase, into a Delibr document. 
  • Embed videos directly from e.g. Vimeo, YouTube, directly into a Delibr document. 

Figma iframe

How to embed iFrames

iFrames are added via the /menu. 

  1. Type /iframe to open the /menu and filter for iFrame
  2. Click on the iFrame logo
  3. Paste the embed link into the input field
  4. Click "Embed link"

How to add an iFrame in Delibr

Not all pages can be embedded

Only certain web pages can be embedded using an iFrame. If you copy a random URL from the web, chances are that it will not work. Instead, try looking for a button called "share" or "embed" on the page you wish to embed. For instance, in Figma when you click "Share" on a file you get to select an embed code for either the entire file or a selected frame. 

The more sophisticated design and analytics tools out there offer this functionality, and so it's simply a matter of finding the correct embed URL.