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:
- Follow the steps to share a page.
- In the Page shared successfully window, under Embed, click the Options button to display the iframe options. Choose ArcGIS StoryMaps or Custom iFrame.
- 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.
- 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 StoryMaps.
The Embed block in the story builder has three size options: small, medium, and large. Iframes that are optimized for 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 size | Maximum 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:
| Size | Dimensions | Description |
|---|---|---|
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:
| Size | Dimensions | Description |
|---|---|---|
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:
- Embed video, social media, and iframes in ArcGIS Hub
- Embed widget in ArcGIS Experience Builder
- Add media in ArcGIS StoryMaps
- Insights iframe guide
- Rich text in ArcGIS Dashboards