Embedding elements on a dashboard using iframe
You can embed interactive charts, videos, and other external elements on dashboards using iframes - а dedicated feature for this has been developed on the dashboard.
How to add an iframe
In the toolbar of a dashboard, click on the ‘Add embedded controls’ icon and select ‘Iframe’.
In the pop-up window, enter the embedding link from an external service and click ‘Create’.
Important: The link must be configured specifically for embedding on an external service. A regular link to a video or chart will not work.
Typically, an iframe link is wrapped in code that defines its parameters. You need to extract and use just the link, not the full code.
Adjust the size and position of the embedded element directly on the dashboard.
Control input for iframe
Depending on the configuration, some iframe links can contain some dynamic parameters that allow passing these parameters using the control assigned to the iframe. As a result, the control may affect the content displayed in the iframe. Here is an example.
We’re using the iframe link having the parameter ‘country’: https://ourworldindata.org/grapher/distribution-of-population-poverty-thresholds?country=~EGY
This parameter determines which country information is displayed in the chart. Accordingly, we can pass this parameter using a control. To do this, you need to know the parameter values.
In our case, we can pass the value ‘EGY’ to show information about Egypt, or ‘BLR’ for Belarus, etc.
Create control using any options; the dataset is not important here.
Rename these options accordingly to the parameters.
In our example, the parameters are three-letter country codes, which would not display well on the control. Therefore, we use full country names for the option labels and set the codes as aliases.
Rename the control so that its name matches the parameter. In our case, the parameter is 'country', so the control should be named the same.
Assign the control to the iframe widget. There is only one option for the assignment. The functionality operates based on label matching.
Go to VIEW mode to check how it works.
Here is how it works in our example:
Remember that the parameters and link must be configured on the external service side.
Display iframe content in a pop-up
Embedded elements can be displayed in a separate pop-up window on the dashboard. Select the iframe/portlet widget and tick the ‘Display in popup’ checkbox in the left menu pane.
Adjust the pop-up size and the button label. Now in VIEW mode, you can trigger a pop-up by clicking a button. To close the pop-up, just click anywhere outside its area.