Fine-tuning the interactivity of embedded web content in classic Cascade stories

Web content can be interactive in many ways. For example, you can click on a link to jump to another page, drag a map to move it to another location, scroll to see more of a page, or hover over points on a chart for more information.

Hovering over points in a web chart shows more information

Unfortunately, there’s no way for the classic Cascade Builder to detect which types of interaction are present in web content that you embed in your story. For your specific content, none of the available interaction options may give you the experience you want, especially if the content has hover interactions.

Available options for Interaction mode in Cascade Builder

For this reason, we’ve added an advanced, hidden option to help you customize how your story behaves. This option is particularly useful for content with hover interactions, like a web chart, or for content with clickable buttons.

But because this option forces embedded media to respond immediately to mouse inputs, it is not appropriate for content with scroll interaction such as web mapping apps or web pages. In fact, we typically advise against embedding any scroll-enabled content inside a Cascade because it can provide a poor experience for readers. Instead, consider using screenshot of the content and a link that will open it in a new browser tab. See this blog for more recommendations about embedding content in story maps…

Best practices for embedding apps and web content in Story Maps

Enabling the hidden option

To access this option, you’ll need to make a simple edit to your story configuration. If you’ve never done that before, this article will tell you everything you need to know about how to go about that…

Editing the configuration of a story map

Find the web content for which you want to change the interaction mode in your story JSON. Then change its interaction property to mouseover, as shown below.

That’s it! You’ll now see Mouseover as the selected interaction mode in Cascade Builder. If you select another mode of interaction and save your story, the Mouseover option will disappear and you’ll need to edit the JSON of your story again to re-enable it.

The hidden “Mouseover” option will appear once you’ve edited the story JSON, as described above.

Hover interactions will work immediately and not require an initial click by the reader.

Interactive chart with “Mouseover” interaction

Here are some example stories with this option enabled:

• Northeast Branch (swipe interactive)
• Anacostia: Unbroken (interactive with buttons)
• Atlas of Electricity (interactive charts with hover)

Let us know if this option helps your story designs by leaving a comment below!