Feature: Auto-height for AMP

The auto-height feature enables an app embedded in your web page to adjust its height in response to content changes. This feature is now also supported for AMP, a technology which makes web pages load faster.

AMP is a technology used to create speedy websites, originally introduced by Google in 2015. AMP sites derive their speed advantage from the simpler HTML mandated by AMP and from caching.

AMP pages can embed apps created with Calcapp using the amp-iframe tag. (There are some restrictions, though, including the fact that iframes must not appear close to the top of the document — refer to the AMP documentation for more information.)

However, up until now, AMP pages have not been able to use the auto-height feature we introduced last year. Our auto-height feature resizes the containing iframe so that it matches the height of your app as it changes size, including when users navigate to a new panel and when users cause fields to become visible or invisible.

The issue is that AMP pages cannot include arbitrary scripts, such as our calcapp-iframe.js script, which enables containing iframes to be resized. Instead, AMP requires that their own “AMP runtime” is the only script running on AMP pages.

(This isn’t strictly true — AMP supports running third-party scripts using the amp-script tag. This facility appears to be quite limited, though.)

Luckily, the AMP runtime supports resizing iframes, but only if the iframe in question supports AMP explicitly. Calcapp now emits events when the height changes, both for our own calcapp-iframe.js library (used on regular websites) and — as of today — for AMP.

calcapp-iframe.js supports constraining the height by setting minimum and maximum values. This does not work for AMP. Instead, AMP itself ensures that an iframe is not sized such that it occupies fewer than 100 vertical pixels.

By default, iframes created through AMP use a “sandbox,” which restricts what the iframe can do. As apps created through Calcapp use JavaScript pervasively, you must set a special attribute allowing for scripts to run.

Use this AMP HTML markup to embed an app you have created:

  <amp-iframe width="320"
              height="480"
              sandbox="allow-scripts allow-same-origin"
              layout="responsive"
              frameborder="0"
              src="https://connect.calcapp.net/?app=abc123">
  </amp-iframe>
« Calcapp 4 is coming On the road to Calcapp 4 »