How to embed content with an iframe

FIBRES allows you to embed parts of the software in other tools or websites.

Which content can be embedded

Currently, we offer embedding for Radar and Network views. Individual radars and focus networks can be embedded using an embed link and an iframe.

We are planning on more extensive sharing and embedding options. Sharing the results of your work with stakeholders is an important part of corporate foresight.

Instructions for embedding

Step 1: Ask us for an embed link

Send us a chat message or email us at support@fibresonline.com. Let us know which radar (radar name) you would like to embed, or which finding's focus network (finding name).

We will then send you an embed link for that specific radar or finding's focus network.

An embed link for a radar will look like this: https://app.fibresonline.com/embed/875/radar/mobilityRadar?apiKey=979beee6-d03c-4bce-b6aa-8214b58dfa95

An embed link for a focused network will look like this: https://app.fibresonline.com/embed/875/network?highlightId=688551&focus=true&apiKey=d3958486-5264-4932-8cc2-f6088da6b4bd

Important: Treat the embed links as confidential

Once an embed link is created, anyone with the embed link can view the content behind it. So, please treat your embed links as condfidential and only share them with stakeholders who ought to see the content. Please also note that embed links can only be "turned off" by requesting it from support@fibresonline.com.

Step 2: Create an iframe code with the embed link

An iframe is a piece of HTML code that will let you embed the radar. Copy this iframe and insert your radar link in place of YOUR LINK HERE:

<div style="position: relative; overflow: hidden; width: 100%; padding-top: 56.25%;"> <iframe style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; display: block; margin: 0px auto;" allow="fullscreen" src="PASTE YOUR EMBED LINK HERE"></iframe> </div>

With the previous radar embed link, the final embed code could look like this:

<div style="position: relative; overflow: hidden; width: 100%; padding-top: 56.25%;"> <iframe style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; display: block; margin: 0px auto;" allow="fullscreen" src="https://app.fibresonline.com/embed/875/radar/mobilityRadar?apiKey=979beee6-d03c-4bce-b6aa-8214b58dfa95 "></iframe> </div>

Tip: Give your embedded radar or network a specific height and width

The example iframe shared above is responsive, meaning that it always takes up all the space that is available to it within the layout that it is inserted in. It also automatically gives a height that is 16:9.

You can change the width and height of the iframe according to your needs. If you want to define specific height and width, use this code:

Step 3: Add the iframe code into your destination HTML

Most rich text editors have an "embed" option. Choose this option and paste the embed code into the embed section of your rich text editor.

Google is a great resource for tool-specific instructions. For example, here are instructions on how to embed content to a SharePoint page. We are happy to help if you are having trouble with this step.