Skip to main content

Embed mode

Embed mode allows a Learning Lab page to be embedded in another page via an iframe. Interface elements such as navigation, footers, and breadcrumbs are hidden, depending on the options selected.

Getting started

To start, you'll need the following iframe code:

<iframe src="https://path.to/page/?iframe=true" width="100%" scrolling="no"></iframe>

The query string, ?iframe=true makes the page remove the following elements:

  • Top navigation bar
  • Breadcrumbs
  • Right navigation
  • Previous and next buttons
  • Keywords and additional information
  • Footer

Here's a basic example of this in action.

Page options

Additional parameters can be added to the end of the query string to alter what is hidden in this mode:

  • hide-title - set to true to hide the <h1> title
  • hide-intro - set to true to hide the first paragraph with class lead


<!-- Hide title and intro paragraph -->
<iframe src="https://path.to/page/?iframe=true&hide-title=true&hide-intro=true" width="100%" scrolling="no"></iframe>

This maths page demonstrates hiding the title and lead paragraph. This approach is useful because it allows two separate maths courses to share the same initial content before diverging into different topics. By doing so, it eliminates duplicated content and ensures that the shared content remains within WordPress.

Link handling

Each link to another page gets target="_top added. This makes the link open in the full browser window, breaking out of the iframe.

Other notes