Embed Code Syntax Guide

Starting Version 5.3.1, you can create your own custom Portal Pages with elements embedded from Metric Insights. Use the IFrame to embed such viewing options as Tiles, Tile Charts, Full Charts, element Previews and Viewers. This article will discuss how to embed these options for both Undimensioned and Dimensioned static and interactive (live) elements.

For Embedding, follow these steps:

  1. Get the Embed code for an Element, Category, Folder or a Favorite Folder (For more information on where to find the code, click Embedding Overview).
  2. Copy the code for any of the available viewing options (To see details, refer to Embedding with IFrame on an HTML Page).
  3. Insert the Embed code into your HTML Code Editor.

Follow the same steps to embed the JavaScript Code. Find out more about Embedding with JavaScript

Access your Portal Page

Go to Admin > Portal Pages > Portal Pages List > New/Existing Page

  1. Insert your Embed Code in the HTML Code Editor.
  2. Click [Save].
  3. View results.
Configure Attributes for the IFrame

After viewing the elements you have embedded on your custom page, you may need to make some adjustments. Changes can be made in the HTML Code Editor of the Portal Page. It is possible to:

  1. Scale up or scale down your elements (by changing the "width" and  "height" values for the Style attribute).
  2. Add a border for your IFrame (by either modifying the "border" value or that of the frameBorder attribute).
  3. Embed multiple elements using the same code snippet (by changing the ID for the entity to which the URL is pointing).
Embed several elements with a code snippet

If you need to embed several elements, Categories or Folders into your HTML page like in the example above, you don't have to look for the Embed codes for all of them.

You can:

  1. Use the code for one element as a snippet.
  2. Copy it for every element you need.
  3. Only change the replacement parameters (Tile ID).

NOTE

  • If you don't want all of your elements link back to Metric Insights, just switch the navigation_back parameter from the default Y (yes) to N (no).

1. Embedding Undimensioned elements (static)

The URL (src) part of the Embed code refers to:

  1. The type of viewing option (Tile).
  2. Element ID.

2. Embedding Dimensioned elements (static)

The URL part of the code for a Dimensioned Tile refers to:

  1. The type of viewing option (Tile)
  2. Segment (Dimension) ID
  3. Element ID

ID parameters are configurable. To embed several Dimensions for the same Tile, copy the IFrame code snippet and change the Segment (Dimension) IDs.

NOTE:

To get all of the Dimensions, specify the element ID only and do not reference the Segment (Dimension). This means that you will have to exclude the segment/ID parameters from the URL(src) part of the IFrame code.

3. Embedding Live elements

Embedded Live Elements are interactive and allow to easily surface relevant data right from the Portal Page.

The URL part of the code for this Live External Report refers to:

  1. The type of viewing option (Preview)
  2. Element ID
  3. Segment ID (because the element is Dimensioned)
  4. Width value
  5. Height value

Note:

Both the "width" and "height" values can differ for the Style and Src attributes as the Style attribute sets the dimensions of the IFrame embedded on a custom page, and the Src will point to a specific size of the element that is requested from the Server.

4. Embedding a Category

The URL part of the code for a Category refers to:

  1. The type of viewing option (Tile)
  2. Category ID

5. Embedding a Folder

The URL part of the code for a Folder refers to:

  1. The type of viewing option (Tile)
  2. Folder ID