Help & Documentation
Open Support Ticket

Embedding Overview

NOTE: This article describes Embedding in Metric Insights versions 7.0.1+, for versions prior to 7.0.1, see Embedding Overview (prior to v7.0.1).

Tiles, Preview, Full Chart View and even the entire Viewer can be embedded in your own web pages by using iframes (<iframe>).

You may also choose to embed all of Metric Insights into an iframe on your web portal:

  1. Use the following URL: https://<MI_hostname>/home
  2. To adjust layout options, use the following parameters (available values: "Y"/"N"):

For example, to have an embedded iframe open the Metric Insights Homepage without displaying announcements:

https://<MI_hostname>/home?hide_announcements=N

The whole process of embedding comprises the following steps:

  1. How to Find the Embedding Code
  2. Select Embedding Options
  3. Use Embedding Code
  4. View the Embedded Elements

What's Next?

Note: To be able to embed Metric Insights content on other sites, see Embedding Error.

1. How to Find the Embedding Code

Get Codes for Individual Elements

From Element Editors

Access the Advanced tab of the Editor

  1. Click [</> Embed Code] to obtain the code.

From the Element Preview or Viewer

Access the Embed Code from the Preview via the Share button:

  1. Click the share icon to open the Share now pop-up.
  2. Click [</> Embed code] to get the codes.

Access the Embed Code from the Viewer:

  1. On the top-right corner of the Viewer:
    • v7.0.2a+: Click [More]
    • Prior to v7.0.2a: Click [Actions]
  2. [Email this element now]
  3. Click [</> Embed code] to get the codes.
Get Codes for Dataset Report Components

Embed a Report Component

Access Report Editor > Content

  1. Open a Report Component (chart, table) > click [Edit] button.
  2. On the Component Editor pop-up, click [</> Get Embed Code].

Embed a Full Dataset Report

To embed a full Dataset Report, use the following URL format:

https://<hostname>/chart/index/preview/element/<dataset_report_ID>/width/<width_value>/height/<height_value>

Note: Parts of the URL enclosed in <> are customizable.

To build a URL for the whole Dataset Report embedding:

  1. Copy the hostname and Dataset Report ID from the URL in Dataset Report Editor or Viewer.
  2. Specify the values for width and height.

Sample URL:

https://docs.metricinsights.com/chart/index/preview/element/152713/width/900/height/2600
Embed Code for Favorites

Modify the URL for Favorite embedding: 

<iframe style="width:1700px; height:2400px; border: 0px none;" frameBorder="0" src="/service/iframe/index/type/tile/favorite/<ID>/height/2400/navigation_back/Y"></iframe>
  • Adjust width and height parameters of the iframe.
  • The type of viewing option for Favorite is tile.
  • Specify the Favorite ID.
  • Set height for the embedded tiles.
Embed Code for Folders

Modify the URL for Folder embedding: 

<iframe style="width:1700px; height:2400px; border: 0px none;" frameBorder="0" src="/service/iframe/index/type/tile/folder/<ID>/height/2400/navigation_back/Y"></iframe>
  • Adjust width and height parameters of the iframe.
  • The type of viewing option for Folders is tile.
  • Specify the Folder ID.
  • Set height for the embedded tiles.
Embed Code for Categories

Modify the URL for Category embedding: 

<iframe style="width:1700px; height:2400px; border: 0px none;" frameBorder="0" src="/service/iframe/index/type/tile/category/<ID>/height/2400/navigation_back/Y"></iframe>
  • Adjust width and height parameters of the iframe.
  • Specify the Category ID.
  • Set height for the embedded tiles.

2. Select Embedding Options

  1. Select Element view type:
    • "Tile": Identical to the tile view on the homepage.
    • "Preview": Static image as displayed in Preview on the homepage.
    • "Live Dashboard": Interactive image, but without the Metric Insights viewer functionality.
    • "Viewer": Identical to element opened in the viewer.
  2. Determines if clicking on an element will open that element in Metric Insights; i.e., a Tile in MI vs. visualisation in an external BI tool.
  3. Select whether to open the embedded element in a new browser tab.
  4. Click [Copy Code] to copy the generated Embed code.

3. Use Embedding Code

4. View the Embedded Elements

What's Next?

Populate your Apps (Portal Pages) with Embedded Elements, Folders, and Categories. For details, see: