Embedding Interactive Content

Internet technology changes fast, with new, embeddable, and more powerful interactive content appearing every day. These new tools communicate complex or engaging content in ways the user can control. Content such as dynamic charts, social media discussions, decision tools, 360 video, interactive maps, and even games are available to embed, allowing us to amplify our web site or social media content.

Research has found that when interactive content is done right, it engages the audience, focuses their attention, and cultivates better memory retention of the information. It does this by stimulating intrinsic motivation within the audience so they want to dig in to find the information. Interactive content also provides more rich information with tactile controls that allow visual and auditory rewards as the user navigates the information. The sensory feedback and ability to control the discovery of information gives the audience instant gratification similar to a video game or a good conversation.

Things to Consider When Embedding

Ideally, we embed interactive content  to communicate our messages more effectively. Just like when a table and figure is used in flat content, we should reference and discuss the embedded interactive content to lead the user to interact with it. The interactive content should support the purpose of your communication and be considered part of the overall document.

Choosing interactive content:

  • Will your target audience be able to use it?
  • Will it further the purpose of the communication?
  • Will the interactive content fit within the overall design?
  • Will it work on mobile devices?
  • Will it share well on social media?

Cues to Interact

Most recognize the Google Map embedded on the right as an interactive element, but if the audience isn’t familiar with Google Maps, they may just think its a static image and won’t attempt to interact with it. With the increasing availability of embeddable, interactive content, it is sometimes a challenge to introduce and embed it so the user gets the most out of it.

Its often necessary to give the audience some hints how to use the interactive content. Lead the audience with why the interactive elements are useful. Sometimes clear prompts are needed such as, “Click, Hold and Drag”.

Embedding In A Web Page

Embed codes are HTML elements that allows you to put the content from one web site in a page on another web site.

Because these codes use HTML, some formatting can be done code to change how it embeds and appears in a web page. The World Wide Web Consortium has a lot of information on how to format and use embed codes. Within the iframe code you can modify characteristics like, the dimensions of the element, and if the element can have a scroll bar. Many additional formatting options are possible by adding CSS style, such as changing the background color, alignment within the page, and a host of other formatting options.

The optimal experience for embedded content is usually in it’s own browser tab, as a full screen, if the content doesn’t have a link to do that, it is a good idea to put a link outside of the embed code. I like to put it directly underneath in a phrase like, “Click to go to the Full Page Version”. This allows the viewer to jump to it for a better experience.

This example embeds a 360 video from YouTube. Most users are familiar with YouTube but may not realize this video is interactive. So it needs some introduction to tell the users that they can click and drag to look around the video.

Click and Drag To Look Around the 360 Video



Screen Shot IFRAME Embed Code ToolThis Story Map Tool communicates a lot of interactive information. Notice how the dimensions of the original content is best when viewed in a letterbox style format. The full screen dimensions of the source content will usually be the best dimensions when embedded.

The embed code provided, defaults at 800 pixels tall and 100% wide, taking up the entire width of this web page’s content area, and extending way past the bottom of the browser window. This embedded example uses a 400 pixel height and 80% width to give it more of a margin and to appear as part of the page, instead of dominating the page.

Go to the Full Interactive Map



In this example, an Interactive Photo Assistant, from Shutterfly asks some questions and gives you helpful hints.  As you can see in the top example, the original content has a transparent background, so the black text is lost on our page’s dark background. Also, the way the interactive content is formatted, the audience has to scroll down within it to see all the information, but the default iframe code turns scrolling off. In the second example, I added a white background style and turned on scrolling in the iframe HTML code.



Go to the Full Page Interactive Tool


In conclusion, the key is to think about the audience you are creating the message for.

  1. Consider what sort of devices they will view the page on and their purpose for viewing the page.
  2. Introduce the interactive element in your written content.
  3. Tell the user how to interact with it and why they will want to.
  4. After embedding, test it to make sure it looks good in your page and shares well on social media.