Content API

We offer an API for all learning content on serlo.org.
(There is a separate API for the metadata of the content.)

Recommended Option

Include serlo.org content in your own application via <iframe> like

<iframe src="https://de.serlo.org/1553?contentOnly"></iframe>

contentOnly is our recommended options. It hides all elements except the content, breadcrumbs navigation and search, e.g. https://de.serlo.org/1553?contentOnly

Terms of Use

The API is free. Please contact us before using the API beyond prototyping: en@serlo.org

Further Customization

For further customization of the output we provide a couple of query strings which you can combine according to your needs like

<!-- Hide only topbar and footer -->
<iframe src="https://de.serlo.org/27801?hideTopbar&amp;hideFooter"></iframe>

• hideTopbar hides the top navigation bar, e.g. https://de.serlo.org/1553?hideTopbar
• hideLeftSidebar hides the left sidebar (containing the subject navigation), e.g. https://de.serlo.org/1553?hideLeftSidebar
• hideRightSidebar hides the right sidebar (containing related content), e.g. https://de.serlo.org/1553?hideRightSidebar
• hideBreadcrumbs hides the breadcrumb navigation, e.g. https://de.serlo.org/1553?hideBreadcrumbs
• hideDiscussions hides the discussions, e.g. https://de.serlo.org/1553?hideDiscussions
• hideBanner hides the banners below the content that introduce persons working on Serlo, e.g. https://de.serlo.org/1553?hideBanner
• hideHorizon hides the links to meta pages / other subjects that are shown below the content, e.g. https://de.serlo.org/1553?hideHorizon
• hideFooter hides the footer, e.g. https://de.serlo.org/1553?hideFooter
• fullWidth removes horizontal padding for the content section and its maximum width, e.g. https://de.serlo.org/1553?fullWidth

Content height

We inform the parent window about the actual dimensions of our content via window.postMessage (initially and after any resize event). You can use that to give the iframe the correct height to avoid scroll bars:

window.addEventListener('message', e => {
  const { data } = e

  // Context is always `serlo`
  if (data.context !== 'serlo') {
    return
  }

  // Content width in px
  console.log(data.contentWidth)
  // Content height in px
  console.log(data.contentHeight)

  // Get the iframe somehow. You can also check `e.origin`
  const iframe = document.getElementsByTagName('iframe')[0]
  iframe.style.height = `${data.contentHeight}px`
})

Any Problems or Suggestions?

If that still doesn't fit your use case or you run into any issues, feel free to create an issue.