All eazyBI for Jira eazyBI for Confluence Private eazyBI

Embed as iframe
Private eazyBI eazyBI.com

eazyBI reports and dashboards can be embedded in other HTML pages as <iframe>element.

You can publish reports and dashboards both from public eazyBI accounts (and then any user will be able to see report results) as well as from non-public eazyBI accounts (in this case user will need to log in eazyBI if no active eazyBI browser session will be present for this user).

An alternative solution for embedding eazyBI reports is embedded iframes with access tokens.

Embedded iframes with access tokens are available in eazyBI Cloud PLUS plan, eazyBI Private Unlimited Users plan, eazyBI for Jira and eazyBI for Confluence apps.


On this page:

Embed report as iframe

When you have opened the report in the Analyze tab, then there is a ... button in the toolbar. Press the button to see the dropdown list of options, choose the  </> Embed report. When you are in the Dashboard tab then, each report has an </> icon in the report header. When pressing this icon, you will see a similar dialog to this:

You can include generated <iframe ...></iframe> code in another HTML page, and as a result, you will see the eazyBI report rendered inside this web page:

Set the theme to dark or light

The iframe theme, light or dark, will adjust to the viewer's browser theme. If you would like to publish the iframe with a theme matching your page, add ?theme=dark or ?theme=light to iframe element src URL. Please see below the same report with a dark theme:

<iframe width="100%" height="482" src="https://eazybi.com/accounts/1/embed/report/1?theme=dark" frameborder="0"></iframe>


Disable report actions or enable results export

If you would like to publish a report that cannot be modified (disable all report modification popups), then add ?disable_actions to iframe element src URL. Please see below the same report with all report actions disabled:

<iframe width="900" height="482" src="https://eazybi.com/accounts/1/embed/report/1?disable_actions" frameborder="0"></iframe>


In a similar way, you can add the enable_export parameter to URL to enable results export.

If you have added the disable_actions parameter, then you can still allow individual actions with allowed_actions=... parameter where you list one or several comma-separated actions – expand_drill_into, drill_across, drill_through, page_selection, or report_dashboard_title.

Embed dashboard as iframe

You can also embed the eazyBI dashboard page in other HTML pages. If you have dashboard edit permission, then click the edit button in the top right corner of the Dashboards tab page and then click the Embed dashboard button, and you will see a similar Embed dashboard in another HTML page dialog as for the report. Include generated <iframe> code in another page to see the embedded dashboard:

Embed dashboard with dynamic iframe resize

In the previously embedded dashboard, you can see that if you expand rows in the table report, then the iframe is not resized, and you get a scrollbar inside the iframe (iframe size stays as you have specified in the iframe height attribute). To achieve automatic <iframe> element resizing based on eazyBI dashboard height you need to perform the following additional tasks (see explanation of this iframe resizing approach).

At first, you need to create an additional static HTML file resize_iframe.html on the same web server, which will serve the main HTML page, which will include <iframe> with eazyBI dashboard:

<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
  <body onload="parentIframeResize()">
    <script>
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize() {
        var height = getParam('height');
        // This works as our parent's parent is on our domain.
        var iframe = parent.parent.document.getElementById("eazybi_dashboard");
        if (iframe && iframe.tagName === 'IFRAME') {
          iframe.height = parseInt(height);
        }
      }
      // Helper function, parse param from request string
      function getParam(name) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
          return "";
        else
          return results[1];
      }
    </script>
  </body>
</html>

Now modify <iframe> element and include additional id="eazybi_dashboard" attribute (the same as used in getElementById above) as well as add resize_iframe parameter to eazyBI URL in src attribute and as parameter value specify URL encoded resize_iframe.html full URL on your web server. See the example code that is used on this page:

<iframe id="eazybi_dashboard" width="100%" height="798" src="https://eazybi.com/accounts/1/embed/dashboard/6?resize_iframe=https%3A%2F%2Fdocs.eazybi.com%2Fplugins%2Fresize_iframe.html" frameborder="0"></iframe>

And now the embedded eazyBI dashboard will automatically resize it's <iframe> element to match the current dashboard height:


This text is right after <iframe> to illustrate automatic resizing.

Dynamic page filter selection

If your embedded reports contain page filters or your dashboards contain common page filters, you can dynamically set value for those filters by passing the value in URL. You should add parameter selected_pages and value should be a comma-separated full member names for page dimensions. Full member name also contains dimension name, and eazyBI will automatically match members to page dimensions. Please see below example URL below and the report with the pre-set time and measures page filter 

<iframe width="100%" height="482" src="https://eazybi.com/accounts/1/embed/report/1?selected_pages=[Time].[1997].[Q1%201997],[Time].[1997].[Q2%201997],[Measures].[Unit%20sales]" frameborder="0"></iframe>

Adding parameters to URL

You can provide several parameters to the URL of the shared report or dashboard, in that case, use an ampersand & to separate several parameters. To assign a value to the parameter user an equal sign =. To provide several values for one parameter, separate those values by a comma , .

For example, you can provide parameter disable_actions , allowed_actions and selected_pagesfor a report like this:

<iframe width="100%" height="482" src="https://eazybi.com/accounts/1/embed/report/1?disable_actions&allowed_actions=drill_across,page_selection&selected_pages=[Time].[1997].[Q1%201997],[Time].[1997].[Q2%201997],[Measures].[Unit%20sales]" frameborder="0"></iframe>

For example, to change the report language use the parameter locale. See more - Custom Locales. 

<iframe width="100%" height="482" src="https://eazybi.com/accounts/1/embed/report/1?disable_actions&allowed_actions=drill_across,page_selection&selected_pages=[Time].[1997].[Q1%201997],[Time].[1997].[Q2%201997],[Measures].[Unit%20sales]&locale=lv" frameborder="0"></iframe>