Insights iframe guide

There are several configurations available that will optimize your shared pages to embed in ArcGIS StoryMaps. This guide will provide you with examples of embedded Insights pages along with details on the configurations in Insights and in the story builder.

The embed blocks in the story builder can be size Small, Medium, or Large. The blocks are sized as follows:

Small

• Width: 848 px
• Height: Maximum of 848 px

Medium

• Width: 1280 px
• Height: Maximum of 1280 px

Large

• Width: 100%
• Height: Maximum height equal to 100% width

Insights page items have two configurations that are optimized for ArcGIS StoryMaps: Default and Custom.

Default

• Width: 100%
• Height: 100%

Custom

• Width: 100%
• Height: The height of the cards on the page in pixels

The small embed block has a default height and width of 848 px. When the Default configuration is used in Insights, the full height of the block is used, regardless of how much space is used by your cards.

When the Custom configuration is used, the iframe is sized to the height of the cards on the page, rather than using the full height of the embed block.

The small block size is not quite large enough to display two cards in height and width at the default spacing. Scroll bars appear on the side and bottom of the block when the Insights page is larger than the block size.

Use the Small embed block when your Insights page is less than or equal to twice the width of the default card size.

Use the Custom Insights configuration when the height of your page is less than twice the height of the default card size.

Use the Default Insights configuration when the height of your page is equal to or just under twice the height of the default card size.

The medium embed block has a default size of 1280 px and can fit cards that fill a space equal to 3 cards wide and 3 cards high at the default size with the default spacing.

Like the Small block, when the Custom configuration is used, the iframe is sized to the height of the cards on the page, rather than using the full height of the embed block.

Use the Medium embed block when your Insights page is less than or equal to the width of three cards at the default size and spacing, but more than the width of two cards.

Use the Custom Insights configuration when the height of your page is less than the height of three cards at the default size and spacing.

Use the Default Insights configuration when the height of your page is equal to or just under the height of three cards at the default size and spacing.

The large embed block is a square with a width of 100%. Therefore, the exact height and width will change depending on the size of the screen and the resolution.

For example, the embed block below contains a page with a width equal to four cards at the default size. Use the Restore down button on your browser and adjust the width of the browser window. The block resizes continually to fit the width of the window.

Use the Large embed block when your Insights page is too wide or too high to fit in a Medium embed block, taking into account that not all screens used to view your story will be the same size and resolution as your screen.

Use the Custom Insights configuration to fix the height of the page, rather than using a square block. The height of the embed block will be fixed to the height of your page unless the screen width is smaller than the fixed height, in which case the block will change to 100% x 100%.

Use the Default Insights configuration when you want both the height and width of the embed block to adjust to the screen where the story is being viewed. This configuration is more likely to result in scroll bars or empty space dependent on the screen size.

• Create a seamless transition to your embedded page by using the same background color for your Insights page and your story.
• Use the Small and Medium block sizes whenever possible to avoid scroll bars when your story is viewed on smaller screens.
• The dimensions of a shared page in Insights are measured by the distance from the top left corner, not only by the size of the cards on a page. If your embedded content is smaller than the width of the embed block, you can move the cards to the right to create a buffer space between the side of the page and the start of the cards. This will help center your card within the block.

See  Communicating your Insights: A practical guide  for more tips and tricks on creating and sharing reports from Insights.

The following example is based on the  Create a COVID-19 relative risk surface  workflow on ArcGIS Blog. It is embedded using a Small embed block and a Custom configuration.

The following example is a page designed in the  Create a report in ArcGIS Insights  lesson on Learn ArcGIS. It is embedded using a Medium embed block and a Custom configuration.

The following example is a page created in the  Visualize COVID-19 trends in ArcGIS Insights  lesson on Learn ArcGIS. It is embedded using a Large embed block and a Custom configuration.

See an example of a story created using Insights and ArcGIS StoryMaps:

•  In search of refuge: Mapping forced displacement from 1951 to 2017