Embedding Overview

Tiles, Preview, Full Chart View and even the entire Viewer can be embedded in your own web pages. There are two methods for embedding, both can be done on almost any standard HTML page:

  1. By using iframes (<iframe>)
  2. Through JavaScript

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

  1. Use the following URL: https://<yourserver>.metricinsights.com/home/embedded/
  2. To preselect a Category for the Homepage, include: #/category/<category_id>

For example, to have an embedded iframe open the Metric Insights Homepage to Category 5:

https://mycompany.metricinsights.com/home/embedded/#/category/5

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 or Viewer via the Share button:

  1. Click the share icon to open the Share Now pop-up
  2. Click [Embed this instead] 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>/report/index/customview/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://demo.metricinsights.com/report/index/customview/element/106761/width/900/height/2600
Get Codes for Favorites

Access Content > Favorites

  1. Click the [Edit] button next to a Folder
  2. [Embed code]
Get Codes for Folders

Access Content > Folders

  1. Click the Folder's name to access the Folder Editor
  2. On the Content tab, click [</> Embed codes]
Get Codes for Categories

Access Content > Categories

  1. Click the Category's name to access the Categories Editor
  2. On the Info tab, click [</>Embed Code]

2. Select Embedding Options

  1. Language:  Choose to create the code in either HTML or JavaScript
  2. Select Element view type:
    • "tile": identical to view of tile on Catalog View
    • "tile Chart": same image as above only larger
    • "preview": an interactive image with additional detail as shown in Preview on Catalog View
    • "full Chart": an interactive image as shown on element Viewer
    • "viewer": not currently supported
  3. Determines if clicking on an element will open that element in Metric Insights; i.e., a Tile in MI vs. visualization in an external BI tool
  4. Select whether to open the embedded element in a new browser tab
  5. Click [Copy Code] to copy the resulting Embed code

3. Use Embedding Code

4. View the Embedded Elements

What's Next?

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