Configure iframes to embed shared pages

Insights in ArcGIS Online
Insights in ArcGIS Enterprise
Insights desktop

You can embed shared Insights pages into HTML code using the <iframe> tag. An inline frame (iframe) allows you to embed an HTML document into another document (page). You can configure an iframe in two ways: optimize an iframe to embed in ArcGIS StoryMaps or customize an iframe that can be embedded in websites or other ArcGIS apps.

Configure an iframe

An iframe is generated when you share a page.

Complete the following steps to configure an iframe:

  1. Follow the steps to share a page.
  2. In the Page shared successfully window, under Embed, click the Options button to display the iframe options. Choose ArcGIS StoryMaps or Custom iFrame.
  3. Under Size, open the menu and choose a size.

    For ArcGIS StoryMaps, the size options are Default and Custom. For Custom iFrame, the size options are Small, Medium, Large, and Custom.

  4. Click the Copy button to copy the iframe.

You can copy the iframe into HTML code or into an app that supports embedding iframes.

ArcGIS StoryMaps iframes

You can optimize shared pages to embed them in ArcGIS StoryMaps.

The Embed block in the story builder has three size options: small, medium, and large. Iframes that are optimized for ArcGIS StoryMaps fill the width of the block. For best results, adjust the size of the Embed block and the width of the Insights page as follows:

Embed block sizeMaximum Insights page width

Small

Two cards at the default size

Medium

Three cards at the default size

Large

Four cards at the default size

If the size of the Insights page is wider than the Embed block, scroll bars appear.

The following iframe sizes are available for ArcGIS StoryMaps iframes:

SizeDimensionsDescription

Default

Width = 100 percent

Height = 100 percent

The iframe is sized to fit the default dimensions of an Embed block (small, medium, or large) in the story builder.

Custom

Width = 100 percent

Height = Height of the cards on the page

The iframe is sized to the width of the Embed block (small, medium, or large) and the height of the cards on the Insights page.

The height of a custom iframe can be edited and supports both pixels and percentages.

Custom iframes

Custom iframes can be embedded into most HTML code, including websites and ArcGIS products such as ArcGIS Experience Builder, ArcGIS Dashboards, and ArcGIS Hub.

Note:

It is recommended that you use a single card in a small iframe when embedding Insights content in Experience Builder to optimize viewing on small and medium devices.

The following iframe sizes are available for custom iframes:

SizeDimensionsDescription

Small

Width = 420 pixels

Height = 420 pixels

The size of a single map, chart, or table card at the default size. If the shared page is larger than the iframe dimensions, scroll bars appear.

Medium

Width = 830 pixels

Height = 830 pixels

The size of four cards at the default size, organized as two rows of two cards. If the shared page is larger than the iframe dimensions, scroll bars appear.

Large (default)

Width = 100 percent

Height = 100 percent

The full size of the iframe element in the HTML code.

Custom

Width = Width of the cards on the page

Height = Height of the cards on the page

The dimensions of the cards, in pixels, on the page so that the full page is visible with no scroll bars.

The height and width of a custom iframe can be edited and supports both pixels and percentages.

Resources

Use the following resources to learn more about embedding iframes in ArcGIS apps: