Skip to main content

Advanced embedding

Beta:

Advanced embedding is in beta. If you encounter issues or experience problems with a beta feature, please share your feedback on the Esri Community.

Although unlikely, changes to internal ArcGIS StoryMaps components may impact or break your custom code. Be sure to limit your customizations to essential features and style overrides.

Advanced embedding is available for stories, briefings, and collections.

Web developers can use advanced embedding to integrate an ArcGIS StoryMaps item into your website and share it with a custom link on your web domain, such as https://www.my-organization.gov/annual-report. It also allows you to modify the appearance of an ArcGIS StoryMaps item and add custom functionality using HTML, CSS, and JavaScript.

Advanced embedding is accomplished using <script> tags that allow the content of an ArcGIS StoryMaps item to be treated as part of the host web page. This provides more control over the content styling and eliminates additional scroll bars that may be present when using Standard embedding with an <iframe>. The ArcGIS StoryMaps application code stays hosted on Esri's servers and updates automatically to provide you with the best and latest security and performance improvements.

With advanced embedding, you can do the following:

  • Embed an ArcGIS StoryMaps item in a specific URL on your web domain

  • Integrate an ArcGIS StoryMaps item into your website's global navigation using your organization's standard website header and footer

  • Avoid multiple scrollbars when embedding ArcGIS StoryMaps content in your website

  • Use your own fonts

  • Apply custom styles to images, hyperlinks, buttons, and other content elements

  • Add custom components, such as a splash screen that shows when the page first loads or an expandable panel readers can use to submit questions or comments

  • Build new user experiences, such as a form that asks a reader to enter their ZIP code that then navigates a map to that location

  • Track reader engagement using your preferred analytics service

Tip:

For more information and examples, see the ArcGIS StoryMaps developer samples on GitHub.

Enable advanced embedding

Complete the following steps to enable advanced embedding:

  1. In the builder, click the More button ⋯ in the header and select Settings.

  2. On the Advanced tab, click Enable advanced embedding.

  3. Under Allowed domains, enter the name of a domain where you plan to embed the ArcGIS StoryMaps item; for example, www.example.com. Do not include a protocol or port number.

  4. Click Add.

  5. Repeat to add more domains, if needed.

  6. Publish the ArcGIS StoryMaps item.

Important:

An ArcGIS StoryMaps item must be shared with everyone to embed it in another web page.

Copy embed code snippet

Once advanced embedding is enabled and the ArcGIS StoryMaps item is published and shared with everyone, use the following steps to obtain the code snippet needed to embed it.

  1. Edit the ArcGIS StoryMaps item.

  2. Click the More button ⋯ in the header, and choose Embed this story.

  3. From the drop-down menu, select Script (advanced).

  4. Click Copy.

    The embed code is copied.

The embed code can also be obtained when viewing a published ArcGIS StoryMaps item from the Share menu on the Embed tab.

The code snippet is provided as <script> tags similar to what is shown below. Place the second script tag on the page where you want the ArcGIS StoryMaps item to be added.

<script>
  window.storyMapsEmbedConfig = {
    storyId: '[StoryMapItemID]',
    rootNode: '.storymaps-root',
  };
</script>
<script src="https://storymaps.arcgis.com/embed/view"></script>

Additional resources

Back to top