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.
How to embed iFrames
iFrames are added via the /menu.
- Type /iframe to open the /menu and filter for iFrame
- Click on the iFrame logo
- Paste the embed link into the input field
- Click "Embed link"
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.